* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: rgb(255, 255, 255);
    transition: background-color 2s;
}

header {
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
    font-family:monospace;
    font-size: 16px;
}

.resize {
    padding: 10px;
    margin-bottom: 10px;
    font-family:monospace;
    font-size: 15px;
    position: absolute;
    margin: auto;
    bottom: 5px;
    right: 5px;
    z-index: 1;
}

.happy1 {
    position: fixed;
    bottom: 50vh;
    left: 10vw;
    animation: updown .5s infinite alternate;
    animation-delay: -0.3s;
}


.happy2 {
    position: fixed;
    top: 20vh;
    left: 27vw;
    animation: updown .5s infinite alternate;
    animation-delay: -0.4s;
}

.happy3 {
    position: fixed;
    top: 60vh;
    left: 45vw;
    animation: updown .5s infinite alternate;
    animation-delay: -0.8s;
}

.happy4 {
    position: fixed;
    bottom: 13vh;
    right: 28vw;
    animation: updown .5s infinite alternate;
    animation-delay: -0.1s;
}

.happy5 {
    position: fixed;
    top: 20vh;
    right: 30vw;
    animation: updown .5s infinite alternate;
    animation-delay: -0.3s;
}

.happy6 {
    position: fixed;
    bottom: 16vh;
    left: 24vw;
    animation: updown .5s infinite alternate;
    animation-delay: -0.6s;
}

.happy7 {
    position:fixed;
    top: 44vh;
    right: 12vw;
    animation: updown .5s infinite alternate;
    animation-delay: -0.2s;
}

.annoyed1 {
    position: fixed;
    bottom: 50vh;
    left: 10vw;
    animation: updown .3s infinite alternate;
    animation-delay: -0.3s;
    display: none;
}
.annoyed2 {
    position:fixed;
    top: 20vh;
    left: 27vw;
    animation: updown .3s infinite alternate;
    animation-delay: -0.4s;
    display: none;
}

.annoyed3 {
    position: fixed;
    top: 60vh;
    left: 45vw;
    animation: updown .3s infinite alternate;
    animation-delay: -0.8s;
    display: none;
}

.annoyed4 {
    position: fixed;
    bottom: 13vh;
    right: 28vw;
    animation: updown .3s infinite alternate;
    animation-delay: -0.1s;
    display: none;
}

.annoyed5 {
    position: fixed;
    top: 20vh;
    right: 30vw;
    animation: updown .3s infinite alternate;
    animation-delay: -0.3s;
    display: none;
}

.annoyed6 {
    position: fixed;
    bottom: 16vh;
    left: 24vw;
    animation: updown .3s infinite alternate;
    animation-delay: -0.6s;
    display: none;
}

.annoyed7 {
    position: fixed;
    top: 44vh;
    right: 12vw;
    animation: updown .3s infinite alternate;
    animation-delay: -0.2s;
    display: none;
}

.angry1 {
    position: fixed;
    bottom: 50vh;
    left: 10vw;
    animation: updown .1s infinite alternate;
    animation-delay: -0.3s;
    display: none;
}
.angry2 {
    position: fixed;
    top: 20vh;
    left: 27vw;
    animation: updown .1s infinite alternate;
    animation-delay: -0.4s;
    display: none;
}

.angry3 {
    position: fixed;
    top: 60vh;
    left: 45vw;
    animation: updown .1s infinite alternate;
    animation-delay: -0.8s;
    display: none;
}

.angry4 {
    position: fixed;
    bottom: 13vh;
    right: 28vw;
    animation: updown .1s infinite alternate;
    animation-delay: -0.1s;
    display: none;
}

.angry5 {
    position: fixed;
    top: 20vh;
    right: 30vw;
    animation: updown .1s infinite alternate;
    animation-delay: -0.3s;
    display: none;
}

.angry6 {
    position: fixed;
    bottom: 16vh;
    left: 24vw;
    animation: updown .1s infinite alternate;
    animation-delay: -0.6s;
    display: none;
}

.angry7 {
    position: fixed;
    top: 44vh;
    right: 12vw;
    animation: updown .1s infinite alternate;
    animation-delay: -0.2s;
    display: none;
}



.ummm {
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
    font-family:monospace;
    display: none;
    font-size: 85px;
}

.tooclose {
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
    font-family:monospace;
    display: none;
    font-size: 100px;
}



@keyframes updown {
    0% {
        transform: translateY(0); 
    }
    100% {
        transform: translateY(4px);
    }
}

@media screen and (max-width:800px) {
    body {
        background-color: rgb(255, 156, 49);
}
    .ummm {
        display: block;
    }
    header {
        display: none;
    }
    .annoyed1 {
        display: block;
    }
    .annoyed2 {
        display: block;
    }
    .annoyed3 {
        display: block;
    }
    .annoyed4 {
        display: block;
    }
    .annoyed5 {
        display: block;
    }
    .annoyed6 {
        display: block;
    }
    .annoyed7 {
        display: block;
    }
    .happy1 {
        display: none;
    }
    .happy2 {
        display: none;
    }
    .happy3 {
        display: none;
    }
    .happy4 {
        display: none;
    }
    .happy5 {
        display: none;
    }
    .happy6 {
        display: none;
    }
    .happy7 {
        display: none;
    }
}

@media screen and (max-width:600px) {
    body {
        background-color: rgb(197, 26, 26);
        font-size: 0%;
    }
    .ummm {
        display: none;
    }
    .tooclose {
        display: block;
    }
    .annoyed1 {
        display: none;
    }
    .annoyed2 {
        display: none;
    }
    .annoyed3 {
        display: none;
    }
    .annoyed4 {
        display: none;
    }
    .annoyed5 {
        display: none;
    }
    .annoyed6 {
        display: none;
    }
    .annoyed7 {
        display: none;
    }
    .angry1 {
        display: block;
    }
    .angry2 {
        display: block;
    }
    .angry3 {
        display: block;
    }
    .angry4 {
        display: block;
    }
    .angry5 {
        display: block;
    }
    .angry6 {
        display: block;
    }
    .angry7 {
        display: block;
    }
}