:root {
  --fD: "DM Serif Text", serif;
  --fK: "Kanit", serif;
  --shadow-1: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  --shadow-2: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --width: 1400px;  
  --s1: 100px;
  --s2: 50px;
  --s3: 20px;
  --col-o: #FF5003;
  --col-c: #00FFFF;
}
html, body {
  font-family: var(--fK);
  font-weight: 200;
  background-color: #FAFAFA;
  color: #36454F;
  font-size: 1rem;
  font-weight: 200;
  line-height: 1.4rem;
  letter-spacing: -0.5px;
}
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
  scroll-behavior: smooth;
  transition: all 0.3s ease-out;
}
body > div { overflow-x: clip; }
@keyframes open {
  0% { width: 0px; padding: 0px; }
  50% { width: 0px; padding: 0px; }
  100% { width: var(--width); padding: var(--s1) var(--s2); }
}
@keyframes show {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes drop {
  0% { bottom: 100vh; border: 2px solid var(--col-c); box-shadow: 0 0 5px 2px rgba(0, 255, 255, 0.5), 0 0 10px 5px rgba(0, 255, 255, 0.3), 0 0 20px 10px rgba(0, 255, 255, 0.1); }
  49.9% { bottom: 100%; border: 2px solid var(--col-c); box-shadow: 0 0 5px 2px rgba(0, 255, 255, 0.5), 0 0 10px 5px rgba(0, 255, 255, 0.3), 0 0 20px 10px rgba(0, 255, 255, 0.1); }
  50% { bottom: 100vh; border: 2px solid var(--col-o); box-shadow: 0 0 5px 2px rgba(255, 80, 3, 0.5), 0 0 10px 5px rgba(255, 80, 3, 0.3), 0 0 20px 10px rgba(255, 80, 3, 0.1); }
  99.9% { bottom: 100%; border: 2px solid var(--col-o); box-shadow: 0 0 5px 2px rgba(255, 80, 3, 0.5), 0 0 10px 5px rgba(255, 80, 3, 0.3), 0 0 20px 10px rgba(255, 80, 3, 0.1); }
}
@keyframes change-color {
  0% { border: 1px solid var(--col-o); box-shadow: rgba(255, 80, 3, 0.35) 0px 5px 15px; fill: var(--col-o); }
  49.9% { border: 1px solid var(--col-o); box-shadow: rgba(255, 80, 3, 0.35) 0px 5px 15px; fill: var(--col-o); }
  50% { border: 1px solid var(--col-c); box-shadow: rgba(0, 255, 255, 0.35) 0px 5px 15px; fill: var(--col-c); }
  99.9% { border: 1px solid var(--col-c); box-shadow: rgba(0, 255, 255, 0.35) 0px 5px 15px; fill: var(--col-c); }
}
.show {
  opacity: 0;
  animation: show 1s ease-in forwards;
  animation-delay: 2s;
}
header {
  background-color: white;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid var(--col-o);
  position: fixed;
  margin: var(--s2);
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  fill: whitesmoke;
  animation: change-color 6s ease-in infinite;
}
header svg {
  height: 20px;
  width: auto;
}
header::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  left: 50%;
  border-radius: 2px;
  animation: drop 6s ease-in infinite;
}
header img {
  height: 20px;
  width: auto;
}
.content {
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s2);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
  animation: open 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.logo {
  display: inline-block;
  margin: auto;
  width: 50%;
}
h2 {
  font-family: var(--fD);
  font-weight: 200;
  font-size: 1.8rem;
  margin: 0;
}
.con-projects {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
ul.project-list {
  list-style: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s2);
}
ul.project-list:hover {
  background-color: white;
  box-shadow: var(--shadow-2);
}
ul.project-list li {
  width: 280px;
  padding-bottom: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  border-radius: 10px;
  overflow: hidden;
}
ul.project-list li:has(a) a, ul.project-list li:has(p) p {
  padding: 0 var(--s3);
}
ul.project-list li img {
  filter: saturate(0.2) blur(0.1rem);
}
ul.project-list li:hover {
  box-shadow: var(--shadow-1);
}
ul.project-list li:hover img {
  filter: saturate(1) blur(0);
}
.-website img {
  height: 160px;  
}
.-design li {
  height: 350px;
  padding-bottom: 0;
}
a {
  color: var(--col-o);
  text-decoration: none;
}
a:hover {
  color: var(--col-c);
}
img {
  object-fit: cover;
}
@media (max-width: 1400px) {
  :root {
    --width: 100%;  
  }
  .content {
    animation: open 2s ease-out forwards;
  }
}
@media (max-width: 600px) {
  :root {
    --s1: 50px;
    --s2: 20px;
    --s3: 10px;
  }
  ul.project-list {
    background-color: white;
    box-shadow: var(--shadow-2);
  }
  ul.project-list li {
    box-shadow: var(--shadow-1);
  }
  ul.project-list li img {
    filter: saturate(1) blur(0);
  }
}
@media screen and (orientation: landscape) and (max-height: 570px) {
  :root {
    --s1: 50px;
    --s2: 20px;
    --s3: 10px;
  }
  .content {
    padding-bottom: 100px;
  }
  ul.project-list {
    background-color: white;
    box-shadow: var(--shadow-2);
  }
  ul.project-list li {
    box-shadow: var(--shadow-1);
  }
  ul.project-list li img {
    filter: saturate(1) blur(0);
  }
}