@font-face { font-family: 'Ubuntu Mono'; src: url('fonts/ubuntu_mono.ttf'); }
@font-face { font-family: 'Noto Sans JP'; src: url('fonts/noto_sans_jp.ttf'); }
@font-face { font-family: 'MPLUS Code Bold'; src: url('fonts/mplus_bold.ttf'); }
@font-face { font-family: 'Boldonse Regular'; src: url('fonts/boldonse_regular.ttf'); }

.corner {
    position: fixed;
    bottom: 1%;
    right: 1%;
    height: 25%;
    cursor: pointer;
    z-index: 1000;
}

#corner-gif {
    height: 100%;
    transform-origin: bottom center;
}

#alert-box {
    position: absolute;
    bottom: 105%;
    right: 0;
    background: #ffc300;
    outline-color: black;
    outline-width: 1vh;
    outline-style: outset;

    color: rgb(0, 0, 0);
    padding: 0.5vh 1vw;
    border-radius: 10vh;
    font-family: 'Ubuntu Mono';
    font-size: 1.2vw;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

#alert-box.animate {
    animation: show-textbox 3s forwards;
}

@keyframes show-textbox {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

body {
    background: #54282b;
    
    background-image: url("shape.svg");
    background-size: 5%;
    background-repeat: repeat;

    text-align: center;
    margin: 0;
    padding: 0;
    animation: background-scroll 160s linear infinite;
}

@keyframes background-scroll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 100%;
    }
}

h1, h2, h3, h4, p {
    margin: 0;
}

h1 { font-family: 'Boldonse Regular'; color: #fff; }
h2 { font-family: 'MPLUS Code Bold'; color: #fff; }
h3 { font-family: 'MPLUS Code Bold'; color: #ffc300; }
h4 { font-family: 'Ubuntu Mono'; color: #ffffffb7; font-weight: 100; font-size: larger; }
p  { font-family: 'Ubuntu Mono'; color: #ffffff60; font-weight: 100; }

.header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    gap: 24px;
    background-color: #8a5258;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.header img {
    max-width: 10%;
}

.header h1 {
    font-size: 80px;
}

.sale {
    background-color: #e42629;
    padding: 16px;
    background-image: repeating-linear-gradient(
        45deg,
        #e94649,
        #e94649 10px,
        #e42629 10px,
        #e42629 20px
    );
    animation: sale-stripes-scroll 1s linear infinite;
}

@keyframes sale-stripes-scroll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 28px 0;
    }
}

.sale h2 {
    text-shadow: 2px 2px 4px #0000007c;
    font-family: 'Boldonse Regular';
    font-size: large;
    font-weight: 100;
}

.sale h1 {
    text-shadow: 2px 2px 4px #0000007c;
    animation: sale-rotate 2s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    animation-delay: -0.5s;
}

.sale h4 {
    text-shadow: 2px 2px 4px #0000007c;
    color: #ffffffd2;
    mix-blend-mode: screen;
}

@keyframes sale-rotate {
    0%, 100% { rotate: -0.5deg; }
    50% { rotate: 0.5deg; }
}

.aboutDiv {
    background-color: #b1761f;
    border-radius: 50px;
    max-width: 800px;
    min-width: 350px;
    width: calc(50vw);
    aspect-ratio: 16/5;
    margin: auto;
    padding: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.title {
    font-size: 70px;
}

.tierDivHolder { margin: 0 10%; }

.tierDiv, .insideTierDiv, .imageInsideTierDiv {
    border-radius: 20px;
    padding: 14px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.tierDiv {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    margin-bottom: 32px;
    text-align: right;
    background: #8a5258;
}

.tierDiv th {
    overflow-x: hidden;
    max-width: 10px; /* ???? */
    border-radius: 20px;
}

.insideTierDiv {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 1fr);
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
    background: #6b3d42;
    min-width: 10%;
    justify-content: start;
}

.imageInsideTierDiv {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    max-width: 300px;
    aspect-ratio: 4/3.8;
    flex-shrink: 0;
    text-align: right;
    background: #8a5258;
}

.imageInsideTierDiv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.imageInsideTierDiv a {
    display: block;
    width: 100%;
    height: 100%;
}

.tierGridImages {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
}

.tierGridImages img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    background: #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.tierInfo {
    min-width: 220px;
    max-width: 320px;
    font-size: x-large;
    text-align: center;
    vertical-align: middle;
}

.footer {
    background-color: #434549;

    background-image: url("heart.svg");
    background-size: 5%;
    background-repeat: repeat;

    animation: background-heart-scroll 360s linear infinite;
}

@keyframes background-heart-scroll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% -100%;
    }
}

.footerContent {
    margin-left: 30%;
    margin-right: 30%;
}

.footer h1 {
    text-align: left;
}