body > * {
    user-select: none;
}

body {
    overflow-x: hidden;
    background-color: rgb(20, 23, 34);
    scroll-behavior:smooth;
}

#homebanner {
    background-color: rgb(9, 15, 26);
    border-bottom-style: solid;
    border-bottom-color: rgb(0, 94, 255);
    border-bottom-width: .15vw;
    width: 100vw;
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translate(-50%,0%);
    height: 3.2rem;
}

#avataricon {
    height: 5.2vh;
    width: 2.5vw;
    position: relative;
    left: 2.5%;
    top: 50%;
    transform: translate(-2.5%,-50%);
    -webkit-user-drag: none;
    border-color: rgba(255,255,255,.7);
    border-style: solid;
    border-radius: 100vw;
}

#avataricon:hover {
    cursor: pointer;
}

#loginbutton {
    position: absolute;
    left: 1.5%;
    top: 50%;
    transform: translate(-1.5%,-50%);
    display: none;
}

#homebannerbuttons {
    user-select: none;
    background-color: transparent;
    display: flex;
    flex-direction: horizontal;
    width: fit-content;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 96%;
    transform: translate(-96%,-50%);
    align-content: center;
    white-space: nowrap;
    gap: 3%;
}

#bannername {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;
    font-weight: bold;
    user-select: none;
}

.bannerbutton {
    height: 70%;
    width: fit-content;
    background-color: transparent;
    color: white;
    font-weight: bold;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    border: none;
    border-radius: .7vw;
    transition: background-color .5s;
    cursor: pointer;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.bannerbutton:hover {
    background-color: rgba(128, 128, 128, 0.199);
}

.bannerdivider {
    height: 100%;
    align-content: center;
    background-color: transparent;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: normal;
    color: rgba(255, 255, 255, .5);
    user-select: none;
}


#introbackground {
    max-width: 100%;
    height: auto;
    position: relative;
    top: 0%;
    left: 50%;
    transform: translate(-50%,0%);
    z-index: -3;
}

#intrologo {
    width: 10vw;
    z-index: 10;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%,-30%);
    filter: drop-shadow( 0 .3em 0.3em rgb(13,57,120));
    border-radius: 20vw;
    -webkit-user-drag: none;
}

#flordialife {
    z-index: 1;
    position: absolute;
    left: 50%;
    top: 98%;
    transform: translate(-50%,-98%);
    color: rgb(128, 146, 167);
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 1rem;
}

#blurback {
    display: inline-block;
    width: 100vw;
    height: 120vh;
    position: absolute;
    z-index: -2;
    left: 50%;
    top: 0%;
    transform: translate(-50%,0%);
    backdrop-filter: blur(8px);
}

#introname {
    background-color: transparent;
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%,-75%);
    text-align: center;
    width: 50rem;
    height: 17rem;
    align-content: center;
    color: white;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bolder;
    font-size: clamp(1rem,4vw + 1rem,5rem);
}

#roleplaytext {
    background-image: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
    background-clip: text;

    color: transparent;
}

#roleplaybreaktexter {
    width: 45vw;

    height: 0%;
}

#ownermessage {
    width: 100vw;
    height: 75vh;
    background-color: rgb(20, 23, 34);
    position: relative;
    left: 0%;
    top: -10%;
    transform: translate(-.6%,-10%);
}

#ownerwordcard {
    background-color: rgba(11, 15, 26);
    border-style: solid;
    border-color: rgba(0, 128, 255,.7);
    border-width: .1vw;
    border-left-width: .3vw;
    position: absolute;
    left: 70%;
    top: 60%;
    transform: translate(-70%,-60%);
    width: 35vw;
    height: 38vh;
    border-radius: 1vw;
    color: white;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: left;
    animation: wordsappear;
    animation-timeline: scroll();
}


@keyframes wordsappear {
    0% {
        opacity: 0;
        left: 120%;
        top: 60%;
        transform: translate(-120%,-60%);
    }
    50% {
        opacity: 1;
        left: 70%;
        top: 60%;
        transform: translate(-70%,-60%);
    }
}



#ownertext {
    color: white;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
    font-size: 2rem;
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translate(-50%,-5%);
}

#ownerwordspan {
    background-color: transparent;
    width: 90%;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%,-30%);
    font-size: 1rem;
}

.ownerquote {
    background-image: linear-gradient(180deg, rgb(20,158,245), rgb(30, 74, 235));
    background-clip: text;
    color: transparent;
    font-size: 2rem;
}

#userquotefromowner {
    background-color: transparent;
    width: 90%;
    position: absolute;
    left: 50%;
    top: 90%;
    transform: translate(-50%,-90%);
    text-align: center;
    font-size: 1.2rem;
}

#ownerprofilecard {
    background-color: transparent;
    width: 30vw;
    height: 22vh;
    position: absolute;
    left: 40%;
    top: 50%;
    transform: translate(-40%,-50%);
    animation: profilecardappear;
    animation-timeline: scroll();
}

@keyframes profilecardappear {
    0% {
        opacity: 0;
        left: -40%;
        top: 50%;
        transform: translate(40%,-50%);
    }

    50% {
        opacity: 1;
        left: 40%;
        top: 50%;
        transform: translate(-40%,-50%);
    }
}

#profileicon {
    width: 35%;
    position: absolute;
    left: 0%;
    top: 50%;
    transform: translate(0%,-50%);
    -webkit-user-drag: none;
}

#ownerprofilename {
    position: absolute;
    left: 2%;
    top: 105%;
    transform: translate(-2%,-105%);
    width: 32%;
    transform: scaleX(1.15);
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1rem;
    align-content: center;
    text-align: center;
}

#ownerrank {
    position: absolute;
    left: -5%;
    top: 135%;
    transform: translate(5%,-135%);
    background-clip: text;
    background-image: linear-gradient(180deg, rgb(20,158,245), rgb(30, 74, 235));
    color: transparent;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: .75rem;
    font-weight: bold;
    align-content: center;
    text-align: center;
}

#whatweofferbody {
    background-color: transparent;
    display: inline-block;
    width: 100vw;
    height: fit-content;
    position: relative;
    left: 50%;
    top: 0%;
    transform: translate(-50%, 0%);
}

#whatweoffertext {
    color: white;
    background-color: transparent;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
    font-size: 2rem;
    position: sticky;
    left: 0%;
    top: 0%;
    width: 100vw;
    height: 10vh;
    transform: translate(0%,0%);
    text-align: center;
    align-content:end;
}

#offerbreak {
    width: 10vw;
}

#offerboxes {
    background-color: transparent;
    display: flex;
    flex-direction: horizontal;
    flex-wrap: wrap;
    width: 90vw;
    height: 50vh;
    position: relative;
    top: 5%;
    left: 50%;
    transform: translate(-50%, 5%);
    z-index: -1;
    justify-content: center;
    gap: 5%;
}


.offerbox {
    width: 20vw;
    display: block;
    height: 17vh;
    border-radius: 1.5vw;
    background-image: linear-gradient(90deg, rgb(13, 16, 24));
    border-style: solid;
    border-color: rgb(28, 33, 48);
    border-width: 0.15vw;
    flex: 0 0 calc((100% - (3 * 5%))/3);
    margin-top: 1.2%;
    margin-bottom: 1.2%;
    animation: fadein linear;
    animation-timeline: scroll();
    animation-delay: calc(100ms * sibling-index());
    transition: border-color .5s, scale .5s ease-in-out ;
}

.offerbox:hover {
    border-color: rgba(0, 128, 255, .7) ;
    scale: 1.05;
}

.headeroffer {
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    background-color: transparent;
    width: 90%;
    height: 25%;
    text-align: left;
    align-content: center;
    position: relative;
    left: 50%;
    top: 10%;
    transform: translate(-50%,-10%);
}

.offersep {
    width: 90%;
    position: absolute;
    left: 50%;
    top: 27%;
    transform: translate(-50%,-27%);
}

.subheaderoffer {
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-weight: normal;
    font-size: .85rem;
    color: rgba(255, 255, 255, 0.649);
    background-color: transparent;
    width: 90%;
    height: 60%;
    text-align: left;
    align-content:normal;
    position: relative;
    left: 50%;
    top: 30%;
    transform: translate(-50%,-30%);
}


@keyframes fadein {
    from {
        opacity: 0;
        color: rgba(255,255,255,0);
        transform: translateY(30vh);
    }
    to {
        opacity: 1;
        color: rgb(255, 255, 255);
        transform: translateY(0vh);
    }
}

#quickbar {
    width: 5vw;
    height: fit-content;
    z-index: 1000000;
    background-color: rgba(255, 255, 255, 0.212);
    border-radius: .5vw;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.644);
    border-width: .15vw;
    position: absolute;
    left: 1%;
    top: 7%;
    transform: translate(-1%,7%);
    opacity: 0;
}

#logout {
    margin-top: .5vh;
    margin-bottom: .5vh;
    text-align: center;
    align-content: center;
    font-family: Arial, Helvetica, sans-serif;
    color: transparent;
    -webkit-text-stroke: .05vw red;
}

#logout:hover {
    cursor: pointer;
}

/* WORK ON MAKING IT COMPATIABLE WITH MOST DEVICES AND MAKE IT LOOK GOOD, 6/3/2026 OBJECTIVE*/

#offerbackgroundimage {
    background-color: rgb(12, 16, 27);
    position: absolute;
    z-index: -10;
    width: 100vw;
    height: 50.7vh;
    left: 50%;
    top: 412%;
    transform: translate(-50%,-412%);
}

#offergrid {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-image:
    linear-gradient(to right, rgba(160, 159, 159, 0.03) .1vw, transparent .1vw),
    linear-gradient(to bottom, rgba(160, 159, 159, 0.03) .1vw, transparent .1vw);
    background-size: 3vw 3vw;
    background-repeat: repeat;
    border-style: solid;
    border-width: .1vw;
    border-color: rgba(255, 255, 255, 0.185);
}