body {
    background-image: url("/IMAGES/SPLASHPAGE/CONCRETEBG.png");
    background-repeat: repeat; 
    background-attachment: fixed;
}

#alphabody {
    padding: 10px 0 200px;
    width: clamp(450px, 50vw, 550px);
    margin-left: auto;
    margin-right: auto;
}

h1 {
    color: #dcdad7;
    font-family: "unifrakturcookbold", Courier;
    font-size: clamp(65px, 7vw, 85px);
    margin-top: 10px;
    margin-bottom: 10px;
    text-shadow:
        4px 0 4px rgba(255, 0, 103, 0.57),
        -4px 0 4px rgba(41, 0, 255, 0.78);
    transition-duration: 0.5s;
}

p {
    color: #dcdad7;
    font-family: "unifrakturcookbold", Courier;
}

P:hover {
    transition-duration: 0.5s;
    text-shadow:
        4px 0 4px rgba(255, 0, 148, 0.66),
        -4px 0 4px rgba(41, 0, 255, 0.75);
}

#homeheader {
    align-content: center;
    justify-content: center;
    display: flex;
    margin: auto;
}

#homeheader: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);
}

.imagerow {
    display: flex;
    width: 100%;
    margin: auto;
}

.imagerow img {
    display: flex;
    width: 70%;
}

.imagerow img:hover {
    animation: horizontal-shaking 0.45s;
}

#title {
    border: dashed purple;
    width: 100%;
}

#buttonbox {
    display: inline-flex;
}

#betabody {
    display: block block;
    height: 100%;
}

/* CONTENT BOX DETAILLS */

.box {
    background-image: url(/IMAGES/HOMEPAGE/HOMEPAGEBOXBG.jpg);
    border: none;
    width: 100%;
    height: 11vh;
    min-height: 50px;
    max-height: 120px;
    border-radius: 10px;
    align-content: center;
    margin: 5% 0 5% 0;
    transition-duration: 0.5s;
    box-shadow:
        15px 40px 15px #090809,
        5px 5px 15px rgba(246, 244, 240, 0.41) inset,
        3px 3px 5px rgba(255, 255, 255, 0.85) inset;
}

.box:hover {
    transition-duration: 0.5s;
    box-shadow:
        -25px 30px 5px #000000,
        -8px 3px 10px rgba(255, 255, 255, 0.68) inset,
        -6px 2px 5px rgba(255, 255, 255, 0.83) inset;
}
.box:hover p {
    transition-duration: 0.6s;
}

.box p {
    font-size: clamp(35px, 3.4vw, 45px);
    text-align: center;
    /*background-color: #3a383a;*/
    border-radius: 3px;
    width: 60%;
    min-width: fit-content;
    padding: 8px 0 8px 0;
    margin: auto;
    transition-duration: 0.6s;
}

#box1:hover {
    background-image: url(/IMAGES/HOMEPAGE/BOX1BG.png);
    background-position: center;
}

#box2:hover {
    background-image: url(/IMAGES/HOMEPAGE/BOX2BG.jpg); 
    background-position: center;
}

#box3:hover {
    background-image: url(/IMAGES/HOMEPAGE/BOX3BG.png);
    background-position: center;
}

#box4:hover {
    background-image: url(/IMAGES/HOMEPAGE/BOX4BG.png);
    background-position: center;
}

#box5:hover {
    background-image: url(/IMAGES/HOMEPAGE/BOX5BG.png); 
    background-position: center;
}

#chatbox, iframe {
    display: block; 
    margin: 30px auto 20px auto;
    width: 90%;

}

#chatbox {
    margin-top: 50px;
    border-radius: 10px;
    align-content: center;
    transition-duration: 0.5s;
    box-shadow:
        15px 40px 15px #090809,
        5px 5px 15px rgba(246, 244, 240, 0.41) inset,
        3px 3px 5px rgba(255, 255, 255, 0.85) inset;
}

@keyframes tilt-n-move-shaking {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(3px, 3px) rotate(3deg);
    }
    50% {
        transform: translate(0, 0) rotate(0eg);
    }
    75% {
        transform: translate(-3px, 3px) rotate(-3deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

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

/* 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;
}

/* END SCROLLBAR STUFF*/

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

/* MAKE ANCHORS UNSTYLED*/

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