@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');

:root {
  --page-background: #dff8ff;

  --layout-background: #439bf3;
  --box-background: #f7fdff;
  --box-background-alt: #d9ffe3;

  --text-color: #17324a;
  --muted-text-color: #5f7f91;

  --accent-color: #2ebf68;
  --accent-color-bright: #2cbcff;
  --accent-color-dark: #1b7f9f;

  --link-color: #1778b8;
  --link-hover-color: #19b95a;

  --border-color: #66bfe0;

  --scrollbar-track: #d5f3fb;
  --scrollbar-thumb: #31b8df;
  --scrollbar-thumb-hover: #35cf72;

  --layout-max-width: 800px;
  --layout-gap: 10px;
  --sidebar-width: 120px;

  --stamp-width: 99px;
  --stamp-height: 56px;
  --stamp-strip-height: 82px;

  --highlight-color: #ffffff;
  --shadow-color: rgba(31, 111, 151, 0.22);
  --sunny-accent: #ffd84d;
}


* {
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

html {
  min-height: 100%;
  background: var(--page-background);
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 20px;

  color: var(--text-color);
  /* background: var(--page-background); */
  background-image: url(https://dl.glitter-graphics.com/pub/3220/3220675ipslz81pro.gif);
  background-repeat: nrepeat;

  font-family: Arial, Helvetica, sans-serif;
}

/* Full layout */

.site-layout {
  width: 100%;
  max-width: var(--layout-max-width);
  height: min(800px, calc(100vh - 40px));

  margin: 0 auto;
  padding: var(--layout-gap);

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    var(--sidebar-width);

  gap: var(--layout-gap);


  background: var(--layout-background);


  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow:
    0 3px 10px var(--shadow-color),
    inset 0 1px 0 var(--highlight-color);
}

/* Left and right columns */

.site-layout__left,
.site-layout__right {
  min-width: 0;
  min-height: 0;
}

.site-layout__left {
  min-width: 0;
  min-height: 0;

  display: grid;

  grid-template-rows:
    var(--stamp-strip-height)
    230px
    56px
    minmax(0, 1fr)
    66px;

  gap: var(--layout-gap);
}

.site-layout__right {
  display: grid;
  grid-template-rows:
    minmax(270px, 1.2fr)
    minmax(170px, 0.75fr)
    minmax(210px, 1fr);

  gap: var(--layout-gap);
}

/* Shared box styling */

.stamp-strip,
.layout-header,
.layout-navigation,
.main-content,
.layout-footer,
.sidebar-decoration,
.sidebar-panel {
  background:
    linear-gradient(
      to bottom,
      var(--highlight-color),
      var(--box-background)
    );

  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow:
    0 3px 10px var(--shadow-color),
    inset 0 1px 0 var(--highlight-color);
}

/* Stamp strip */
.stamp-strip {
  width: 100%;
  height: var(--stamp-strip-height);

  padding: 6px;

  overflow: hidden;

  display: flex;
  align-items: center;

  background: var(--box-background);

  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow:
    0 3px 10px var(--shadow-color),
    inset 0 1px 0 var(--highlight-color);
}

.stamp-strip__track {
  width: max-content;
  min-width: 100%;
  height: var(--stamp-height);

  display: flex;
  align-items: center;

  animation: stamp-marquee 24s linear infinite;
}

.stamp-strip__group {
  min-width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  flex-shrink: 0;
  padding-right: 4px;
}

.stamp-strip img {
  width: var(--stamp-width);
  height: var(--stamp-height);

  display: block;
  flex: 0 0 var(--stamp-width);

  object-fit: cover;
  image-rendering: pixelated;
}

@keyframes stamp-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.stamp-strip:hover .stamp-strip__track {
  animation-play-state: paused;
}
/* Header */

.layout-header {

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;

  background:
    repeating-linear-gradient(
      135deg,
      var(--box-background) 0,
      var(--box-background) 8px,
      var(--box-background-alt) 8px,
      var(--box-background-alt) 16px
    );
}

.layout-header p {
  margin: 0;

  color: var(--muted-text-color);

  font-family: monospace;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: lowercase;
}

.layout-header img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: block;
  object-fit: cover;
}

/* Navigation */

.layout-navigation {
  padding: 8px 12px;

  overflow-x: auto;
  overflow-y: hidden;

  background: var(--box-background-alt);
}

.layout-navigation ul {
  width: max-content;
  min-width: 100%;

  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;

  list-style: none;
}

.layout-navigation li {
  margin: 0;
  padding: 0;
}

.layout-navigation a {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 7px 1px;

  color: var(--link-color);

  font-size: 12px;
  text-decoration: none;
  text-transform: lowercase;

  transition:
    color 0.15s ease,
    transform 0.15s ease,
    text-shadow 0.15s ease;
}

.layout-navigation a::after {
  content: "";

  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;

  height: 1px;

  background: var(--accent-color);

  transform: scaleX(0);
  transform-origin: center;

  transition: transform 0.15s ease;
}

.layout-navigation a:hover,
.layout-navigation a:focus-visible {
  color: var(--link-hover-color);

  text-shadow:
    0 0 4px var(--accent-color),
    0 0 8px var(--accent-color);

  transform: translateY(-2px);

  outline: none;
}

.layout-navigation a:hover::before,
.layout-navigation a:focus-visible::before {
  color: var(--accent-color-bright);
  transform: rotate(90deg);
}

.layout-navigation a:hover::after,
.layout-navigation a:focus-visible::after {
  transform: scaleX(1);
}

.layout-navigation__label {
  white-space: nowrap;
}

.layout-navigation__icon {
  width: 25px;
  height: auto;

  display: block;
  flex: 0 0 auto;

  object-fit: contain;
  image-rendering: pixelated;

  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}

.layout-navigation a:hover .layout-navigation__icon,
.layout-navigation a:focus-visible .layout-navigation__icon {
  transform: rotate(8deg) scale(1.1);

  filter:
    drop-shadow(0 0 3px var(--accent-color-bright));
}

/* Main content */

.main-content {
  padding: 22px; 
  overflow-y: auto;
  overflow-x: hidden;

  background: var(--box-background);
}

.main-content article {
  width: 100%;
  max-width: 620px;

  margin: 0 auto;
}

.main-content h1,
.main-content h2 {
  color: var(--accent-color-bright);
  font-weight: normal;
  text-transform: lowercase;
  font-family: "Audiowide", sans-serif;
}

.main-content h1 {
  margin: 0 0 18px;
  font-size: 24px;
  
}

.main-content h2 {
  margin: 26px 0 12px;
  font-size: 18px;
}

.main-content p {
  margin: 0 0 16px;

  color: var(--muted-text-color);

  font-size: 12px;
  line-height: 1.7;
}

/* Footer */

.layout-footer {
  padding: 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;

  background: var(--box-background-alt);
}

.layout-footer p {
  margin: 0;

  color: var(--muted-text-color);

  font-size: 10px;
  text-transform: lowercase;
}

.layout-footer {
  position: relative;

  padding: 14px 14px 14px 80px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: visible;

  text-align: center;

  background: var(--box-background-alt);
}

.layout-footer__sticker {
  position: absolute;

  left: -130px;
  bottom: -30px;

  width: 300px;
  height: auto;

  display: block;

  transform: rotate(-8deg);
  transform-origin: bottom center;

  z-index: 5;

  pointer-events: none;
  user-select: none;
}

/* Decorative sidebar */

.sidebar-decoration {
  background-color: var(--box-background-alt);
  background-image: url(https://64.media.tumblr.com/64425a191cf5b3cea15e85415e9b20cd/418bc2fbf76d140e-14/s400x600/9345ba2cba55a5e180ebd381a8b52abd108cb815.gifv);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Scrollable sidebar panels */

.sidebar-panel {
  background: var(--box-background);
}

.sidebar-panel__scroll {
  width: 100%;
  height: 100%;

  padding: 12px;

  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-panel h2 {
  margin: 0 0 12px;

  color: var(--accent-color-bright); 
  font-family: "Audiowide", sans-serif;
  font-size: 14px;
  font-weight: normal;
  text-transform: lowercase;
}

.sidebar-panel p {
  margin: 0 0 12px;

  color: var(--muted-text-color);

  font-size: 10px;
  line-height: 1.5;
}

.sidebar-panel p:last-child {
  margin-bottom: 0;
}

.sidebar-panel strong {
  color: var(--text-color);
  font-weight: normal;
}

/* Scrollbars */

.stamp-strip,
.layout-navigation,
.main-content,
.sidebar-panel__scroll {
  scrollbar-width: thin;

  scrollbar-color:
    var(--scrollbar-thumb)
    var(--scrollbar-track);
}

.stamp-strip::-webkit-scrollbar,
.layout-navigation::-webkit-scrollbar,
.main-content::-webkit-scrollbar,
.sidebar-panel__scroll::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.stamp-strip::-webkit-scrollbar-track,
.layout-navigation::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track,
.sidebar-panel__scroll::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.stamp-strip::-webkit-scrollbar-thumb,
.layout-navigation::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb,
.sidebar-panel__scroll::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);

  border: 2px solid var(--scrollbar-track);
}

.stamp-strip::-webkit-scrollbar-thumb:hover,
.layout-navigation::-webkit-scrollbar-thumb:hover,
.main-content::-webkit-scrollbar-thumb:hover,
.sidebar-panel__scroll::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}