@font-face {
    font-family: "Determination";
    src: url("/_fonts/DTM-Mono.otf") format("opentype");
}

:root {
    --spam-size: 150px;

    --pink: #ffa5c1;
    --yellow: #fff002;
    --white: rgb(221, 220, 213);
    --black: rgb(0, 0, 0);
    --purple: #3d023d;
}


body {
    background-color: var(--black);
    background-image: url("../_img/bg.gif");

    color: var(--white);

    font-family: "Determination", "Ms PGothic", "Quadrunde", 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--purple) var(--black);
    transition: background-color 0.3s, padding 0.3s, size 0.3s;

    box-sizing: border-box;
}

.container {
    max-width: 700px;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

#header-top {
    font-size: 1em;
    text-align: center;
}

#header-main {
    position: relative;
    font-size: 3em;
    line-height: 0.9em;
    text-align: center;
    max-width: 80%;
}



#fly-left {
    position: absolute;
    left: 0px;
    bottom: 0px;
}

#fly-right {
    position: absolute;
    right: 0px;
    bottom: 0px;
}


.talkbox {
    background-color: var(--black);
    padding: 15px;
    padding-left: 30px;
    border: 2px solid var(--white);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ast {
    position: absolute;
    transform: translateX(-15px);
}

.pink {
    color: var(--pink);
}

.yellow {
    color: var(--yellow);
}



#attitude {
    width: 300px;
    height: auto;
    max-width: 90%;
    align-self: center;
}


#keygen {
    width: 300px;
    height: auto;
    max-width: 90%;
    align-self: center;
}


#back {
    text-align: center;
}

#back a {
    color: var(--yellow);
    text-decoration: none;
}

#back a:hover {
    color: var(--pink);
    text-decoration: underline;
}


.spams, .misc {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.spams img {
    height: var(--spam-size);
}


#smile {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    opacity: 0;
    transition: opacity 1s ease-in;
}

#smile:hover {
    opacity: 0.7;
}


#buttons img {
    width: 88px;
    height: 31px;
}

#blinkies img {
    width: 150px;
    height: 20px;
}

#stamps img {
    width: 99px;
    height: 56px;
}

#dividers img {
    width: 230px;
    height: auto;
}

@media only screen and (max-width: 700px) {

    :root {
        --spam-size: 200px;
    }

}