@font-face {
    font-family: 'depixelKlein';
    src: url('../assets/fonts/depixel/DePixelKlein.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'depixelHalbfett';
    src: url('../assets/fonts/depixel/DePixelHalbfett.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'pixel32';
    src: url('../assets/fonts/pix32/Pix32.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BrotherSignature';
    src: url('../assets/fonts/brother_signature/Brother-Signature.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --paper: #fbf6ec;
    --paper-edge: #e9dfce;
    --ink: #4d4237;
    --ink-soft: #6b6154;
    --accent: #b4522f;
    --accent-deep: #8f3f23;
    --line: #cfc3ad;
    --shadow: rgba(58, 51, 43, 0.22);
}

::selection {
    background-color: rgb(169, 161, 174);
    color: #ffffff;
  }

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    background: rgb(150, 146, 175);
    border-radius: 3px;
}

::-webkit-scrollbar-track {
    background: rgb(255, 255, 255);
}

body {
    color: var(--accent-deep);
    background-color: rgb(251, 224, 224);
    background-image: url("../assets/resources/background/itinerae-03.webp");
    min-height: 100vh;
    padding: 32px 20px;
    flex-wrap: wrap;
    overflow-x: hidden;
    image-rendering: pixelated;
}

h1 {
    font-family: 'BrotherSignature';
    font-weight: 400;
    font-size: 100px;
    letter-spacing: 14px;
}

p {
    font-family: 'depixelKlein', 'pixel32';
}

a {
    text-decoration: none;
    color: inherit;
}

.page-footer {
    font-family: 'depixelKlein', 'pixel32';
    text-align: center;
    margin-top: 24px;
    color: var(--ink-soft);
    font-size:12px;
}

.main-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 850px;
    margin: 50px auto 0 auto;
    padding: 32px;
    border-radius: 2px;
    text-align: center;
}

.notice {
    width: 500px;
    margin: 10px auto 0 auto;
    padding: 32px;
    border-radius: 2px;
}

.sticker {
    position: absolute;
    width: 800px;
    min-height: 1px;
}

.sticker > .moon,
.sticker > .paper-crane,
.sticker > .cloud-white {
    position: absolute;
    margin: 0;
}

.moon {
    width: 400px;
    position: relative;
    left: 15px;
    top: 300px;
    transform: translateX(-45%);
}

.paper-crane {
    width: 200px;
    position: relative;
    right: 15%;
    top: 75px;
    transform: translateX(80%) translateY(-150%);
}

.cloud-white {
    width: 200px;
    position: relative;
    right: 30%;
    top: 400px;
    transform: translateX(105%);
}

.enter-btn {
    display: inline-block;
    font-size: 24px;
    font-weight: 200;
    font-family: 'depixelKlein', 'pixel32';
}

.enter-btn:hover {
    color: #e38e8e;
}