/* PAGE FORMATTING */

body {
    background-image: url("https://files.catbox.moe/01g7e6.png");
    background-repeat: repeat;
    background-attachment: fixed;
}

#alphabody {
    width: clamp(450px, 40vw, 700px);
    margin: 5vh auto 30vh auto;
}

#header {
    background-color: #1b1919;
    background-image: url(https://files.catbox.moe/6ot4ue.JPG);
    background-size: cover;
    background-attachment: fixed;
    padding: 5px 5% 5px 5%;
    border: solid 2px #dcdad7;
    border-radius: 10px;
}

.box {
    background-color: #1b1919;
    background-image: url(https://files.catbox.moe/6ot4ue.JPG);
    background-size: cover;
    background-attachment: fixed;
    border: solid 1px #dcdad7;
    border-radius: 10px;
    padding: 10px 10% 20px 10%;
    margin: 5vh auto 5vh auto;
}

.contentbody {
    padding-bottom: 20px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/*  TEXT FORMATTING */

h1 {
    color: #dcdad7;
    font-family: "typewriter_royal_200_trasheRg";
    font-size: clamp(40px, 4vw, 60px);
}

p {
    color: #dcdad7;
    font-family: "courier_primeregular";
    font-size: 1.2em;
    font-style: bold;
}

.bigtext {
    font-size: 1.5em;
    font-style: bold;
}

.funtext {
    background-color: rgba(178, 43, 213, 0.19);
}

.subheader {
    font-size: 2em;
    font-style: bold;
    text-align: center;
}

#header h1 {
    text-align: center;
    margin: auto;
    transition-duration: 0.2s;
    text-shadow:
        4px 0 4px rgba(255, 0, 103, 0.57),
        -4px 0 4px rgba(41, 0, 255, 0.78);
}

#header:hover h1 {
    transition-duration: 0.5s;
    text-shadow:
        8px 0 4px rgba(255, 0, 103, 0.57),
        -8px 0 4px rgba(41, 0, 255, 0.78);
}

::selection {
    color: #1d1c1c;
    background: #f4f4f4;
}

/* IMAGE FORMATTING */

.homelink img {
    display: block;
    margin: 5px auto 10px auto;
}
.homelink:hover img {
    animation: vertical-shaking 0.65s infinite;
}

.fullimage {
    width: 100%;
    margin: auto;
    display: block;
    padding: 0 0 20px 0;
}

.inlineimg {
    display: flex;
    justify-content: space-evenly;
}

.inlineimg img {
    margin: auto;
    max-width: 40%;
}

.dividerimg {
    width: 100%;
    display: inline-flex;
}

.dividerrow {
    justify-content: center;
    display: flex;
}

.dividerrow img {
    width: auto;
    height: 60px;
}

/* SCROLLBAR STUFF*/

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

::-webkit-scrollbar-track {
    background: #1b1a1b;
}

::-webkit-scrollbar-thumb {
    background: #645d66;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #876588;
}

/* LINK STYLES */

.reset-a,
.reset-a:hover,
.reset-a:visited,
.reset-a:focus,
.reset-a:active {
    text-decoration: none;
    color: inherit;
    outline: 0;
    cursor: pointer;
}

.vislink {
    color: #dcdad7;
    cursor: pointer;
}

.vislink:hover {
    color: #dcdad7;
    cursor: pointer;
    text-shadow: 0 0 10px #dcdad7;
}

.vislink:visited {
    color: #d76262;
    cursor: pointer;
}

/* ANIMATIONS */

@keyframes vertical-shaking {
    0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(5px);
    }
    50% {
        transform: translateY(-5px);
    }
    75% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes horizontal-shaking {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(5px);
    }
    50% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes slow-shake {
    10% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(5px);
    }
    30% {
        transform: translateX(-5px);
    }
    40% {
        transform: translateX(5px);
    }
    60% {
        transform: translateX(0);
    }
}

/*
  animation: color-change 1s infinite;
*/

@keyframes color-change {
    15% {
        color: #9400ff;
    }
    30% {
        color: #1c1b1d;
    }
    45% {
        color: #1488cd;
    }
    60% {
        color: #1c1b1d;
    }
    75% {
        color: #cc2e4c;
    }
    100% {
        color: #1c1b1d;
    }
}