@media (prefers-color-scheme: light) {
  :root {
    --background: #FFFFFF;
    --accent: #5F5F5F;
    --accent-pale: #EDECEB;
    --text: #252525;
    --divider: #919191;
    --divider-pale: #DADADA;
    --link: #0000EE;
    --link-visited: #551A8B;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #191919;
    --accent: #9B9B9B;
    --accent-pale: #292827;
    --text: #D3D3D3;
    --divider: #505050;
    --divider-pale: #373737;
    --link: #2F82FF;
    --link-visited: #9845E5;
  }
}

body {
  margin: 0;
  padding: 8rem 0;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Display', 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
  background-color: var(--background);
}

h1, h2, h3, p, span, summary, li, blockquote {
  color: var(--text);
}

a {
  font-weight: 700;
  color: var(--link);
}

a:visited {
  color: var(--link-visited);
}

header, main, footer {
  max-width: 45rem;
  margin: 2rem auto;
}

h2 {
  margin: 4rem 0 0.4rem;
}

hr {
  margin: 0;
  border-style: solid;
  color: var(--divider);
}

blockquote {
  margin: 0;
  padding: 1rem 1rem 1rem 1.5rem;
  border-left: 2px solid var(--text);
  background-color: var(--accent-pale);
  border-radius: 0 0.5rem 0.5rem 0;
}

summary {
  cursor: pointer;
}

ul {
  margin-bottom: 0;
}

li {
  line-height: 1.5;
  margin-top: 0.8rem;
}

.project-list hr:not(:first-of-type),
.education-list hr:not(:first-of-type),
.work-expirience hr:not(:first-of-type) {
  margin: 1rem 0;
  border-style: dashed;
  color: var(--divider-pale);
}

.accent-text {
  color: var(--accent);
}

.header__columns {
  display: flex;
  column-gap: 1rem;
  justify-content: space-between;
}

.header__columns--right img {
  width: 15rem;
  border-radius: 0.5rem;
}

.header__english-label--mobile {
  display: none;
}

.header__chips {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.chips__item {
  font-family: 'SFMono-Regular', Menlo, Consolas, 'PT Mono', 'Liberation Mono', Courier, monospace;
  flex-shrink: 0;
  color: var(--accent);
  background-color: var(--accent-pale);
  padding: 0.2rem 0.4rem;
  border-radius: 0.3rem;
}

.header__skills {
  margin-top: 2rem;
}

.header__skills summary {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
}

.work-expirience__columns,
.project-list__project {
  padding: 0.5rem 0 1.5rem;
}

.work-expirience__columns:last-child,
.project-list__project:last-child {
  padding-bottom: 0;
}

.work-expirience__column p:last-child {
  margin-bottom: 0;
}

.project__description {
  margin: 0;
}

.work-expirience__columns,
.project__columns {
  display: flex;
  column-gap: 1rem;
}

.footer__columns {
  display: flex;
  column-gap: 3rem;
  align-items: center;
  margin-top: 2rem;
}

.work-expirience__columns > *:nth-child(1),
.project__columns > *:nth-child(1) {
  width: 40%;
  flex-shrink: 0;
}

.education-list__item {
  display: flex;
  column-gap: 1rem;
  margin: 1.6rem 0;
}

.education-list__item > *:nth-child(1) {
  width: 40%;
  flex-shrink: 0;
}

.education-list__item div p {
  margin: 1rem 0 0 0;
}

.education-list__item div p:first-of-type {
  margin: 0;
}

.footer__columns > *:nth-child(1) {
  width: 25%;
  flex-shrink: 0;
  border-radius: 50%;
}

/* divider animation */

.footer__divider {
  border: 0;
  width: 100%;
  height: 0;
  border-top: 0.2rem dotted var(--divider);
  position: relative;
  overflow: visible;
  margin: 2rem 0;
}

.footer__divider:before {
  content: '';
  position: absolute;
  top: -13px;
  left: 0;
  right: 0;
  bottom: 0;
  animation: move 12s 0s infinite linear;
  background-image: url('./static/index/pacman.svg');
  background-size: 22px;
  background-repeat: no-repeat;
  background-position: calc(200% + 24px) 0;
  height: 24px;
}

.footer__divider:after {
  content: '';
  position: absolute;
  top: -13px;
  left: 0;
  right: 0;
  bottom: 0;
  animation: move 12s 0.5s infinite linear;
  background-image: url('./static/index/ghost.svg');
  background-size: 22px;
  background-repeat: no-repeat;
  background-position: calc(200% + 24px) 0;
  height: 24px;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
}

/* mobile view */

@media (max-width: 45rem) {
  body {
    padding: 3rem 1.5rem;
  }

  header, main, footer {
    max-width: unset;
    margin: 2rem 0;
  }

  p, li {
    line-height: 1.5;
  }

  li:not(:first-of-type) {
    margin-top: 0.5rem;
  }

  .header__columns {
    flex-direction: column-reverse;
    justify-content: unset;
    align-items: center;
  }

  .header__columns * {
    text-align: center;
  }

  .header__columns--right img {
    width: 10rem;
    border-radius: 50%;
  }

  .header__english-label {
    display: none;
  }

  .header__english-label--mobile {
    display: inline;
  }

  .header__contacts {
    line-height: 2;
  }

  .work-expirience__columns {
    flex-direction: column;
  }

  .work-expirience__columns > *:nth-child(1) {
    width: unset;
  }

  .work-expirience__columns > *:nth-child(2) > p:first-of-type {
    margin-top: 0;
  }

  .work-expirience__column p.work-expirience__period {
    margin-bottom: 1rem;
  }

  .footer__columns {
    column-gap: 1rem;
    align-items: start;
    margin-top: 2rem;
  }

  .footer__columns > *:nth-child(1) {
    width: 15%;
  }

  .footer__divider:before {
    animation-duration: 8s;
  }

  .footer__divider:after {
    animation-duration: 8s;
    animation-delay: 1s;
  }
}