/* Your styles here... */
p {
    font-family: "Inter", monospace;
}

.morning__Total {
    display: grid;
    place-items: center;
    height: 50vh;
    gap: 2rem;
}

.morning__content {
    font-size: 3rem;
    text-align: center;
    margin: 0;
}


.morning__button p {
    margin: 0;
    font-family: "Roboto", monospace;
}

.morning__button {
    padding: 5rem 3rem;
    cursor: pointer;
    background: none;

}

.morning__button a {
    text-decoration: none;
    color: black;
    text-transform: uppercase;
    display: inline-block;
}

@keyframes shake {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(15deg); }
    50%  { transform: rotate(0deg); }
    75%  { transform: rotate(-15deg); }
    100% { transform: rotate(0deg); }
}

.morning__button button :hover {
    animation: shake 0.4s infinite;
}


.Go__content p {
    margin: 0;
}

.Go__content {
    cursor: pointer;
    background: none;
    display: inline-block;
    height: 50vh;

}

.Go__content a {
    text-decoration: none;
    color: black;
    text-transform: uppercase;
    display: inline-block;
}

.Go__Total {
    display: grid;
    place-items: center;
}

@keyframes slideDown {
    0%   { transform: translateY(0px); opacity: 0; }
    100% { transform: translateY(20rem);      opacity: 1; }
}

.Go__content a:hover p { 
    animation: slideDown 0.6s ease forwards;
}


.knowledge__button a{
    text-decoration: none;
}

.knowledge__button button:hover {

    animation: bigger 20s infinite;
}

@keyframes bigger {
    0%   { transform: scale(1); }
    100% { transform: scale(4); }
}

.home__content p {
    font-size: 3rem;
    text-align: center;
    display: inline;
}

.Back__content p {
    font-size: 3rem;
    text-align: center;
    display: inline;
}

@keyframes mirror {
    0% { transform: scaleX(1); }
    50% { transform: scaleX(-1); }
    100% { transform: scaleX(1); }
}

.Tomorrow__button button:hover {
    animation: mirror 5s infinite;
}

.I1{
    position: fixed;
    left: 80%;
}

.I2{
    position: fixed;
    left: 75%;
    top:10%;
    mix-blend-mode: multiply;
}

.I3{
    position: fixed;
    left: 50%;
    top:0%;
    mix-blend-mode: multiply;
}

.I4{
    position: fixed;
    left: 25%;
    top:10%;
    mix-blend-mode: multiply;
}