@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";*{font-family:"Press Start 2P",cursive}body{margin:0;padding:0}.logo-container{position:absolute;color:#fff;top:0;left:0;z-index:5;background:#1589ff}.logo-image{width:100px;height:100px}.canvascontainer{z-index:-1}.Home{display:flex;align-items:center;justify-content:center;overflow:clip}.main-info{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#1589ff;text-align:center;z-index:3}.main-text{border-bottom:5px solid #1589ff;margin-bottom:20px;width:100%}.main-text span{font-size:3vw;max-width:100%}h1{font-size:6vh;letter-spacing:3px;padding:0 10px}h1,h2,h3,span,#nav-button{color:#1589ff}.buttons{font-size:1.8vh;display:flex;justify-content:space-between;margin-top:20px}.buttons #nav-button{z-index:3;margin:0 25px;padding:8px 16px;text-decoration:none}canvas{background-color:#000;z-index:-1}.lvl1{box-shadow:16px 0 #000,-16px 0 #000,0 -16px #000,0 16px #000,4px 0 0 8px #000,-4px 0 0 8px #000,0 -4px 0 8px #000,0 4px 0 8px #000,20px 0 #1589ff,-20px 0 #1589ff,0 -20px #1589ff,0 20px #1589ff,0 0 0 12px #1589ff,0 8px 0 8px #1589ff,0 -8px 0 8px #1589ff,8px 0 0 8px #1589ff,-8px 0 0 8px #1589ff;margin:20px auto}.lvl2{box-shadow:4px 0 #000,-4px 0 #000,0 -4px #000,0 4px #000,8px 0 #1589ff,-8px 0 #1589ff,0 -8px #1589ff,0 8px #1589ff,0 0 0 4px #1589ff;margin:8px auto}.lvl3{box-shadow:4px 0 #000,-4px 0 #000,0 -4px #000,0 4px #000,8px 0 #000,-8px 0 #000,0 -8px #000,0 8px #000,0 0 0 4px #000,12px 0 #1589ff,-12px 0 #1589ff,0 12px #1589ff,0 -12px #1589ff,0 -4px 0 4px #1589ff,0 4px 0 4px #1589ff,4px 0 0 4px #1589ff,-4px 0 0 4px #1589ff;margin:12px auto}.lvl4{box-shadow:4px 0 #000,-4px 0 #000,0 -4px #000,0 4px #000,8px 0 #000,-8px 0 #000,0 -8px #000,0 8px #000,0 0 0 4px #000,12px 0 #000,-12px 0 #000,0 12px #000,0 -12px #000,0 -4px 0 4px #000,0 4px 0 4px #000,4px 0 0 4px #000,-4px 0 0 4px #000,16px 0 #1589ff,-16px 0 #1589ff,0 -16px #1589ff,0 16px #1589ff,8px 0 0 4px #1589ff,-8px 0 0 4px #1589ff,0 8px 0 4px #1589ff,0 -8px 0 4px #1589ff,0 0 0 8px #1589ff;margin:16px auto}.other{box-shadow:4px 0 #1589ff,-4px 0 #1589ff,0 -4px #1589ff,0 4px #1589ff;margin:4px auto}.contact-page{background-color:#000;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100vh;width:100vw;color:#fff;overflow:hidden}.contact-container{max-width:80%}.contact-container h1{align-items:center;margin-bottom:1rem;margin-top:10%}.contact-form{display:flex;flex-direction:column;align-items:center;background-color:#000;width:100%}.contact-submit{width:100%;padding:10px 0;font-size:25px}.contact-form input[type=text],.contact-form input[type=email],.contact-form textarea{width:100%;padding:10px;font-size:16px;border:1px solid lightgray;background-color:#000;color:#fff;margin-bottom:10px}.contact-form textarea{height:150px}.contact-input-name::placeholder{color:#fa602f}.contact-input-email::placeholder{color:#1589ff}.contact-input-message::placeholder{color:#677a54}.main-resume{background-color:#000;width:100%;height:100vh;overflow:hidden}.resume{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#000;z-index:1;text-align:center;overflow:hidden;max-width:99%}.resume a{font-size:30vh;z-index:3;padding:2px;color:#ff1615;border:5px solid #ff1615}.resume h1{color:#1589ff;position:relative;padding:2px;z-index:5}.container{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;background-color:#000;z-index:1}.container>div{flex-basis:2vw;height:2vw;background-color:#000;transition:background-color .3s;margin:.2vw}.container>div:hover{background-color:#222}#clickMe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:60%;cursor:pointer;animation:clickMeAnimation 5s infinite;transition:opacity 1s ease-in-out;z-index:99999999;background:#1589ff;padding:5px;border-radius:5px}#clickMe:hover{top:70%;left:30%}@keyframes clickMeAnimation{0%{top:50%;left:50%}25%{top:20%;left:80%}50%{top:80%;left:80%}75%{top:80%;left:20%}to{top:20%;left:20%}}.fadeOut{opacity:0}.portfolioCardContent .cardName{color:#1589ff;margin-top:-8px}.GithubIconContainer{display:flex;-webkit-box-align:end;justify-content:flex-end;align-items:center;padding:20px}.GithubIcon{color:#1589ff;font-size:35px}.portfolioCardImage{opacity:1;transition:opacity .5s ease;backface-visibility:hidden}.externalLinkContainer{transition:opacity .5s ease;opacity:0;display:flex;align-items:center;justify-content:center;text-align:center}.portfolioCard:hover .portfolioCardImage{opacity:.3}.portfolioCard:hover .externalLinkContainer{opacity:1}.portfolioCardHoverText{background-color:#677a54;color:#fff;font-size:10px;width:100%}.NotFound{display:flex;align-items:center;background:black;justify-content:center}.notFound-text{width:100vh;height:100vh;color:gray;background:url(https://media0.giphy.com/media/oW7cXqaVmt5EKQ48FQ/giphy.gif?cid=ecf05e47lfblkwsvlvpqycsafmgti9fy7td2hfqqhgutb24n&ep=v1_gifs_search&rid=giphy.gif&ct=g);margin-top:0%}.directions{padding:10px;color:#f0f8ff;display:flex;align-items:center;font-size:3vh;justify-content:center}.linkContainer{flex-direction:row}@media screen and (max-width: 768px){.main{padding-top:20%}.buttons{width:100%;flex-direction:column;align-items:center}.buttons #nav-button{width:150px;margin:20px}}@media screen and (max-width: 426px){.main-text{font-size:smaller;padding-top:200px;text-align:center}.main-text span{font-size:4vw}.buttons #nav-button{width:150px;margin:20px}.logo-container{margin-top:5px;left:50%;transform:translate(-50%)}.belowLogo{display:flex;justify-content:center;margin-top:100px}.notFound-text{line-height:13px;margin-top:-10px}.clickme{display:none}}