html{
    background-color: rgb(0, 0, 0);
    font-family: "quasimoda", sans-serif;
	font-weight: 400;
	font-style: normal;
}


.label{
    position: absolute;
    animation-name: wave;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}

@keyframes wave {
	0% {letter-spacing: normal;}
    50% {letter-spacing: 2px;}
    100% {letter-spacing: normal;}
  }

h2{
    color: #fff;

}

h4{
    font-size: large;
    color: #fff;
    line-height: 1.2;
}

#content{
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 100;
    color: transparent;
    opacity: 1;
}


#content1{
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 100;
    color: transparent;
    opacity: 0;
}


#arrow{
    position: absolute;
    right: 20%;
    top: 1%;
    transform: rotate(-100deg);
}

#arrow2{
    position: absolute;
    left: 20%;
    top: 70%;
    transform: rotate(100deg);
}

.screen{
    color:#fff;
    position: absolute;
    display: inline-flex;
    top: 60%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 80%;
}

#day {
    font-size: 10rem;
    margin-top: -50px;
}

h1{
    font-size: xxx-large;
}

#climate{
    position: absolute;
    top: 80%;
    right: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
}

#clothing{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

#cake{
    position: absolute;
    top: 73%;
    left: 60%;
    transform: translate(-50%, -50%);
    width: 60%;
}

#pancake{
    position: absolute;
    top: 50%;
    left: 2%;
    transform: translate(-50%, -50%);
    transform: rotate(7deg);
}

#tofu{
    position: absolute;
    top: 15%;
    left: 5%;
    transform: translate(-50%, -50%);
    transform: rotate(-7deg);
}

#salad{
    position: absolute;
    top: 35%;
    right: -13%;
    transform: translate(-50%, -50%);
}

a{
    text-decoration: none;
}

#bubble{
    position: absolute;
    width: 26%;
    top: 55%;
    right: 0;
}



@media (max-width: 950px) {

    #content{
        opacity: 0;
    }

    #content1{
        position: absolute;
        top: 50%;
        opacity: 1;
    }

    #content1 h4{
        font-size: small;
    }

    #clothing{
        top: 80%;
        left: 45%;
    }

    #arrow{
        right: 5%;
    }

    #climate{
        width: 45%;
        top: 85%;
        left: 30%;
    }

    #bubble{
        width: 30%;
        top: 75%;
        right: 2%;
    }

    #tofu{
        top: 10%;
        width: 35%;
    }

    #salad{
        top: 25%;
    }

    #cake{
        top: 85%;
        width: 100%;
        left: 50%;
    }

    #arrow2{
        top: 65%;
        left: 10%;
    }

    .screen{
        display: contents;
        top: 60%;
        left: 55%;
        transform: translate(-50%, -50%);
    }

    .screen h1{
        font-size: xx-large;
    }

    #line1{
        position: absolute;
        top: 20%;
        left: 45%;
    }

    #day{
        position: absolute;
        top: 45%;
        left: 20%;
    }

    #line2{
        position: absolute;
        top: 70%;
        left: 10%;
    }
    
}


@media (min-width: 1380px) {
    #content h4{
        font-size: x-large;
    }

    .label h2{
        font-size: xxx-large;
    }

    .screen{
        display: contents;
    }

    #line1{
        position: absolute;
        font-size: 6rem;
        top: 25%;
        left: 10%;
    }

    #day{
        position: absolute;
        font-size: 19rem;
        top: 50%;
        left: 33%;
    }

    #line2{
        position: absolute;
        top: 60%;
        left: 50%;
        font-size: 6rem;
    }

}