@font-face {
  font-family: "Venice Classic";
  src: url(../fonts/venice-classic.ttf);
}

@font-face {
  font-family: "VHS Gothic";
  src: url(../fonts/vhs-gothic.ttf);
}

/* Default styles */
h1 {
  font-size: 48px;
  font-family: "Venice Classic";
}

h2 {
  font-size: 36px;
  font-family: "Venice Classic";
}

a {
  color: hsl(222, 100%, 50%);
}

p {
  margin-top: 18px;
  font-size: 16px;
  font-family: "VHS Gothic";
  line-height: 1.7;
}

blockquote {
  margin-top: 18px;
  padding: 6px 12px;
  border-top: 2px solid black;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  border-left: 2px solid black;
  background-color: #eef2ff;
  color: #581c87;
}

blockquote p {
  margin-top: 0px;
  font-style: italic;
}

button {
  cursor: pointer;
}

body {
  overflow-x: hidden;
  background-color: hsla(268, 100%, 49%, 0.35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23FFFFFF' fill-opacity='1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

main {
  width: 1200px;
  margin: 20px auto 0 auto;
  display: flex;
  align-items: start;
  gap: 16px;
}

figure {
  display: inline-block;
  position: relative;
}

figure img {
  width: 100%;
}

/* Components */
.site-header {
  display: flex;
  justify-content: end;
  gap: 16px;
}

.site-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 0;
}

.main-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.main-nav__button {
  position: relative;
  min-width: 96px;
  text-align: center;
  padding: 4px 8px;
  font-size: 28px;
  font-family: "Venice Classic";
  background-color: hsla(71, 80%, 60%, 1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23000000' fill-opacity='0.3' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

.main-nav__button::after {
  content: "";
  position: absolute;
  z-index: -10;
  background-color: #0f172a;

  top: 4px;
  right: -4px;
  bottom: -4px;
  left: 6px;
}

/* Special components */
#marisa-banner {
  position: absolute;
  bottom: 12px;
  left: 0px;
  transform: translateX(-100%);
  transition: transform 45s linear;
}

#marisa-banner.animate {
  transform: translateX(calc(100vw + 100%));
}

.marisa-banner__flag {
  position: relative;
  z-index: 10;
  right: -10px;
}

.marisa-banner__thread {
  position: relative;
  bottom: 40px;
  width: 100px;
  height: 3px;
  background-color: rgb(92, 68, 6);
}

.marisa-banner__char {
  position: relative;
  z-index: 10;
  left: -24px;
}

#marisa-banner>* {
  display: inline-block;
}

/* Containers */
.container {
  position: relative;
  border-radius: 2px;
}

.container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -10;
  background-color: white;
}

.container::after {
  content: "";
  position: absolute;
  z-index: -20;
  border-radius: 4px;
  background-color: #0f172a;
}

.container--site-content {
  min-height: 720px;
  border: 1px solid black;
  padding: 12px;
  width: 75%;
  background-color: hsla(268, 100%, 91%, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23DDDDDD' fill-opacity='1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

.container--site-content::after {
  top: 18px;
  right: -12px;
  bottom: -12px;
  left: 18px;
}

.container--aside {
  border: 1px solid black;
  padding: 12px;
  width: 200px;
  background-color: hsla(268, 100%, 91%, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23DDDDDD' fill-opacity='1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

.container--aside::after {
  top: 4px;
  right: -4px;
  bottom: -4px;
  left: 6px;
}

.container--aside__header {
  font-size: 32px;
  font-family: "Venice Classic";
  display: block;
  margin: 8px 0;
}

.container--aside__desc {
  font-size: 14px;
  font-family: "VHS Gothic";
  display: block;
}

.container--logo {
  width: 176px;
  border: 1px solid black;
  padding: 12px 24px;
  background-color: hsla(268, 100%, 91%, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23DDDDDD' fill-opacity='1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

.container--logo::after {
  top: 8px;
  right: -6px;
  bottom: -6px;
  left: 8px;
}

/* Backgrounds */
/* .bg-dotted {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23000000' fill-opacity='0.76' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

.bg-checker {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23000000' fill-opacity='0.16'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
}

.bg-diagonal-lines {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fdba74' fill-opacity='0.66' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
} */