body {
     margin: 0;
     overflow: hidden;
     height: 100%;
    touch-action: none;
     overscroll-behavior: none;
     background-color: beige;
     color: #283277;
}
a:focus {
    outline: 0;
    color:white;
}
 canvas[resize] {
     width: 100%;
     height: 100%;
     position:fixed;
    touch-action: none;
          overscroll-behavior: none;

}
 a {
     position: fixed;
     margin: 0;
     left: 33;
     bottom: 10;
     font-family: cursive;
     font-size: 40px;
     animation: color 2s ease infinite;
     letter-spacing: 2px;
     text-decoration: none;
     color: #283277;
}


 #follow{
     animation: color2 2s ease infinite;
}
 #email:hover, #work:hover {
     color: orangered;
     animation: none;
}
 #follow:hover {
     color: orangered;
     animation: none;
     transition: 1s ease;
}
 #save {
     font-size: 25px;
     left: 0%;
     width: 100vw;
     text-align: center;
     pointer-events: none;
     animation: opacityShift 6s ease infinite;
     bottom: 38;
     letter-spacing: 1px 
}
 #email {
     bottom: 85;
}

#work {
    bottom: 50;
}

 h1 {
     line-height: 100vh;
     width: 100vw;
     text-align: center;
     font-size: 12px;
    letter-spacing: .5px;
     font-family: helvetica, sans-serif;
     font-weight: 500;
     text-transform: uppercase;
     pointer-events: none;
     position: absolute;
     padding: 0;
     margin: 0;
     animation: opacityAnim 10s ;
     opacity: 0;
     background-color: beige;
}
 @keyframes color {
     0% {
         color: rgba(0,0,0, .5);
    }
     50% {
         color: #283277;
    }
     100% {
         color: rgba(0,0,0, .5);
    }
}
 @keyframes opacityAnim {
     0% {
         opacity: 1;
    }
     10% {
         opacity: 1;
    }
     20% {
         opacity: 0;
    }
     100% {
         opacity: 0;
    }
}
 @keyframes color2 {
    
     0% {
         color: #283277;
    }
     50% {
         color: rgba(0,0,0, .5);
    }
     100% {
         color: #283277;
    }
}
 @keyframes opacityShift {
    
     0% {
         opacity: 0;
    }
     10% {
         opacity: 1;
    }
     20% {
         opacity: 0;
    }
     100% {
         opacity: 0;
    }
}
 #desktop {
     display: block 
}
 #mobile {
     display: none 
}
 @media only screen and (max-width: 800px) {
      h1 {

     }
     
     #save {
         display: none;
    }
     #desktop {
         display: none 
    }
     #mobile {
         display: block;
         font-size: 14px;
         line-height: 98vh;
         height: 100vh;
         bottom: 0;
         
    }
     a {
         font-size: 29px;
         left: 20;
         bottom: 20;
    }
     #email {
         bottom: 55;
    }

}



#credit {
    font-size: 12px;
    letter-spacing: .5px;
    position: fixed;
    bottom: 28px;
    left: inherit;
    text-transform: uppercase;
    right: 30px;
    display: inline-block;
    z-index: 0;
    font-family: helvetica;
    
}