#landing{height:110vh;max-height:700px}body{background-color:#cbcbcb;margin:auto;width:100%;font-family:'Roboto', sans-serif}a{color:black;text-decoration:none}a:hover{color:#cbcbcb}h1{margin:0}h2{font-size:1rem}.section{margin:0 auto;width:100%;padding:5px}#main-header{z-index:3;height:8%;max-height:102px;min-height:60px;background-color:#333;padding:0 10px;display:flex;justify-content:space-between}#nameTitle{margin:auto 0;max-height:60px;min-height:20px}#nameTitle h1{font-size:1rem;color:white;margin:0}#nameTitle span{font-size:0.75rem;color:#cbcbcb}#menu{margin:auto 0}#main-nav{display:none;margin:auto 0}#main-nav ul{list-style:none}#main-nav ul li{margin:auto 2px}#main-nav ul li a{color:white;transition:0.5s ease}#main-nav ul li a:hover{color:#cbcbcb}#hero{margin:0;height:100%;background-image:url("../img/pittsburgh.jpg");background-repeat:no-repeat;background-size:cover;background-position:center;background-attachment:fixed;transition:0.5s ease;position:relative}#heroDiv{width:80%;position:absolute;top:45%;left:50%;transform:translate(-50%, -50%)}#primary,#secondary,#tertiary{text-align:center;opacity:0;font-weight:900;color:white;transition:2s}#primary{width:90%;font-size:1.25rem;margin:0 auto}#secondary{font-size:1rem}#tertiary{font-size:0.75rem}#arrow{display:block;opacity:0;margin:0 auto;height:20px;transition:2s}#about{width:100%;position:relative;color:#cbcbcb;background-color:#333333;transition:0.5s ease}#about h1{color:#f4f4f4;font-size:1.75rem;padding:10px 0 30px 16px}#about p{width:90%;margin:0 auto;padding:30px 0 10px 0}#about #picOfMe{display:block;margin:0 auto;width:80%;max-width:180px;height:auto;border-radius:5px}#projects{background:#9b9b9b;padding:0 0 10px 0;transition:0.5s ease}#projects .container{margin:5px 15px}#projects h1{color:#f4f4f4;font-size:1.75rem;padding:10px 0 0 16px}#image-gallery{display:flex;flex-direction:row;justify-content:space-around;flex-wrap:wrap}#galleryProj,#formProj,#nlProj,#trivProj,#sbProj,#tdProj{border-radius:3px;display:block;width:200px;height:120px;border:solid #cbcbcb 1px}.container{position:relative;margin:5px 0}.overlay{border-radius:5px;position:absolute;width:100%;height:100%;top:0;left:0;right:0;bottom:100;opacity:0;background-color:#333;transition:0.5s ease}.overlay p{position:absolute;transform:translate(-50%, -50%);top:50%;left:50%;text-align:center;margin:0 0;display:block;width:100%;color:white}.container:hover .overlay{opacity:1}#contact{color:#333333;background-color:white;width:95%;-webkit-clip-path:polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);clip-path:polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 90%, 60% 75%, 0% 75%);margin-top:10px;transition:0.5s ease}#contact h1{font-size:1.75rem;padding-left:30px}#contact ul,#contact p{margin:0 auto;padding-left:0;width:80%}#contact p{padding-bottom:10px}#contact ul{padding-bottom:120px}#contact li{list-style:none;background-repeat:no-repeat;background-size:20px 20px;padding:0 0 0 30px;margin:0 0 10px;transition:0.5s ease}#contact li:hover{color:#a0a0a0}#phone{background-image:url("../img/phone.png")}#email{background-image:url("../img/mail.png")}#twitter{background-image:url("../img/twitter.png")}footer{background-color:#333;color:#cbcbcb;text-align:center;display:flex;flex-direction:column}footer ul{padding:0;margin:0 auto;display:flex;flex-direction:row;list-style:none}.social{display:inline-block;text-indent:-9999px;margin:1rem 5px;width:30px;height:30px;background-size:30px 30px;opacity:.4;transition:all .5s}.social:hover{opacity:1}.twitter{background-image:url("../img/twitter.svg")}.github{background-image:url("../img/github.svg")}.copyright{margin:0 0 1rem 0}.accordion{font-size:1rem;margin:1% auto;border-radius:5px;background-color:#333;color:#fff;cursor:pointer;padding:10px;width:100%;height:99%;max-height:80%;text-align:center;border:none;outline:none;transition:0.4s}.active,.accordion:hover{color:black;background-color:#cbcbcb}.panel{position:relative;z-index:2;border-radius:5px;padding:0 18px;background-color:#333;max-height:0;overflow:hidden;transition:max-height 0.2s ease-out}.panel a{color:white;transition:0.5s ease}.panel a:hover{color:#cbcbcb}@media screen and (min-width: 350px){#contact{margin-top:30px}}@media screen and (min-width: 580px){#main-header{padding:0 20px 0 30px}#main-nav{display:block}#main-nav ul{display:flex;flex-direction:row}#main-nav ul li{font-size:1rem;padding:0 10px}#menu{display:none}#primary{font-size:2rem}#secondary{font-size:1.5rem}#tertiary{font-size:1rem}#about h1,#projects h1,#contact h1{text-align:center;padding:10px 0}#about{display:grid;grid-template-columns:20% 80%;grid-template-rows:25% 75%}#about h1{grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:2}#about #picOfMe{grid-column-start:1;grid-column-end:2;grid-row-start:2;grid-row-end:3;margin:0 0 0 auto;min-width:110px;max-width:142px;padding:0}#about p{grid-column-start:2;grid-column-end:3;grid-row-start:2;grid-row-end:3;font-size:1.1rem;padding:0 0 10px 0}#contact{-webkit-clip-path:polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);clip-path:polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 90%, 70% 75%, 0% 75%)}#contact ul{padding-top:10px}}@media screen and (min-width: 1020px){#wrapper{display:grid;grid-template-columns:50% 50%;grid-template-rows:550px 250px;grid-column-gap:5px;grid-row-gap:5px}#about,#projects,#contact{-webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%)}#about{grid-column-start:1;grid-column-end:2;grid-row-start:2;grid-row-end:3;border-radius:5px 0 0 5px;transform:translateX(40px);padding-top:5px;padding-bottom:5px;background-color:#9b9b9b;color:#f4f4f4}#about #picOfMe{margin:0 0 0 auto}#about p{padding-right:50px;padding-bottom:0;width:80%;display:block;margin:0 auto;font-size:0.9rem}#about h1{color:#f4f4f4;padding-top:0;padding-right:50px;margin-top:10px}#projects{grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:2;background-color:#333;color:#cbcbcb}#projects #image-gallery{display:grid;grid-template-columns:33.33% 33.33% 33.33%;grid-template-rows:50% 50%}#projects #image-gallery #nlProj{grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:2}#projects #image-gallery #formProj{grid-column-start:2;grid-column-end:3;grid-row-start:1;grid-row-end:2}#projects #image-gallery #trivProj{grid-column-start:3;grid-column-end:4;grid-row-start:1;grid-row-end:2}#projects #image-gallery #sbProj{grid-column-start:1;grid-column-end:2;grid-row-start:2;grid-row-end:3}#projects #image-gallery #galleryProj{grid-column-start:2;grid-column-end:3;grid-row-start:2;grid-row-end:3}#projects #image-gallery #tdProj{grid-column-start:3;grid-column-end:4;grid-row-start:2;grid-row-end:3}#projects .container h2{display:block;width:65%;margin:0 auto 10px auto}#projects #galleryProj,#projects #formProj,#projects #nlProj,#projects #trivProj,#projects #sbProj,#projects #tdProj{margin:0 auto;width:300px;height:180px}#contact{grid-column-start:2;grid-column-end:3;grid-row-start:2;grid-row-end:3;transform:translateX(-40px);display:grid;grid-template-columns:60% 40%;grid-template-rows:25% 75%;border-radius:0 5px 5px 0;margin:0;background-color:#f4f4f4;-webkit-clip-path:polygon(0 0, 100% 0, 100% 5100%, 10% 100%);clip-path:polygon(0 0, 100% 0, 100% 100%, 10 100%);width:100%;padding:5px 0 0 0}#contact h1{grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:2;margin-top:10px}#contact p{grid-column-start:1;grid-column-end:2;grid-row-start:2;grid-row-end:3;padding-left:65px}#contact ul{grid-column-start:2;grid-column-end:3;grid-row-start:2;grid-row-end:3}.overlay{background-color:#cbcbcb}.overlay p{font-size:1.5rem;color:#333}#nameTitle h1{font-size:1.5rem}#nameTitle span{font-size:1rem}#main-nav ul li a{font-size:1.5rem}}