*{
    box-sizing:border-box;
}

body{
    background-color: rgb(255, 197, 197);
    height:100vh;
    width: 100vw;
    margin:0;
}

@font-face {
    font-family: 'IAmTheCrayonMaster';
    src: url('./assets/IAmTheCrayonMaster.woff2') format('woff2'),
    url('./assets/IAmTheCrayonMaster.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


h1{
    font-size:60px;
    color:red;
    font-family: 'IAmTheCrayonMaster';
    text-align: center;
    margin:0;
}

h2{
    font-size:30px;
    background-color:rgb(245, 232, 166);
    font-family: 'IAmTheCrayonMaster';
    text-align: center;
    margin:0;
}

.container{
    display:flex;
    align-items:center;
    justify-content:space-evenly;
    margin: 0 auto;
    background-color: aliceblue;
    width:500px;
    height:500px;
    position:relative;
    top:50px;

}

.waterbottle{
    background-color:rgb(33, 199, 255);
    border-width:5px;
    border-color:grey;
    width:100px;
    height:300px;
    
    /* 
    animation-name:Test;
    animation-duration: 4s;
    animation-delay: 2s;
    animation-iteration-count:3;
    animation-timing-function:ease-in-out;
    animation-direction:alternate;

    animation-fill-mode:forwards;
    extends the animation last key frame-keeps the long yellow 
    */
   

    animation: bottle 6s 2s infinite alternate;
    /* animation shorthand: name, duration, delay */

}

@keyframes bottle{
    0% {
        height:300px;
    }


    100%{
        height:0px;
    }
} 

.meter {
    background-color:rgb(245, 232, 166);
    border-width:5px;
    border-color:grey;
    width:100px;
    height:300px;

    animation: gauge 6s 2s infinite alternate-reverse;

}

@keyframes gauge{
    0% {
        height:300px;
    }


    100%{
        height:0px;
    }
}