body{margin:0;padding:0;text-align:left;height:100vh;font-family:'Raleway', sans-serif}section{padding:calc(1rem + 10vw);height:auto}@media (min-width: 320px) and (max-width: 480px){section{padding:calc(1rem + 5vw)}}section:first-of-type{padding:0}section:nth-child(even){background:#f9f9f9}a{cursor:pointer;color:black;text-decoration:underline}a:hover{background:lightgray}h1{font-size:calc(1em + 10vw);font-weight:500;font-family:'Cabin Sketch', cursive}h3{font-size:calc(1em + 5vw);font-weight:300;text-transform:uppercase;font-family:'Cabin Sketch', cursive}h5{font-size:calc(1em + 1vw);text-transform:uppercase;font-family:'Cabin Sketch', cursive}p{font-size:1rem;line-height:2em}p span{font-weight:700;background-color:lightgray;color:black;padding:4px}li{line-height:2em}.button{flex:1 1 auto;padding:10px 40px;border:1px solid black;text-align:center;background:white;position:relative;overflow:hidden;transition:.3s;font-size:1em;font-family:'Cabin Sketch', cursive;box-shadow:1px 2px #e8e8e8}.button:after{position:absolute;transition:.3s;content:'';width:0;left:50%;bottom:0;height:3px;background:black}.button:nth-of-type(5):after{height:120%;left:-10%;transform:skewX(15deg);z-index:-1}.button:hover{cursor:pointer;box-shadow:1px 1px black}.button:hover:after{width:100%;left:0}.button:hover:nth-of-type(5):after{left:-10%;width:120%}#header{background:url(img/bg.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}@media (max-width: 767px){#header{background:url(img/bg-resp.jpg) no-repeat center center}}#header .inner{padding:0;margin:0;display:flex;grid-template-columns:repeat(3, auto);justify-content:center;align-items:middle;place-items:center;height:100vh;overflow:hidden}#header .inner h1{padding:10px}#header .inner h1:nth-child(1){color:#000}#header .inner h1:nth-child(2){color:#000}#header .inner h1:nth-child(3){color:#000}#header .inner h3{grid-row:1/2}#header span{width:50px;height:50px;position:absolute;bottom:1%;left:1%;border-radius:50%;color:#d3d3d3;border:2px solid #d3d3d3}#header span svg{position:absolute;top:50%;left:50%;font-size:2em;transform:translate(-50%, -50%)}#header .arrow svg{position:absolute;border-radius:100%;border:3px solid #fff;font-size:calc(0.1em + 1vw);padding:20px;font-family:'Cabin Sketch', cursive;color:#fff;background:rgba(0,0,0,0.5);bottom:20px;left:50%;transform:translateX(-50%)}@media (max-width: 768px){#header .arrow svg{font-size:calc(0.1em + 3vw)}}#about{position:relative}#about .id-pic{width:200px;box-shadow:2px 2px rgba(232,232,232,0.2);position:relative;margin-bottom:calc(1em + 5vw)}#about .id-pic h3{position:absolute;top:10%;left:75%;color:#000;padding:10px}#about .id-pic img{width:100%;height:auto}#skills{display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:200px 1fr;grid-gap:15px}@media (min-width: 1422px){#skills{grid-template-rows:300px 1fr}}@media (min-width: 320px) and (max-width: 480px){#skills{grid-template-rows:100px 1fr}}#skills h3{grid-column:1/4;grid-row:1/2}#skills .box:nth-child(2){grid-column:1/1;grid-row:2/3}@media (min-width: 320px) and (max-width: 480px){#skills .box:nth-child(2){grid-column:1/4;grid-row:2/3}}#skills .box:nth-child(3){grid-column:2/3;grid-row:2/3}@media (min-width: 320px) and (max-width: 480px){#skills .box:nth-child(3){grid-column:1/4;grid-row:3/4}}#skills .box:nth-child(4){grid-column:3/4;grid-row:2/3}@media (min-width: 320px) and (max-width: 480px){#skills .box:nth-child(4){grid-column:1/4;grid-row:4/5}}#skills .box ul{padding-left:0}#skills .box ul li{list-style-type:none}#education h5{margin-top:0px}#portfolio{display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:200px 1fr 1fr;grid-gap:15px}@media (min-width: 1422px){#portfolio{grid-template-rows:300px 1fr}}@media (min-width: 320px) and (max-width: 480px){#portfolio{grid-template-rows:100px 1fr}}#portfolio h3{grid-column:1/4}#portfolio .box{width:100%;height:25em;background-color:#000;cursor:pointer;grid-column:1fr;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}#portfolio .box:nth-child(2){grid-column:1/2;grid-row:2;background:url(img/card/card-1.jpg) center center;background-size:cover}@media (max-width: 1280px){#portfolio .box:nth-child(2){grid-column:1/3;grid-row:2}}@media (min-width: 320px) and (max-width: 480px){#portfolio .box:nth-child(2){grid-column:1/4;grid-row:2}}#portfolio .box:nth-child(3){grid-column:2/3;grid-row:2/3;background:url(img/card/card-2.jpg) center center}@media (max-width: 1280px){#portfolio .box:nth-child(3){grid-column:1/3;grid-row:5}}@media (min-width: 320px) and (max-width: 480px){#portfolio .box:nth-child(3){grid-column:1/4;grid-row:3}}#portfolio .box:nth-child(4){grid-column:3/4;grid-row:2/3;background:url(img/card/card-3.jpg) center center}@media (max-width: 1280px){#portfolio .box:nth-child(4){grid-column:3/4;grid-row:2}}@media (min-width: 320px) and (max-width: 480px){#portfolio .box:nth-child(4){grid-column:1/4;grid-row:4}}#portfolio .box:nth-child(5){grid-column:1/2;grid-row:3/3;background:url(img/card/card-4.jpg) center center}@media (max-width: 1280px){#portfolio .box:nth-child(5){grid-column:1/2;grid-row:3/3}}@media (min-width: 320px) and (max-width: 480px){#portfolio .box:nth-child(5){grid-column:1/4;grid-row:5}}#portfolio .box:nth-child(6){grid-column:2/3;grid-row:3/3;background:url(img/card/card-5.jpg) center center}@media (max-width: 1280px){#portfolio .box:nth-child(6){grid-column:2/4;grid-row:3/3}}@media (min-width: 320px) and (max-width: 480px){#portfolio .box:nth-child(6){grid-column:1/4;grid-row:6}}#portfolio .box:nth-child(7){grid-column:3/4;grid-row:3/3;background:url(img/card/card-6.jpg) center center}@media (min-width: 320px) and (max-width: 480px){#portfolio .box:nth-child(7){grid-column:1/4;grid-row:7}}#portfolio .overlay{width:100%;height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3, 1fr);background:rgba(255,255,255,0.9);opacity:0;transition:all 0.5s}#portfolio .items{padding:20px}#portfolio h5{font-size:calc(0.5em + 1vw)}#portfolio .head{font-size:30px;line-height:40px;transform:translateY(40px);transition:all 0.7s}#portfolio .head hr{display:block;width:0;border:none;border-bottom:solid 2px #000;position:absolute;bottom:0;left:20px;transition:all .5s}#portfolio .text{font-weight:bold;opacity:0;transform:translateY(40px);transition:all 0.7s}#portfolio .text .old{color:#000}#portfolio .box:hover .overlay{opacity:1}#portfolio .box:hover .overlay .head{transform:translateY(0px)}#portfolio .box:hover .overlay hr{width:75px;transition-delay:0.4s}#portfolio .box:hover .overlay .text{transform:translateY(0px);transition-delay:0.3s;opacity:1}#banner{background:url(img/banner.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;height:10vh}footer{padding:calc(1rem + 10vw);height:auto;background:#f9f9f9}@media (min-width: 320px) and (max-width: 480px){footer{padding:calc(1rem + 5vw)}}footer ul{padding:20px 0px}footer ul li{list-style-type:none;display:inline-block;margin-right:50px;font-size:calc(1em + 1vw);font-family:'Cabin Sketch', cursive}footer ul li a{animation-delay:1s}footer ul li a:hover{background-color:transparent}footer ul li a svg{transition:ease 0.5s}footer ul li a svg:hover{-webkit-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3)}