body {
    background: #fff;
    margin: 0;
    font-family: semplicitapro, sans-serif;
    font-weight: 100;
    color: #000000;
    font-style: normal;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

h1 {
    color: #ffffff;
    font-family: Avenir Next Ultra Light, sans-serif;
    color: #000000;
    text-align: left;
    font-size: 40px;
}

div.fixed {
  position: fixed;
  top: 2px;
  left: 2px;
  width: 200px;
  border: none;
}

div.voop {
  position: fixed;
  left: 40%;
  top: 3%;
  width: 80px;
  border: none;
    color: #ffffff;
}

div.mixed {
    position: fixed;
    bottom: 1%;
    left: 10%;
    border: none;
}

.eat {
    width: 20px;
}

.lock {
    position: fixed;
    text-align: center;
    font-size: larger;
}

div.text {
    top: 28%;
    left: 2%;
}

div.sext {
    top: 28%;
    left: 12%;
}

div.hext {
    top: 28%;
    left: 22%;
}

div.next {
    top: 28%;
    left: 32%;
}

div.bext {
    top: 28%;
    left: 42%;
}

div.shext {
    top: 28%;
    left: 52%;
}

div.dext {
    top: 28%;
    left: 62%;
}

div.mext {
    top: 28%;
    left: 72%;
}

.loop {
    position: fixed;
    top: 53px;
    left: 53px;
    width: 50px;
    height: 42px;
    padding: 4px;
}


div.fixed1 {
  position: fixed;
  bottom: 1%;
  right: 1%;
  width: 200px;
  border: none;
}

div.moop {
  position: absolute;
  left: 18%;
  top: 64%;
  width: 80px;
  border: none;
    color: #ffffff;
}

div.doop {
  position: absolute;
  left: 38%;
  top: 64%;
  width: 80px;
  border: none;
    color: #ffffff;
}

div.goop {
  position: absolute;
  left: 58%;
  top: 64%;
  width: 80px;
  border: none;
    color: #ffffff;
}

div.scoop {
  position: absolute;
  left: 78%;
  top: 64%;
  width: 80px;
  border: none;
    color: #ffffff;
}

.moop {
    width: 60px;
    height: 60px;
    padding: 4px;
    animation-name: spin;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /* transform: rotate(3deg); */
    /* transform: rotate(0.3rad);/ */
    /* transform: rotate(3grad); */
    /* transform: rotate(.03turn);  */
}

.doop {
    width: 60px;
    height: 60px;
    padding: 4px;
    animation-name: spin;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /* transform: rotate(3deg); */
    /* transform: rotate(0.3rad);/ */
    /* transform: rotate(3grad); */
    /* transform: rotate(.03turn);  */
}

.goop {
    width: 60px;
    height: 60px;
    padding: 4px;
    animation-name: spin;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /* transform: rotate(3deg); */
    /* transform: rotate(0.3rad);/ */
    /* transform: rotate(3grad); */
    /* transform: rotate(.03turn);  */
}

.scoop {
    width: 60px;
    height: 60px;
    padding: 4px;
    animation-name: spin;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /* transform: rotate(3deg); */
    /* transform: rotate(0.3rad);/ */
    /* transform: rotate(3grad); */
    /* transform: rotate(.03turn);  */
}







h2 {
    text-align: center
}

canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    height: 100%;
    width: 100%;
}


/*
a {
    font-family: semplicitapro, sans-serif;
    font-weight: 100;
    color: #000000;
    font-style: normal;
    font-size: 40px;
    outline: none;
    transition: all 100ms ease-in-out;
    -webkit-transition: all 100ms ease-in-out;
    -moz-transition: all 100ms ease-in-out;
    -o-transition: all 100ms ease-in-out;
    -ms-transition: all 100ms ease-in-out;
}
*/



#crosshair-h {
    width: 100%;
}

#crosshair-v {
    height: 100%;
}

.hair {
    position: fixed;
    top: 0;
    left: 0;
    margin-top: -3px;
    margin-left: -2px;
    background: transparent;
    border-top: 1px dotted #000;
    border-left: 1px dotted #000;
    pointer-events: none;
    z-index: 2;
}

#mousepos {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    margin: 10px;
    font: 14px arial;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 24px;
    z-index: 1;
}


.poop {
    width: 120px;
    height: 120px;
    padding: 20px;
    text-align: left;
    animation-name: spin;
    animation-duration: 4.8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /* transform: rotate(3deg); */
    /* transform: rotate(0.3rad);/ */
    /* transform: rotate(3grad); */
    /* transform: rotate(.03turn);  */
}




@keyframes spin {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}



.grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    background-color: #ffffff;
    padding: 5px;
}

.grid-item {
    background-color: #ffffff;
    padding: 10px;
    font-size: 15px;
    text-align: center;
}

.eat {
    width: 600px;
}

/* customizable snowflake styling */
/*
.snowflake {
  color: #000000;
  font-size: 0.2em;
  font-family: semplicitapro, sans-serif;
font-weight: 100;
font-style: normal;
  text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(160px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:4s,8s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:4s,8s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(1){left:0%;-webkit-animation-delay:1.6s,2.6s;animation-delay:2.6s,1.6s}.snowflake:nth-of-type(2){left:62%;-webkit-animation-delay:1.2s,2.2s;animation-delay:2.2s,1.2s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:1.9s,2.9s;animation-delay:2.9s,1.9s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:1.4s,2.4s;animation-delay:2.4s,1.4s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:1.25s,2.25s;animation-delay:2.25s,1.25s}.snowflake:nth-of-type(17){left:85%;-webkit-animation-delay:3.4s,1.4s;animation-delay:1.4s,3.4s}.snowflake:nth-of-type(18){left:12%;-webkit-animation-delay:3.6s,1.6s;animation-delay:1.6s,3.6s}.snowflake:nth-of-type(19){left:8%;-webkit-animation-delay:1.7s,3.7s;animation-delay:3.7s,1.7s}.snowflake:nth-of-type(34){left:91%;-webkit-animation-delay:5.2s,1.2s;animation-delay:3.8s,5.2s}.snowflake:nth-of-type(35){left:93%;-webkit-animation-delay:5.3s,2.3s;animation-delay:3.4s,5.4s}.snowflake:nth-of-type(36){left:89%;-webkit-animation-delay:5.5s,4.4s;animation-delay:3.4s,5.6s}.snowflake:nth-of-type(20){left:16%;-webkit-animation-delay:3.8s,1.8s;animation-delay:3.8s,1.8s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:1.1s,2.1s;animation-delay:2.1s,1.1s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:1.65s,2.65s;animation-delay:2.65s,1.65s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1.85s,2.85s;animation-delay:2.85s,1.85s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:1.15s,2.15s;animation-delay:2.15s,1.15s}.snowflake:nth-of-type(10){left:15%;-webkit-animation-delay:2s,1s;animation-delay:1s,2s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:2.2s,1.2s;animation-delay:1.2s,2.2s}.snowflake:nth-of-type(12){left:35%;-webkit-animation-delay:2.4s,1.4s;animation-delay:1.4s,2.4s}.snowflake:nth-of-type(13){left:45%;-webkit-animation-delay:2.6s,1.6s;animation-delay:1.6s,2.6s}.snowflake:nth-of-type(14){left:55%;-webkit-animation-delay:2.8s,1.8s;animation-delay:1.8s,2.8s}.snowflake:nth-of-type(15){left:65%;-webkit-animation-delay:3s,2s;animation-delay:2s,3s}.snowflake:nth-of-type(16){left:75%;-webkit-animation-delay:3.2s,1.2s;animation-delay:1.2s,3.2s}.snowflake:nth-of-type(21){left:24%;-webkit-animation-delay:3.9s,1.9s;animation-delay:1.9s,3.9s}.snowflake:nth-of-type(22){left:32%;-webkit-animation-delay:4s,2s;animation-delay:2s,4s}.snowflake:nth-of-type(23){left:41%;-webkit-animation-delay:2.1s,4.1s;animation-delay:4.1s,2.1s}.snowflake:nth-of-type(24){left:49%;-webkit-animation-delay:4.2s,2.2s;animation-delay:3.1s,4.1s}.snowflake:nth-of-type(25){left:57%;-webkit-animation-delay:4.2s,2.2s;animation-delay:3.2s,4.2s}.snowflake:nth-of-type(26){left:63%;-webkit-animation-delay:2.3s,4.3s;animation-delay:4.3s,3.3s}.snowflake:nth-of-type(27){left:72%;-webkit-animation-delay:4.2s,4.4s;animation-delay:0.3s,0.5s}.snowflake:nth-of-type(28){left:14%;-webkit-animation-delay:0.4s,0.6s;animation-delay:0.28s,0.37s}.snowflake:nth-of-type(29){left:67%;-webkit-animation-delay:0.87s,0.53s;animation-delay:0.7s,1.1s}.snowflake:nth-of-type(30){left:87%;-webkit-animation-delay:0.9s,1.2s;animation-delay:1.6s,1.3s}.snowflake:nth-of-type(31){left:8%;-webkit-animation-delay:4.5s,3.2s;animation-delay:4.6s,1.9s}.snowflake:nth-of-type(32){left:23%;-webkit-animation-delay:4.8s,3.8s;animation-delay:2.2s,4.9s}.snowflake:nth-of-type(37){left:14%;-webkit-animation-delay:5.7s,4.3s;animation-delay:5.8s,4.9s}.snowflake:nth-of-type(38){left:53%;-webkit-animation-delay:1s,0.7s;animation-delay:0.8s,1s}.snowflake:nth-of-type(39){left:46%;-webkit-animation-delay:0.9s,1.5s;animation-delay:0.7s,1.2s}.snowflake:nth-of-type(40){left:42%;-webkit-animation-delay:0.9s,0.5s;animation-delay:0.9s,0.6s}.snowflake:nth-of-type(41){left:37%;-webkit-animation-delay:0.8s,0.7s;animation-delay:1.3s,0.9s}.snowflake:nth-of-type(42){left:28%;-webkit-animation-delay:1s,0.9s;animation-delay:0.9s,1.2s}.snowflake:nth-of-type(43){left:32%;-webkit-animation-delay:2s,1.5s;animation-delay:1.3s,2.9s}.snowflake:nth-of-type(44){left:45%;-webkit-animation-delay:0.1s,0.2s;animation-delay:0.19s,0.3s}.snowflake:nth-of-type(45){left:29%;-webkit-animation-delay:0.19s,0.1s;animation-delay:0.1s,0.33s}.snowflake:nth-of-type(46){left:34%;-webkit-animation-delay:0.09s,0.2s;animation-delay:0.06s,0.2s}.snowflake:nth-of-type(47){left:34%;-webkit-animation-delay:4.4s,4.6s;animation-delay:4.7s, 4.8s}.snowflake:nth-of-type(48){left:19%;-webkit-animation-delay:4.5s,4.2s;animation-delay:4.9s, 4.1s}.snowflake:nth-of-type(49){left:4%;-webkit-animation-delay:2.01s,2.402s;animation-delay:3.02s,2.1s}.snowflake:nth-of-type(50){left:30%;-webkit-animation-delay:3.1s,3.2s;animation-delay:3.6s,3.0s}.snowflake:nth-of-type(51){left:21%;-webkit-animation-delay:3.0s,3.2s;animation-delay:3.1s,3.0s}.snowflake:nth-of-type(52){left:95%;-webkit-animation-delay:2.0s,3.2s;animation-delay:4.1s,3.0s}.snowflake:nth-of-type(53){left:91%;-webkit-animation-delay:2.3s,2.9s;animation-delay:3.3s,3.1s}.snowflake:nth-of-type(54){left:76%;-webkit-animation-delay:1.4s,2.5s;animation-delay:2.1s,4.1s}.snowflake:nth-of-type(55){left:86%;-webkit-animation-delay:2.5s,2.6s;animation-delay:1.1s,1.2s}.snowflake:nth-of-type(56){left:73%;-webkit-animation-delay:1.4s,1.3s;animation-delay:1.6s,1.5s}.snowflake:nth-of-type(57){left:82%;-webkit-animation-delay:1.8s,2.1s;animation-delay:1.4s,1.8s}.snowflake:nth-of-type(59){left:16%;-webkit-animation-delay:1.8s,0.7s;animation-delay:1.6s,1.9s}
*/

/*
.snowflake {
  color: #000000;
  font-size: 0.8em;
  font-family: semplicitapro, sans-serif;
font-weight: 100;
font-style: normal;
  text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(0px);transform:translateX(0px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(0px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:3s,20s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:3s,20s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(1){left:20%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(2){left:30%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(3){left:40%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(4){left:50%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(5){left:60%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(6){left:70%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(7){left:80%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(8){left:90%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(9){left:20%;-webkit-animation-delay:0.5s,0.5s;animation-delay:0.5s,0.5s}.snowflake:nth-of-type(10){left:30%;-webkit-animation-delay:0.5s,0.5s;animation-delay:0.5s,0.5s}.snowflake:nth-of-type(11){left:40%;-webkit-animation-delay:0.5s,0.5s;animation-delay:0.5s,0.5s}.snowflake:nth-of-type(12){left:50%;-webkit-animation-delay:0.5s,0.5s;animation-delay:0.5s,0.5s}.snowflake:nth-of-type(13){left:60%;-webkit-animation-delay:0.5s,0.5s;animation-delay:0.5s,0.5s}.snowflake:nth-of-type(14){left:70%;-webkit-animation-delay:0.5s,0.5s;animation-delay:0.5s,0.5s}.snowflake:nth-of-type(15){left:80%;-webkit-animation-delay:0.5s,0.5s;animation-delay:0.5s,0.5s}.snowflake:nth-of-type(16){left:90%;-webkit-animation-delay:0.5s,0.5s;animation-delay:0.5s,0.5s}.snowflake:nth-of-type(17){left:20%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(18){left:30%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(19){left:40%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(20){left:50%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(21){left:60%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(22){left:70%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(23){left:80%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(24){left:90%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(25){left:20%;-webkit-animation-delay:1.5s,1.5s;animation-delay:1.5s,1.5s}.snowflake:nth-of-type(26){left:30%;-webkit-animation-delay:1.5s,1.5s;animation-delay:1.5s,1.5s}.snowflake:nth-of-type(27){left:40%;-webkit-animation-delay:1.5s,1.5s;animation-delay:1.5s,1.5s}.snowflake:nth-of-type(28){left:50%;-webkit-animation-delay:1.5s,1.5s;animation-delay:1.5s,1.5s}.snowflake:nth-of-type(29){left:60%;-webkit-animation-delay:1.5s,1.5s;animation-delay:1.5s,1.5s}.snowflake:nth-of-type(30){left:70%;-webkit-animation-delay:1.5s,1.5s;animation-delay:1.5s,1.5s}.snowflake:nth-of-type(31){left:80%;-webkit-animation-delay:1.5s,1.5s;animation-delay:1.5s,1.5s}.snowflake:nth-of-type(32){left:90%;-webkit-animation-delay:1.5s,1.5s;animation-delay:1.5s,1.5s}.snowflake:nth-of-type(33){left:20%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(34){left:30%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(35){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(36){left:50%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(37){left:60%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(38){left:70%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(39){left:80%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(40){left:90%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(41){left:20%;-webkit-animation-delay:2.5s,2.5s;animation-delay:2.5s,2.5s}.snowflake:nth-of-type(42){left:30%;-webkit-animation-delay:2.5s,2.5s;animation-delay:2.5s,2.5s}.snowflake:nth-of-type(43){left:40%;-webkit-animation-delay:2.5s,2.5s;animation-delay:2.5s,2.5s}.snowflake:nth-of-type(44){left:50%;-webkit-animation-delay:2.5s,2.5s;animation-delay:2.5s,2.5s}.snowflake:nth-of-type(45){left:60%;-webkit-animation-delay:2.5s,2.5s;animation-delay:2.5s,2.5s}.snowflake:nth-of-type(46){left:70%;-webkit-animation-delay:2.5s,2.5s;animation-delay:2.5s,2.5s}.snowflake:nth-of-type(47){left:80%;-webkit-animation-delay:2.5s,2.5s;animation-delay:2.5s, 2.5s}.snowflake:nth-of-type(48){left:90%;-webkit-animation-delay:2.5s,2.5s;animation-delay:2.5s,2.5s}.snowflake:nth-of-type(49){left:20%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(50){left:30%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}
*/

@media screen and (max-width: 480px) {
    
    h1 {
        font-size: 20px;
    }
    
    div.fixed {
  position: fixed;
  top: 8px;
  left: 8px;
  width: 160px;
  border: none;
}
    
    div.voop {
  position: fixed;
  left: 40%;
  top: 3%;
  width: 160px;
  border: none;
    color: #ffffff;
}
    
    .poop {
    width: 80px;
    height: 80px;
    padding: 10px;
    text-align: left;
    animation-name: spin;
    animation-duration: 4.8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /* transform: rotate(3deg); */
    /* transform: rotate(0.3rad);/ */
    /* transform: rotate(3grad); */
    /* transform: rotate(.03turn);  */
}

    .loop {
    position: fixed;
    top: 38px;
    left: 39px;
    width: 29px;
    height: 27px;
    padding: 4px;
}

    div.proj {
         position: absolute;
  left: 10%;
  top: 20%;
  width: 40px;
  border: none;
    color: #000000;
        
    }
    
    div.stor {
         position: absolute;
  left: 10%;
  top: 40%;
  width: 40px;
  border: none;
    color: #000000;
        
    }
    
    div.cont {
         position: absolute;
  left: 10%;
  top: 60%;
  width: 40px;
  border: none;
    color: #000000;
        
    }
    
    div.abou {
         position: absolute;
  left: 10%;
  top: 80%;
  width: 40px;
  border: none;
    color: #000000;
        
    }
    
    div.moop {
  position: absolute;
  right: 18%;
        left: auto;
  top: 20%;
  width: 50px;
  border: none;
    color: #ffffff;
}

div.doop {
  position: absolute;
  right: 18%;
    left: auto;
  top: 40%;
  width: 50px;
  border: none;
    color: #ffffff;
}

div.goop {
  position: absolute;
  right: 18%;
    left: auto;
  top: 60%;
  width: 50px;
  border: none;
    color: #ffffff;
}

div.scoop {
  position: absolute;
  right: 18%;
    left: auto;
  top: 80%;
  width: 50px;
  border: none;
    color: #ffffff;
}

.moop {
    width: 50px;
    height: 50px;
    padding: 5px;
    animation-name: spin;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /* transform: rotate(3deg); */
    /* transform: rotate(0.3rad);/ */
    /* transform: rotate(3grad); */
    /* transform: rotate(.03turn);  */
}

.doop {
    width: 50px;
    height: 50px;
    padding: 5px;
    animation-name: spin;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /* transform: rotate(3deg); */
    /* transform: rotate(0.3rad);/ */
    /* transform: rotate(3grad); */
    /* transform: rotate(.03turn);  */
}

.goop {
    width: 50px;
    height: 50px;
    padding: 5px;
    animation-name: spin;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /* transform: rotate(3deg); */
    /* transform: rotate(0.3rad);/ */
    /* transform: rotate(3grad); */
    /* transform: rotate(.03turn);  */
}

.scoop {
    width: 50px;
    height: 50px;
    padding: 5px;
    animation-name: spin;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /* transform: rotate(3deg); */
    /* transform: rotate(0.3rad);/ */
    /* transform: rotate(3grad); */
    /* transform: rotate(.03turn);  */
}
    
    div.mixed {
    position: fixed;
    bottom: 4%;
    left: 40%;
    border: none;
}
    
    div.fixed1 {
  position: fixed;
  bottom: 4%;
  right: 4%;
  border: none;
}
    
.eat {
    width: 240px;
}  
    
    .mobile-check { display: none; }

}/*end media query*/