/* fonts
font-family: 'Hahmlet', serif;
font-family: "Do Hyeon", sans-serif;
*/

:root {
    --dark-navy: #2a2d30;
    --blue: #8596b5;
    --light-blue: #b3c8da;
    --pink: #d1a1a1;
    --purple: #827397;
    --black: #111111;
    --grey: #646464;
    --light-grey: #c1c1c1;
    --white: #F1F6F9;
}

html, body {height: 100%;}
html {scroll-behavior: smooth; overflow-y: scroll;}
body {margin: 0; padding: 0; background-color: var(--black); font-family: "Do Hyeon", sans-serif; font-weight: 500;}

main {padding: 10vw 6vw; flex: 1; font-size: 20px;}
main h2 {color: var(--white); letter-spacing: 0.08em; margin: 3vh 0; font-size: 4em;}
main h3 {color: var(--light-grey); letter-spacing: 0.08em; margin: 0 4px; font-size: 1.5em;}
main h4 {color: var(--grey); letter-spacing: 0.08em; margin: 0 4px; line-height: 1.2em; width: 60%; font-size: 0.9em;}

main .info {font-size: 0.9em; margin: 0 4px; line-height: 2em; color: var(--blue);}
main .info a, main .info a:hover {color: var(--grey); padding-right: 5px; text-decoration: none; font-weight: 700;}

nav {position: fixed; right: 1%; bottom: 1%; z-index: 10; display: flex; flex-direction: column; gap: 5px;}
nav button {width: 60px; height: 60px; background-color: var(--grey); color: var(--light-grey); border-radius: 50px; border: none; text-align: center; font-size: 13px;}
nav button:hover {background-color: var(--blue);}
.kor {display: none;}

section {padding: 2vw 6vw 3vw;}

.container {padding: 1vh 1vw; font-size: 17px;}

#project .paragraph {display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: space-around;}
#project .paragraph div {background-color: var(--grey); width: 46%; height: min-content; margin: 0.5vw; border-radius: 10px;}
#project button {background-color: transparent; color: var(--white); padding: 2vh; width: 100%; height: max-content; border-radius: 10px;}
#project li {list-style: square;}
#project a {color: var(--light-grey);}

.title {color: var(--light-blue); font-size: 1.9em; font-weight: 800; margin-bottom: 1.1rem;}
.stitle {color: var(--white); font-size: 1.5em; line-height: 1.3em;}
.stitle span {font-size: 0.9em; color: var(--blue);}

.url {text-decoration: none; color: var(--blue);}
.url:hover {text-decoration: none; color: var(--purple);}

.date {color: var(--grey); font-size: 0.85em; line-height: 1.2em;}

.paragraph {text-align: left; line-height: 1.3em; color: var(--light-grey); margin-bottom: 3em;}
.paragraph ul {padding-left: 1em; margin: 0;}
.paragraph a {text-decoration: none; color: var(--light-grey);}
.paragraph a:hover {color: var(--grey);}
.paragraph li {list-style: square;}
.paragraph li::marker {color: var(--light-grey);}
.paragraph p {margin: 0;}


#back {text-align: center;}
.back {font-size: 1.5em; font-weight: 800; color: var(--grey);}

.techstack {font-size: 0.8em; color: var(--pink);}

.imgcontainer {display: flex; flex-direction: row; flex-wrap: wrap; padding: 1%;}
img {width: 50%;}

#education p {color: var(--grey);}

.award {display: flex; padding: 3px 0;}
.award-left {flex: 0.3; text-align: right; padding-right: 1vw;}
.award-left:hover {color: var(--purple);}
.award-right {flex: 0.7; text-align: left; padding-left: 1vw;}
.award-right span {color: var(--grey); font-size: 0.7em;}

footer {color: var(--light-grey); text-align: center; padding: 10vh 0 0 0;}
footer p {font-size: 7px; margin: 0;}

@media screen and (max-width: 900px) {
    img {width: 100%};
}

@media screen and (max-width: 600px) {
    main {padding: 3vw 4vw;}
    main h2 {font-size: 2em;}
    main h3 {font-size: 1em;}
    main h4 {width: 85%; font-size: 0.7em;}

    section {padding: 5vw 4vw;}

    .title {font-size: 1.5em;}
    .stitle {font-size: 1.1em;}
    nav button {width: 40px; height: 40px; font-size: 9px;}
    .container {font-size: 13px;}
}