* {
    color: #FFFFFF;
    scroll-snap-type: y mandatory;
    margin: 0;
    padding: 0;
    font-size: calc(15px + 0.390625vw);
    box-sizing: border-box;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

html {
    scroll-behavior: smooth;
    background: rgb(25, 0, 51);
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    scrollbar-color: rgb(147, 112, 219) rgb(25, 0, 51);
    scrollbar-width: thin;
}

html::-webkit-scrollbar { /* Chromium */
    width: 10px;
}

html::-webkit-scrollbar-track { /* Chromium */
    background: rgb(25, 0, 51);
    box-shadow: inset 1px 1px 5px black;
}

html::-webkit-scrollbar-thumb { /* Chromium */
    background: linear-gradient(0deg, rgb(147, 112, 219), rgb(75, 0, 130));
    border-radius: 10px;
    text-shadow: 2px 2px 5px black;
}

html::-webkit-scrollbar-thumb:hover { /* Chromium */
    background: linear-gradient(0deg, rgb(160, 125, 232), rgb(90, 20, 150));
    border-radius: 10px;
}

html::-webkit-scrollbar-thumb:active { /* Chromium */
    background: linear-gradient(0deg, rgb(75, 0, 130), rgb(50, 0, 100));
    border-radius: 10px;
}

section {
    height: 100vh;
    background: radial-gradient(circle, rgb(147, 112, 219) 0%, rgb(75, 0, 130) 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 3;
    scroll-snap-align: start;
    overflow: hidden;
}

.page {
    width: 80%;
}

section > .page > img {
    border: none;
    margin-top: 25px;
    width: 350px;
    height: 200px;
    border-radius: 5px 5px 50px 50px;
    border: 2px solid rgb(147, 112, 219);
    background: rgb(25, 0, 51);
    box-shadow: 
        0 4px 8px rgba(147, 112, 219, 0.5),
        0 0 15px rgba(147, 112, 219, 0.3);
    transition: transform 0.3s ease;
}

section > .page > img:hover {
    transform: scale(1.05);
}

section p img {
    width: 48px;
    height: 48px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
    border: none;
}

a {
    color: rgb(255, 215, 0);
    text-decoration: none;
}

a:hover {
    color: rgb(218, 165, 32);
    cursor: pointer;
}

h1 {
    color: rgb(200, 162, 200);
    font-size: 4rem;
    font-family: 'GarudaFight', fantasy !important; /* Force GarudaFight */
    line-height: 1.5;
    text-shadow: 2px 2px 5px black, 0 0 10px rgb(200, 162, 200);
}

h2 {
    color: rgb(200, 162, 200);
    font-family: 'GarudaFight', fantasy !important; /* Force GarudaFight */
    border-radius: 10px;
    text-shadow: 2px 2px 5px black, 0 0 10px rgb(200, 162, 200);
    font-size: calc(76px + 0.390625vw);
    line-height: 1.5;
}

@font-face {
    font-family: 'GarudaFight';
    src: url('font/GarudaFight.otf') format('opentype'),
         url('font/garudafight.otf') format('opentype'), /* Fallback for case sensitivity */
         url('fonts/GarudaFight.otf') format('opentype'), /* Fallback for common folder name */
         url('fonts/garudafight.otf') format('opentype'); /* Fallback for case and folder */
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Improve loading behavior */
}

@media (max-width: 600px) {
    h1 {
        font-size: 2.5rem;
    }
    h2 {
        font-size: calc(60px + 0.390625vw);
    }
    section > .page > img {
        width: 280px;
        height: 160px;
    }
    section p img {
        width: 40px;
        height: 40px;
        margin-left: 8px;
        margin-right: 8px;
        margin-top: 15px;
    }
}