/* --- Page settings --- */
@import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@300;400;500;600&display=swap);
html, body {
  /*Usual suspects*/
  margin: 0;
  padding: 0;
  display: block;
  line-height: 1.2;
  min-height: 100vh;
  box-sizing: border-box;
}
html {
  background: #f1f1f1;
  color: #1a202c;
  /* - Font - */
  font-family: 'IBM Plex Sans KR', sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html.sr .load-hidden {
  visibility: hidden;
}
html.sr .block {
  visibility: hidden;
}

/*--- Animation ---*/
/*
.skeleton {
  animation: skeleton-loading .85s linear infinite alternate;
}
@keyframes skeleton-loading {
  0% {
    background-color: hsl(0, 0%, 90%);
  }
  100% {
    background-color: hsl(0, 0%, 95%);
  }
}*/

/*--- Content ---*/
.content {
  height: 100%;
  max-width: 950px;
  margin: auto;
}
.container {
  margin: 32px 16px;
  display: grid;
  grid-gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-items: center;
}
.block {
  max-width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.project-container {
  margin: 32px 16px;
}

/*--- Header ---*/
header {
  margin: 16px 0 0 0;
  position: sticky;
  top: 0;
}
nav {
  padding: 16px 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: start;
}

/*--- Media ---*/
.img-headshot {
  max-width: 440px;
}
#arrow-icon {
  height: 24px;
}
video {
  width: 100%;
  overflow: hidden;
}
img {
  width: 100%;
  overflow: hidden;
  transition-duration: .5s;
}

/* --- Typography settings --- */
h1 {
  font-weight: 400;
  font-size: 25px;
  margin: 0;
}

/*--- Footer ---*/
footer {
  padding: 16px 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 14px;
  color: gray;
}

/* --- Button settings --- */
button, a {
  color: inherit;
  text-decoration: inherit;
  font-family: inherit;
  font-size: inherit;
}

/*--- Project area settings ---*/
.project-description {
  margin: 16px 0;
  display: grid;
  grid-template-columns: 1fr auto;
}
.project-button {
  display: flex;
  margin: auto;
  align-items: center;
}
.image-container {
   margin: 16px 0;
   display: flex;
   justify-content: center;
 }
.about-me-container {
  margin: 16px 0;
  display: grid;
  grid-template-rows: 1fr auto;
}

/*--- Special Types ---*/
.fade {
  color: #5c5c5c;
  transition: color .25s;
}
.fade:hover {
  color: #1a202c;
}

/*--- Media Query ---*/
@media (min-width: 690px) {
  .span-2c {
    grid-column: auto / span 2;
  }
  .span-2r {
    grid-row: auto / span 2;
  }
}
@media screen and (max-width: 600px) {
  p, li {
    font-size: 18px;
  }
  h1 {
    font-size: 30px;
  }
  span {
    font-size: 16px;
  }
}