@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,300;0,500;1,300&display=swap');

#home nav {height: 85vh;display: flex;justify-content: center;align-items: center;text-align: center;}
#home footer {position: fixed;bottom: 0;left: 0;right: 0;}
body, input, textarea {margin: 0;font-family: 'Work Sans', sans-serif;}
header {color: #DDD;text-align: center;position: relative;padding-top: 10px;background: #171721;}
a {text-decoration: none;color: #d7815d;transition: all .25s ease;}
a:hover {color: #d7815d;transition: all .25s ease;}
h1, h2, ul, figure {margin: 0;padding: 0;}
p {margin-top: 0;}
ul {list-style: none outside;}
img {max-width: 100%;}
div#home-logo {position: absolute;left: 0;right: 0;top: 135px;text-align: center;}
div#home-logo img {max-width: 150px;background: #171721;border-radius: 200px;}

.container {padding: 0 40px;}
.name {font-size: 50px;font-weight: 100;color: #deac97;}
header h1 {font-size: 14px;font-weight: 300; color: #666;letter-spacing: 2px;text-transform: uppercase;}
header img {max-width: 75px;}
.row {display: flex;align-items: center;}
#profile {width: 500px;}
#profile figure {margin-top: -50px;}
nav ul {display: flex;justify-content: space-evenly;padding-top: 45px;}
nav li a {display: block;padding: 10px 15px; color: #666;font-weight: 300;font-size: 20px;position: relative;}
nav li a:hover, nav li a:active, nav li.current a {color: #deac97;}
nav li a:after {content: '';background: #deac97;position: absolute;height: 2px;width: 0;left: 50%;right: 50%;bottom: 0;-webkit-transition: all .5s ease;transition: all .5s ease;}
nav li.current a:after, nav li:hover a:after, nav li:active a:after {width: 80%;left: 10%;right: 10%;-webkit-transition: all .25s ease;transition: all .25s ease;}
#works {text-align: center;}
#works li li {display: inline-block;position: relative;}
#works .content li li a:after {content: '●';position: absolute;right: -6px;top: 5px;color: #deac97;font-size: 10px;}
.hide_work {display: none;}
.content {font-size: 16px;font-weight: 300;}
.content > ul {padding-bottom: 100px;cursor: default;}
.content li, p {line-height: 150%;}
.content > ul > li, #skills > li {padding-top: 50px;}
.content li li:last-child  a:after {display: none;}
.content ul li a {padding: 10px;}
.content ul li a:hover {color: #171721;}
.content h2 {font-size: 36px;font-weight: 600;padding-bottom: 15px;color: #CCC;transition: all .25s ease;line-height: 100%;}
.content li:hover h2 {color: #BBB;transition: all .25s ease;}
#skills {display: flex;justify-content: space-between;list-style: none;margin: 0;gap: 20px;}
#about .content ul#skills ul {display: block;}
#about .content ul ul {display: grid;grid-gap: 0 5px;list-style: none;margin: 0;grid-template-columns: repeat(2,1fr);}
#about .content ul {grid-template-columns: repeat(2,1fr);}
#bio {padding-top: 50px;max-width: 768px;margin: 0 auto;}
#form {padding-bottom: 100px;}
#form li {padding: 10px 0;}
#form label {display: block;}
#form input, #form textarea {width: 96%;border: 1px solid #DDD;padding: 10px 2%;font-size: 18px;}
#form .submit {text-align: right;}
#form input[type="submit"] {background: #deac97;width: auto;border: none;padding: 10px 20px;font-size: 24px;}
#form textarea {height: 200px;}
#bio h2 {text-align: center;}
#bio > ul {padding-left: 20px;}
#bio > ul > li {padding: 10px 0;position: relative;}
#bio > ul > li:before {content: '●';position: absolute;left: -20px;top: 10px;color: #deac97;font-size: 10px;}
#cv {text-align: center;padding-top	: 5px;display: none;}
#cv a {display: inline-block;padding-bottom: 10px;border-bottom: 1px dashed #deac97;font-weight: 400;}
#contact ul {display: flex;max-width: 210px;margin: 0 auto;padding: 50px 0;}
div#contact {max-width: 500px;margin: auto;}
#contact img {width: 50px;}
#contact p {font-style: italic;font-size: 16px;font-weight: 300;text-align: center;border: 1px solid #deac97;border-width: 1px 0;padding: 20px 0;}
#contact span {color: #deac97;}
footer {text-align: center;padding: 50px 0;font-size: 16px;font-weight: 300;}
header h1 br {display: none;}
header h1 span {display: block;}
#resume {position: fixed;left: 0;bottom: 0;display: block;width: 30px;height: 30px;}
#arrow {text-align: center;position: relative;}
#arrow a {display: inline-block;border-radius: 50px;width: 50px;height: 50px;border: 2px solid #deac97;color: #deac97;font-size: 30px;line-height: 50px;background: #FFF;margin-top: 50px;}
p#arrow:before {content: '';border-bottom: 1px solid #deac97;display: block;position: absolute;bottom: 30px;left: 0;right: 0;z-index: -1;}

@media (min-width: 479px) {
nav ul {justify-content: center;}
nav li a {padding: 10px 25px;}
}

@media (min-width: 600px) {
header {background: #171721 url(../img/pp.png) right top no-repeat;background-size: contain;}
header h1 {font-size: 20px;}
.content > ul {display: grid;grid-gap: 0 20px;list-style: none;margin: 0;}
#works .content > ul {grid-template-columns: repeat(2,1fr);}
#about .content ul#skills ul {display: grid;grid-gap: 10px 20px;list-style: none;margin: 0;}
#skills {justify-content: space-evenly;}
}

@media (min-width: 768px) {
header {padding-top: 50px;}
header figure {margin: 0;position: absolute;left: 0;top: 55px;padding: 10px;}
header img {max-width: 120px;}
.name {font-size: 75px;}
.content {font-size: 20px;}
.content h2 {padding-bottom: 30px;font-size: 56px;}
.content > ul > li, #skills > li {list-style-type: none;vertical-align: top;padding-top: 0;padding-bottom: 20px;width: auto;padding-top: 150px;}
#bio {padding-top: 150px;}
#works .content li li a:after {right: -8px;font-size: 14px;}
#bio > ul > li:before {font-size: 14px;}
}

@media (min-width: 980px) {
}

@media (min-width: 1200px) {
header figure {left: 50px;}
header img {max-width: 170px;}
.name {font-size: 100px;}
#works .content > ul {grid-template-columns: repeat(3,1fr);grid-gap: 0 50px;}
#about .content ul ul {grid-gap: 0 5px;}
.hide_work {display: block;}
}

@media (min-width: 1400px) {
.container {max-width: 1400px;margin: 0 auto;}
#works .content > ul {grid-gap: 0 25px;}
}