html,body,h1,h2,p,blockquote,a,img,ol,ul,header,footer,nav{margin:0;padding:0;border:0;font-size:100%;font-family:monospace;box-sizing:border-box}ul{list-style:none}:root{--green: #afbd64;--light: #f7f6e0;--dark: #4c6333;--shadow: #c7b888;width:100%}@keyframes fadein{0%{opacity:0}to{opacity:1}}@keyframes picslide{0%{margin-left:800px;opacity:0}to{margin-left:40px;opacity:1}}body{background-color:var(--light);display:flex;flex-direction:column}h1{font-size:40px;font-weight:bolder}h2{font-size:30px;color:var(--green);margin:60px}h3{color:var(--dark)}p{font-size:16px;margin:20px}header{display:flex;flex-wrap:wrap;text-decoration:underline;justify-content:space-between;background-color:var(--green);color:var(--light);padding:50px;align-items:baseline;border-color:var(--dark);box-sizing:border-box;width:100%;animation-name:fadein;animation-duration:3s}nav{display:flex;color:var(--light)}nav a{padding:40px;text-decoration:underline;color:var(--light);font-size:30px}nav a:hover{color:var(--dark)}div{position:relative}#header-img{animation-name:picslide;animation-duration:2s}div img{position:absolute;width:25%;max-width:350px;margin-left:40px;border:5px solid var(--light);top:-40px}Footer{width:100%;bottom:0;background-color:var(--green);color:var(--light);padding:10px;animation-name:fadein;animation-duration:3s}.links{margin:5vw;display:flex;justify-content:center}.links a{text-decoration:underline;color:var(--green);margin:5vw;font-size:30px}.links a:hover{color:var(--dark)}#hello{display:flex;flex-direction:column;align-items:flex-end;padding:40px;text-decoration:underline var(--green);flex-wrap:wrap}.small{font-size:20px;margin-top:100px;color:var(--dark)}#About aside{display:flex;flex-direction:column;align-items:flex-end}#About aside p{margin-right:5vw;color:var(--dark);width:70%;padding:20px;border:solid 5px var(--green);box-shadow:10px 5px 5px var(--shadow)}#Works aside{width:100%;padding:5vw 0vw;margin-bottom:5vw;background-color:var(--green);justify-content:space-evenly;display:flex;flex-direction:column;animation-name:fadein;animation-duration:3s}.works-label{color:var(--dark);font-size:23px}#Works aside div{display:flex;justify-content:space-evenly;flex-wrap:wrap}.card{display:flex;width:auto;height:auto;border-style:solid var(--dark);border-width:1px;padding:10px;margin:20px 40px;flex:0 0 300px;border-radius:5px;box-shadow:10px 5px 5px var(--dark);background-color:var(--light)}.card div{display:flex;flex-direction:column;align-items:center}.title{width:20;text-align:center}.card p{margin:20px;color:var(--dark);justify-content:center}.card img{position:relative;background-color:var(--light);width:140px;height:140px;margin:0;top:auto;border:5px solid var(--light)}.card button{color:var(--dark);background-color:var(--green);border:none;border-radius:10px;padding:10px;height:auto}#contact-div{margin:20px}#contactme{width:100%;padding:5vw 0vw;margin-bottom:5vw;background-color:var(--green);display:flex;flex-direction:column;align-items:center;animation-name:fadein;animation-duration:3s}#contactme input,#contactme textarea{background-color:var(--light);border:none;padding:10px;color:var(--dark);text-align:center;width:80vw;margin:10px}#contactme button{background-color:var(--dark);color:var(--light)}#contactme button:hover{color:var(--shadow);border-color:none}#Contact ul{display:flex;justify-content:space-evenly;margin-bottom:60px;flex-wrap:wrap}#Contact ul li{margin:30px}#Contact a{text-decoration:none;color:var(--light);font-size:20px;background-color:var(--dark);padding:10px;border-radius:5px}#resume{width:100%;height:auto;padding:5vw 0vw;margin-bottom:5vw;background-color:var(--green);display:flex;flex-direction:column;align-items:center;animation-name:fadein;animation-duration:3s}.download{background-color:var(--dark);color:var(--light);padding:15px;margin:10px;border-radius:10px}.download:hover{color:var(--shadow)}.download:active{color:var(--green)}.resumep{width:80vw;text-align:center}::-webkit-scrollbar{width:20px;height:20px}::-webkit-scrollbar-track{background:var(--light)}::-webkit-scrollbar-thumb{background:var(--green);border:solid var(--light) 5px;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--dark)}@media screen and (max-width: 800px){.card,#About{width:100%}header nav{flex-direction:column}}@media screen and (max-width: 300px){header{width:100vw}div img{width:60vw}#hello{padding-left:0;margin-left:0;margin-top:30px;justify-content:flex-start;font-size:18px}h2{font-size:25px;color:var(--green);margin:60px}.card{flex-shrink:2;width:100%;display:flex;flex-flow:column;align-items:flex-start}.card h3,.card p{margin:10px}.card img{width:60vw;height:25vh;left:35px}}