canvas{position:fixed;top:0;left:0}body{width:95%;font-family:Arial,Helvetica,sans-serif;height:3500px}main{position:absolute;width:100%}.intro{padding-top:10%;color:#f0f8ff;margin-left:25%;padding-bottom:30%}.intro h1{font-size:7vw}.nav{display:flex;flex-direction:row-reverse;position:fixed;width:130%;right:6.5vw;top:4vh;padding-bottom:1vw;padding-top:1vw;padding-right:20px;text-align:left;transform-origin:top right;color:#faebd7;transform:rotate(-90deg) translate(30px);font-size:1vw;background:linear-gradient(to bottom,rgba(250,250,250,.05),rgb(160,160,175))}.nav h2,a{padding-top:.3vw;padding-left:2vh;padding-right:3vh;text-decoration:none;-webkit-transition:color 1s;transition:color 1s}.nav a:hover{color:#0051ff}a{color:#ccc}.tinyNav{display:flex;position:fixed;width:100%;padding-left:20px;margin:auto;left:0px;top:0px;color:#f0f8ff;font-size:2vw;background:linear-gradient(to top,rgba(250,250,250,.05),rgb(160,160,175))}.desc{color:#fff;text-align:center;margin-bottom:120px;font-family:Lucida Sans,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif;font-size:5vw}@media (max-width: 500px){.nav{display:none}}@media (min-width: 501px){.tinyNav{display:none}}.card{color:#fff;width:75%;margin:200px auto auto;padding:30px;text-align:center;background-color:#ffffff4d;border-radius:30px}main .card{transition:background-color 3s,color 1s}main #card1:hover{background:rgba(255,205,0,.7);color:#000}main #card2:hover{background:rgba(255,5,0,.6);color:#000}main #card3:hover{background:rgba(155,255,60,.6);color:#000}.card a{color:#2727c8;font-size:larger}.card h2,p{margin:50px}