@font-face {
    font-family: 'Freaky';
    font-display: auto;
    src: url("../media/fonts/PAPYRUS.TTF");
}

@font-face {
    font-family: 'Xahn';
    font-display: auto;
    src: url("../media/fonts/XanhMono.ttf");
}

@font-face {
    font-family: 'kredit';
    font-display: auto;
    src: url("../media/fonts/kredit/Kredit.otf");
}

@font-face {
    font-family: 'kredit-back';
    font-display: auto;
    src: url("../media/fonts/kredit/Kredit-Back.otf");
}

@font-face {
    font-family: 'kredit-front';
    font-display: auto;
    src: url("../media/fonts/kredit/Kredit-Front.otf");
}

@font-face {
    font-family: 'kredit-shine';
    font-display: auto;
    src: url("../media/fonts/kredit/Kredit-Shine.otf");
}

:root {
    --black: #121212;
    --white: #fffafa;
}

body {
    background-color: var(--white);
    color: var(--black);
    margin: 0;
    padding: 0;
    font-size: 16px; /* Set base font size */
}

h1 {
    font-family: 'Freaky';
    font-weight: 400;
    font-size: 4.6875rem; /* 75px / 16 = 4.6875rem */
    width: 100%;
    text-align: center;
    margin-top: 3.125rem; /* 50px / 16 = 3.125rem */
}

h2 {
    font-family: 'Freaky';
    font-weight: 400;
    font-size: 3rem;
    width: 100%;
    text-align: center;
    margin-top: 2rem; 
}

p.centered {
    font-family: 'Freaky';
    font-weight: 400;
    font-size: 1.25rem; /* 20px / 16 = 1.25rem */
    text-align: center;
}

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

input {
    font-size: 1.25rem;
    font-family: 'Freaky';
    font-weight: 200;
    display: flex;
    text-align: center;
    width: 40%;
    background-color: var(--white);
}

input.num {
    font-size: 2rem;
}

#site-index {
    font-size: 1.5rem;
    text-decoration: none;
    width: 18rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: auto;
    margin: auto;
    margin-top: 5rem;

    border: var(--black) dotted 0.1rem;
}

#index-text {
    font-family: 'Xahn';
    font-weight: 400;
}

#list-text li a {
    text-decoration: none;
    color: var(--black);
}

ul {
    font-family: 'Xahn';
    font-weight: 400;
    list-style-type: "> ";
    list-style-position: outside;
}

#moe {
    width: auto;
    margin: auto;
    margin-top: 5rem;
    image-rendering: pixelated;
}

#freaky {
    width: 4.5rem; /* 72px / 16 = 4.5rem */
    height: 4.5rem; /* 72px / 16 = 4.5rem */
    image-rendering: optimizeQuality;
    display: block;
    margin: auto;
}

.cc {
    font-family: 'kredit-front';
    font-style: normal;
    font-size: 4rem;
    font-weight: 800;
    text-align: center;
    margin: auto;
    padding: auto;
    margin-top: 10rem;
    display: table;
    justify-content: center;
    width: 80%;
    cursor: default;
}

#cvv {
    font-family: 'kredit-back';
    font-style: italic;
    font-weight: 100;
}

.tt {
    position: relative;
}

.tt::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #121212d0;
    color: var(--white);
    padding: 4px 8px;

    font-size: 18px;
    cursor: default;

    border-radius: 10px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
}

.tt:hover::after {
    opacity: 1;
    visibility: visible;
}

footer a {
    font-family: 'Freaky';
    font-weight: 800;
    font-size: larger;
    color: var(--black);
    text-decoration: none;
    padding-left: 0.5rem;
}

#script_output {
    margin: auto;
    margin-top: 5rem;
    padding: auto;
    width: 75%;
}

/* Responsive design */
@media (max-width: 768px) {
    h1 {
        font-size: 3.75rem; /* 60px / 16 = 3.75rem */
        margin-top: 2.5rem; /* 40px / 16 = 2.5rem */
    }

    p.centered {
        font-size: 1.125rem; /* 18px / 16 = 1.125rem */
    }

    #freaky {
        width: 3.75rem; /* 60px / 16 = 3.75rem */
        height: 3.75rem; /* 60px / 16 = 3.75rem */
    }

    .cc {
        font-size: 3.75rem; /* 60px / 16 = 3.75rem */
        margin-top: 2.5rem; /* 40px / 16 = 2.5rem */
    }
}