@font-face {
  font-family: 'Atkinson';
  src: local('Atkinson Hyperlegible'),
  url('fonts/atkinsonhyperlegible-regular-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Instrument";
  src: url("fonts/InstrumentSerif-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Instrument";
  src: url("fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

/* Light Color Scheme (Default + Override) */
:root,
:root[data-theme="light"] {
	color-scheme: light dark;
  --bg: #FFEFE7;
  --noise: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwAgMAAAAqbBEUAAAADFBMVEUAAAD87uz88uz87uQAOKpAAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAdBJREFUKJENkkFr20AQhedXttBLbymVqXor2FD/jITIoNwk9g0a3RQ8S+R/UbBDk1uCZ/Hq5tIVqN25DvPme/OGWknpigYiKAiGDYuWctzVFHUMY3+IvXNGdT9MLNsw4gqytooq3QwTT3OtOKOyZ2ampHzCaZwtF1WNqfMV6+rKVC3uUcMFUvlEQcy/NaxfN7tEhrhG1bw/jQXoe10MbC9jOQvoDow0aTFON4kirIdNlxf1oFCWNq48emUjXalay4ZKevLnHSNgP0vGEZvAhQuHFqATJ6SYJi96ICuKH8n5vdvdTxTQY3EZylVXOmShA9gK1icq5nnyunwQvW1JHqalW7e6kTUoRYthOL2VlXT0fEKMQL/zekefuhC8mzN7tg3+JcO6QBrqgpz8q1o4xNqBHvER5wnlRdETAJVtlyS7JNn0TmSEvbb/KOz7GIUvjDHSZ9esOrRZmoWwKpHCOwQRpBi5e3MYZJ+ywMxORqdxA/r70l91QstQT98GmM+7lmYn1OCYw4EcgJqWnL2GTt/ti9CDj3aPP4t2+W5FuchvyYQRjoa4f7Xu4rar3MH5GM/M1dny77S4fcIWipsuf4ja5rrkIWtALCH8jOE4Krb/AUokooQ2Ep2GAAAAAElFTkSuQmCC);
  --fg: #273DD6;
  --rev-noise: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAFVBMVEUAAAA0StQkQtQ0RtQsQtQsRtQkPtRQiTcSAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAxRJREFUOI0Nk0EWpCAMRLlCkGSvo+6dsXuPAvtgYI8N3P8IA+x4L6R+KqV0ux2Z1kpqMQVuuQUWiln90F7ebQ27PVqC2zXnqZZdYQEdIPTtIdSE8L7F7o4nJbwaU4M+vdx3ysfvm/O6rl214JZmazXejxbFHmsyBapR2HoyAlfYHNztGuWZM9KqxHsuFdrFPc7Gyn0Wmz7cFePErZ4/cuh6kq2mxW2PT8rZewFYAC0dQFdgU+YwxKst44b9W90MnSPGe2/eMJD67seLO2dHumxJPnW8dtO9gjhufxZk5/tFYT93nsSLEknQPIbu0iaW3Jww6nYZlbkKmN61Odk62TrZ5xM4qxB+Phw+dJNm7Zq98jdBIlajvgypHMWmOUmnt32+3jW1sitYDpzwgGchsAIHt1hVAe8DguBGpZ3B/a0ov7QmlTEhx4oXJHHWjmlxSrOgkuxyeK7qyZY7CzRac0Y4FD9aqi0mhNe92MpG0bJYrww+A2QMgoJwmEpCCHIODhcZNgbHjJiNfi4vPyj6UmV27chYQhtHN8NeTKL4Vda3yvkiGBLXehWOBX75Nspsr60lcaqTFxunsjoaAFXdsXV5ZR5Gb4t9SftcLZtzAL5pi1ztXmdfZ4BhwmEzq4W7IVr28vWpZTSNcMmXFQXpMuZdZO6crQmtO2wQolMBNFPxbW2CvyGpsX+pCSk9LAdveiDxkFi4mQ3LmC6KttP4ZR8R6OOBJssk36o6obNhwDr6hY2q6OgLDA4P3VFIHEKQBnVzzn+6s6v6fv0HKmp+rC4oR0jBTL+VlTXO2KtqzOyQX75qwM4uqu6qrwB27t/Yp/mz9r30saOjR+5Oe23sapYXqWQXmOVRQz7nkGwQ+vGEyMZxsyUoOSn1NDJTg5eaHzuiN10PKOPsbvPhqcMaWl3PSWql2Y2c+06dKc4MqeL+b69QKjeFNdfq/LFx2avnRCnpGMMfJcPVzcRqwA/jaj5r5sVAVrGH3KZ8Dqhgt2BgBvdWS0rC0ibXzsxWP2aUd4/6ho/yVPD6TKcZG0euZco7yBvsf2TTHAUC8QRaAAAAAElFTkSuQmCC);
}

/* Dark Color Scheme (System Preference) */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #273DD6;
    --noise: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAFVBMVEUAAAA0StQkQtQ0RtQsQtQsRtQkPtRQiTcSAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAxRJREFUOI0Nk0EWpCAMRLlCkGSvo+6dsXuPAvtgYI8N3P8IA+x4L6R+KqV0ux2Z1kpqMQVuuQUWiln90F7ebQ27PVqC2zXnqZZdYQEdIPTtIdSE8L7F7o4nJbwaU4M+vdx3ysfvm/O6rl214JZmazXejxbFHmsyBapR2HoyAlfYHNztGuWZM9KqxHsuFdrFPc7Gyn0Wmz7cFePErZ4/cuh6kq2mxW2PT8rZewFYAC0dQFdgU+YwxKst44b9W90MnSPGe2/eMJD67seLO2dHumxJPnW8dtO9gjhufxZk5/tFYT93nsSLEknQPIbu0iaW3Jww6nYZlbkKmN61Odk62TrZ5xM4qxB+Phw+dJNm7Zq98jdBIlajvgypHMWmOUmnt32+3jW1sitYDpzwgGchsAIHt1hVAe8DguBGpZ3B/a0ov7QmlTEhx4oXJHHWjmlxSrOgkuxyeK7qyZY7CzRac0Y4FD9aqi0mhNe92MpG0bJYrww+A2QMgoJwmEpCCHIODhcZNgbHjJiNfi4vPyj6UmV27chYQhtHN8NeTKL4Vda3yvkiGBLXehWOBX75Nspsr60lcaqTFxunsjoaAFXdsXV5ZR5Gb4t9SftcLZtzAL5pi1ztXmdfZ4BhwmEzq4W7IVr28vWpZTSNcMmXFQXpMuZdZO6crQmtO2wQolMBNFPxbW2CvyGpsX+pCSk9LAdveiDxkFi4mQ3LmC6KttP4ZR8R6OOBJssk36o6obNhwDr6hY2q6OgLDA4P3VFIHEKQBnVzzn+6s6v6fv0HKmp+rC4oR0jBTL+VlTXO2KtqzOyQX75qwM4uqu6qrwB27t/Yp/mz9r30saOjR+5Oe23sapYXqWQXmOVRQz7nkGwQ+vGEyMZxsyUoOSn1NDJTg5eaHzuiN10PKOPsbvPhqcMaWl3PSWql2Y2c+06dKc4MqeL+b69QKjeFNdfq/LFx2avnRCnpGMMfJcPVzcRqwA/jaj5r5sVAVrGH3KZ8Dqhgt2BgBvdWS0rC0ibXzsxWP2aUd4/6ho/yVPD6TKcZG0euZco7yBvsf2TTHAUC8QRaAAAAAElFTkSuQmCC);
    --fg: #FFEFE7;
    --rev-noise: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwAgMAAAAqbBEUAAAADFBMVEUAAAD87uz88uz87uQAOKpAAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAdBJREFUKJENkkFr20AQhedXttBLbymVqXor2FD/jITIoNwk9g0a3RQ8S+R/UbBDk1uCZ/Hq5tIVqN25DvPme/OGWknpigYiKAiGDYuWctzVFHUMY3+IvXNGdT9MLNsw4gqytooq3QwTT3OtOKOyZ2ampHzCaZwtF1WNqfMV6+rKVC3uUcMFUvlEQcy/NaxfN7tEhrhG1bw/jQXoe10MbC9jOQvoDow0aTFON4kirIdNlxf1oFCWNq48emUjXalay4ZKevLnHSNgP0vGEZvAhQuHFqATJ6SYJi96ICuKH8n5vdvdTxTQY3EZylVXOmShA9gK1icq5nnyunwQvW1JHqalW7e6kTUoRYthOL2VlXT0fEKMQL/zekefuhC8mzN7tg3+JcO6QBrqgpz8q1o4xNqBHvER5wnlRdETAJVtlyS7JNn0TmSEvbb/KOz7GIUvjDHSZ9esOrRZmoWwKpHCOwQRpBi5e3MYZJ+ywMxORqdxA/r70l91QstQT98GmM+7lmYn1OCYw4EcgJqWnL2GTt/ti9CDj3aPP4t2+W5FuchvyYQRjoa4f7Xu4rar3MH5GM/M1dny77S4fcIWipsuf4ja5rrkIWtALCH8jOE4Krb/AUokooQ2Ep2GAAAAAElFTkSuQmCC);
	}
}
/* Dark Color Scheme (Override) */
:root[data-theme="dark"] {
	--bg: #273DD6;
  --noise: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAFVBMVEUAAAA0StQkQtQ0RtQsQtQsRtQkPtRQiTcSAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAxRJREFUOI0Nk0EWpCAMRLlCkGSvo+6dsXuPAvtgYI8N3P8IA+x4L6R+KqV0ux2Z1kpqMQVuuQUWiln90F7ebQ27PVqC2zXnqZZdYQEdIPTtIdSE8L7F7o4nJbwaU4M+vdx3ysfvm/O6rl214JZmazXejxbFHmsyBapR2HoyAlfYHNztGuWZM9KqxHsuFdrFPc7Gyn0Wmz7cFePErZ4/cuh6kq2mxW2PT8rZewFYAC0dQFdgU+YwxKst44b9W90MnSPGe2/eMJD67seLO2dHumxJPnW8dtO9gjhufxZk5/tFYT93nsSLEknQPIbu0iaW3Jww6nYZlbkKmN61Odk62TrZ5xM4qxB+Phw+dJNm7Zq98jdBIlajvgypHMWmOUmnt32+3jW1sitYDpzwgGchsAIHt1hVAe8DguBGpZ3B/a0ov7QmlTEhx4oXJHHWjmlxSrOgkuxyeK7qyZY7CzRac0Y4FD9aqi0mhNe92MpG0bJYrww+A2QMgoJwmEpCCHIODhcZNgbHjJiNfi4vPyj6UmV27chYQhtHN8NeTKL4Vda3yvkiGBLXehWOBX75Nspsr60lcaqTFxunsjoaAFXdsXV5ZR5Gb4t9SftcLZtzAL5pi1ztXmdfZ4BhwmEzq4W7IVr28vWpZTSNcMmXFQXpMuZdZO6crQmtO2wQolMBNFPxbW2CvyGpsX+pCSk9LAdveiDxkFi4mQ3LmC6KttP4ZR8R6OOBJssk36o6obNhwDr6hY2q6OgLDA4P3VFIHEKQBnVzzn+6s6v6fv0HKmp+rC4oR0jBTL+VlTXO2KtqzOyQX75qwM4uqu6qrwB27t/Yp/mz9r30saOjR+5Oe23sapYXqWQXmOVRQz7nkGwQ+vGEyMZxsyUoOSn1NDJTg5eaHzuiN10PKOPsbvPhqcMaWl3PSWql2Y2c+06dKc4MqeL+b69QKjeFNdfq/LFx2avnRCnpGMMfJcPVzcRqwA/jaj5r5sVAVrGH3KZ8Dqhgt2BgBvdWS0rC0ibXzsxWP2aUd4/6ho/yVPD6TKcZG0euZco7yBvsf2TTHAUC8QRaAAAAAElFTkSuQmCC);
  --fg: #FFEFE7;
  --rev-noise: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwAgMAAAAqbBEUAAAADFBMVEUAAAD87uz88uz87uQAOKpAAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAdBJREFUKJENkkFr20AQhedXttBLbymVqXor2FD/jITIoNwk9g0a3RQ8S+R/UbBDk1uCZ/Hq5tIVqN25DvPme/OGWknpigYiKAiGDYuWctzVFHUMY3+IvXNGdT9MLNsw4gqytooq3QwTT3OtOKOyZ2ampHzCaZwtF1WNqfMV6+rKVC3uUcMFUvlEQcy/NaxfN7tEhrhG1bw/jQXoe10MbC9jOQvoDow0aTFON4kirIdNlxf1oFCWNq48emUjXalay4ZKevLnHSNgP0vGEZvAhQuHFqATJ6SYJi96ICuKH8n5vdvdTxTQY3EZylVXOmShA9gK1icq5nnyunwQvW1JHqalW7e6kTUoRYthOL2VlXT0fEKMQL/zekefuhC8mzN7tg3+JcO6QBrqgpz8q1o4xNqBHvER5wnlRdETAJVtlyS7JNn0TmSEvbb/KOz7GIUvjDHSZ9esOrRZmoWwKpHCOwQRpBi5e3MYZJ+ywMxORqdxA/r70l91QstQT98GmM+7lmYn1OCYw4EcgJqWnL2GTt/ti9CDj3aPP4t2+W5FuchvyYQRjoa4f7Xu4rar3MH5GM/M1dny77S4fcIWipsuf4ja5rrkIWtALCH8jOE4Krb/AUokooQ2Ep2GAAAAAElFTkSuQmCC);
}

input.toggle {
  cursor: pointer;
	position: fixed;
	right: 24px;
	top: 24px;
	border-radius: 40px;
	appearance: none;
	width: 80px;
	height: 40px;
	outline: none;
	border: 2px solid var(--fg);
	background: var(--bg) var(--noise);
	z-index: 27;
	margin: 0;
}
input.toggle::before {
  content: '';
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  margin: auto;
  border-radius: 50%;
  transform: rotate(-45deg);
  transition: all var(--trans);
  bottom: 0;
  background: var(--fg);
  left: 8px;
  box-shadow: none;
}
input.toggle:checked::before {
  background: transparent;
  left: 36px;
  box-shadow: 6px 6px 0 0 var(--fg);
}

:root {
  --light: #FFEFE7;
  --trans: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Atkinson", sans-serif;
  font-size: 1.25rem;
  line-height: 160%;
  background: var(--bg) var(--noise);
  position: relative;
  overflow-x: hidden;
  padding: 16px;
  color: var(--fg);
}

body * {
  margin-top: 0;
  box-sizing: border-box;
}

:selection {
  color: var(--bg);
  background: var(--fg);
}

h1, h2, h3, .huge, .big, .number, .button {
  font-weight: 300;
  font-family: "Instrument", sans-serif;
  line-height: 100%;
}

img:not(.logo) {
  max-width: 100%;
  border-radius: 8px;
}
h1,
.project h2,
.big {
  font-size: 4rem;
  margin-bottom: 2rem;
}
.project h2 {
  margin-top: 8rem;
}

.project h3 {
  margin-top: 2rem;
}
h2 {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}
h3,
article h2, article .number {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.huge {
  font-size: calc(4rem + 8svw);
  color: var(--bg);
  animation-name: leftRight;
  animation-duration: 4s;
  animation-direction: alternate;
  display: inline-block;
  padding: 16px;
}

.centered {
  text-align: center;
  align-items: center;
}

section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: auto;
  width: 100%;
  max-width: 50rem;
  padding: 80px 0;
}
section.fullheight {
  min-height: calc(100vh - 32px);
}

section.fullwidth {
  max-width: 100%;
}

.fullwidth p {
  max-width: 50rem;
  margin: 0 auto;
}

section.fullheight:not(.fullwidth),
section.animated {
  animation-name: scrollAnimation;
  animation-duration: 4ms;
  animation-direction: alternate;
  animation-timeline: view();
}

@keyframes scrollAnimation {
  from {
    transform: scale(.9);
    opacity:.4;
  }
 40% {
    transform: scale(1);
    opacity:1;
  }
 60% {
    transform: scale(1);
    opacity:1;
  }
  to {
    transform: scale(.9);
    opacity:.4;
  }
  
}

a {
  color: var(--fg);
  position: relative;
  text-decoration: none;
}
p a {
  text-decoration: underline 2px solid;
}

p a:hover {
  background: var(--fg);
  color: var(--bg);
}

.button {
  padding: 16px;
  outline: 2px solid var(--fg);
  box-shadow: 4px 4px 0 2px;
  transition: all .1s ease;
  position: relative;
  display: inline-block;
  text-decoration: none;
  margin-top: 1rem;
  text-align: center;
  font-size: 1.5rem;
}

.reverse .button {
  color: var(--bg);
  outline-color: var(--bg);
}

a.card:hover .button,
.button:hover {
  box-shadow: 4px 4px var(--bg), 4px 4px 0 2px, 8px 8px var(--bg), 8px 8px 0 2px;
  transform: translate(-8px, -8px);
}

.reverse .button:hover {
  box-shadow: 4px 4px var(--fg), 4px 4px 0 2px, 8px 8px var(--fg), 8px 8px 0 2px;
}

a.card:active .button,
.button:active {
  box-shadow: 0 0 40px var(--fg);
  transform: translate(0,0);
}

a.card:hover .img {
  background-position: center;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid var(--fg);
  padding: 8px;
  margin: auto;
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  background: var(--bg) var(--noise);
  z-index: 999;
  border-radius: 40px;
}

nav a {
  font-size: 1rem;
  padding: 4px 8px;
  line-height: 100%;
  border-radius: 40px;
  border: 2px solid transparent;
}
nav a:active,
nav a.current {
  background: var(--fg);
  color: var(--bg);
}

nav a::after{
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  scale: 0 1;
  translate: 0;
  transition: translate .4s;
  outline: 2px solid;
  z-index: -1;
  border-radius: 40px;
}
nav a:hover::after{
  scale: 1 1;
}

a.nav-item:hover + a.nav-item::after{
  translate: -80%;
}

a.nav-item:has(+a.nav-item:hover)::after{
  translate: 80%;
}

.pill {
  font-size: 1rem;
  background: var(--fg);
  color: var(--bg);
  padding: 4px 8px;
  border-radius: 50px;
}

.reverse .pill {
  background: var(--bg) var(--noise);
  color: var(--fg);
}

article .img {
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 16px;
  transition: all var(--trans);
  min-height: 40svh;
  padding: 16px;
  height: 100%;
  background-position: 100% 10%;
}

article:not(.reverse) .desc {
    background: var(--bg) var(--noise);
}

article .data {
  color: var(--light);
}

.data p {
  margin-bottom: 0;
}

  nav div {
    display: flex;
    width: 100%;
    justify-content: end;
  }

@media screen and (max-width: 22.5em) {

  nav {
    left: 0;
    right: 0;
  }
  nav svg {
    display: none;
  }
  
  nav div {
    justify-content: space-between;
  }
}

@media screen and (min-width: 50rem) {
  article.card.reverse {
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
	}
}

@supports (animation-timeline: view()) {
  #projects article {
    --index0: calc(var(--index) - 1);
    --reverse-index: calc(var(--numcards) - var(--index0));
    --reverse-index0: calc(var(--reverse-index) - 1);
  }
  .huge {
    animation-timeline: view();
  }

  @keyframes leftRight {
    from {
      transform: translateX(-50%);
      background: none;
    }
    50% {
      background: var(--fg)
    }
    to {
      transform: translateX(75%);
      background: none;
  
    }  
  }

  @keyframes scale {
    to {
      transform: scale(calc(1.1 - calc(0.1 * var(--reverse-index))));
    }
  }

  #projects {
    --numcards: 7;
    view-timeline-name: --cards-element-scrolls-in-body;
  }

  #projects .card {
    --start-range: calc(var(--index0) / var(--numcards) * 100%);
    --end-range: calc((var(--index)) / var(--numcards) * 100%);
    animation: linear scale forwards;
    animation-timeline: --cards-element-scrolls-in-body;
    animation-range: cover;
    animation-duration: 1s;
  }
}

#greengot {
	--index: 1;
}

#mangane {
	--index: 2;
}

#ride {
	--index: 3;
}

#airint {
	--index: 4;
}

#dronisos {
	--index: 5;
}

#designshot {
	--index: 6;
}

#projects article {
  position: sticky;
  top: 0;
  transform: translateY(calc(var(--index) * 1rem));
  height: 50rem;
  margin: auto;
  width: 100%;
  /*! border: 40px solid var(--bg); */
  /*! box-sizing: content-box; */
}

.card {
  transform-origin: 50% 0%;
  will-change: transform;
  display: grid;
}

.card.reverse {
  padding: 16px;
border-radius: 24px;
}

.card .desc {
	padding: 16px;
}

#projects {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(var(--numcards), 50rem);
	gap: 40px;
}

.reverse.fullwidth {
  z-index: 10;
  border-radius: 24px;
}

.bounce {
display: block;
  animation: bounce 4s ease infinite;
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: rotate(90deg) translateX(0);}
	40% {transform: rotate(90deg) translateX(32px);}
	60% {transform: rotate(90deg) translateX(16px);}
}

.reverse {
  color: var(--bg);
  background: var(--fg) var(--rev-noise);
}

.small {
  font-size: 1rem;
} 

strong {
  font-weight: inherit;
  border: 2px dashed;
  padding: 4px 8px;
  border-radius: 40px;
}
.swipe {
  background: linear-gradient(to right, #DEEFCB 50%, transparent 50%) no-repeat;
  display: inline;
  background-position-x: 0;
  background-size: 0%;
  animation: swipe 9s infinite both;
}

@keyframes swipe {
  33%, 66% {
    background-position-x: 0;
    background-size: 200%;
  }  
   100% {
    background-position-x: -100%;
    background-size: 200%;
  }
}

figure {
  margin: 1rem 0;
}
figcaption {
  font-size: 1rem;
  font-style: italic;
}

hr {
  border: none;
  border-bottom: 1px dashed;
  width: 100%;
}
.project hr {
	margin-top: 6rem
}
.project hr + h2 {
	margin-top: 2rem;
}

s {
  text-decoration: 100% line-through var(--fg);
  transition: var(--trans)
}
s:hover {
  text-decoration-color: transparent;
}
img.logo {
  align-self: flex-end;
}

[aria-label="pagination"] {
  justify-content: space-between;
  flex-direction: row;
}