@import 'compass/css3';
@import url('https://fonts.googleapis.com/css?family=Chewy|Gloria+Hallelujah');

body {
    overflow: hidden;
}
/* Section 1 */
.home-Container {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}

.home-L {
    width: 60vw;
    justify-content: center;
}

.glowy-blob {
    position: absolute;
    left: 30vw;
    top: 30vw;
    filter: url('#goo');
}

    .glowy-blob div {
        position: absolute;
        left: 25vw;
        top: 25vw;
        transform: translate(-50%, -50%);
        background: black;
        border-radius: 50%;
        box-shadow: black;
    }

.logo-img {
    position: absolute;
    left: 7.5vw;
    top: 7.5vw;
    height: 45vw;
    width: auto;
    pointer-events: none;
}

.logo-img-extra {
    position: absolute;
    pointer-events: none;
    left: 14vw;
    top: 14vw;
}

/* Logo bg rotation */
@keyframes rotate-logo-rev {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0);
    }
}

@keyframes rotate-logo-rev2 {
    0% {
        transform: rotate(405deg);
    }

    50% {
        transform: rotate(225deg);
    }

    100% {
        transform: rotate(45deg);
    }
}

.home-R {
    position: absolute;
    right: 10vw;
    display: flex;
    flex-direction: column;
    width: 40vw;
    align-items: center;
}

.Welc {
    font-family: 'CF1', 'Sans Serif Collection';
    font-size: 2.75vw;
    font-weight: normal;
    text-shadow: 0px 5px 7.5px rgba(0, 0, 0, 0.75);
    transition: all 0.3s ease;
    top: 150px;
    cursor: default;
    text-transform: uppercase;
}

    .Welc:hover {
        color: #7a7a7a;
        transform: scale(1.1);
    }

.idk {
    font-family: 'CF1', 'Sans Serif Collection';
    color: cyan;
    font-size: 4.5vw;
    font-weight: normal;
    text-shadow: 0px 5px 7.5px rgba(0, 0, 0, 0.75);
    top: 150px;
    cursor: default;
    text-transform: uppercase;
}

.bottom-right-informative {
    height: 7.5vw;
    width: auto;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-bottom: 15vh;
    margin-right: 5vw;
    pointer-events: none;
}

/* Arrow Under Text */
.arrow-home {
    top: 20px;
    --arrow-size: 3vw;
    --arrow-color: black;
    --arrow-color-hover: #7a7a7a;
    position: relative;
    display: inline-flex;
    transform: rotate(90deg) scale(1.25);
    vertical-align: middle;
    width: var(--arrow-size);
    height: var(--arrow-size);
    overflow: hidden;
}

    .arrow-home::after {
        content: '';
        position: absolute;
        top: 50%;
        box-sizing: border-box;
        display: inline-block;
        width: calc(var(--arrow-size) * 0.7071);
        height: calc(var(--arrow-size) * 0.7071);
        border-top: calc(var(--arrow-size) / 5) solid var(--arrow-color);
        transition: all 150ms ease-in-out;
    }

    .arrow-home.right::after {
        right: calc(var(--arrow-size) / 5);
        border-right: calc(var(--arrow-size) / 5) solid var(--arrow-color);
        transform-origin: top right;
        transform: rotate(45deg);
    }

    .arrow-home.right:hover::after {
        box-shadow: calc(var(--arrow-size) / 8) calc(var(--arrow-size) / -8) 0 var(--arrow-color);
    }

a:hover .arrow-home.right::after {
    border-color: var(--arrow-color-hover);
}

/* Section 2 */
.home-Container2 {
    background-color: transparent;
    position: relative;
    height: 90vh;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.top-Grid {
    margin-top: 7.5rem;
    padding-left: 15.5vw;
    padding-right: 16.5vw;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 7vw;
}

.div1 {
    grid-area: 1 / 1 / 2 / 2;
}

.div2 {
    grid-area: 1 / 2 / 2 / 3;
}

.div3 {
    grid-area: 1 / 4 / 2 / 5;
}

.div4 {
    grid-area: 1 / 5 / 2 / 6;
}

.informative {
    height: 15vh;
    width: auto;
    pointer-events: none;
}

.bottom-grid {
    display: flex;
    gap: 5vw;
    justify-content: center;
    align-items: center;
    height: 60vh;
    padding: 0 5vw 0 5vw;
}

.videozone {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
}

    .videozone h1 {
        all: unset;
        font-family: CF1;
        margin: .5vw 0 0 0;
    }

.videobox {
    position: relative;
    --videowidth: 35vw;
    margin: 0 auto 0 auto;
    width: var(--videowidth);
    height: calc(var(--videowidth) * 9 / 16);
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.latestzone {
    display: flex;
    flex-direction: column;
    padding: 1vw;
    background-color: black;
    border-radius: 25px;
    box-shadow: 0 0 15px rgba(0, 255, 255, 1);
    height: 40vh;
    width: 40%;
}

    .latestzone h2 {
        font-family: CF1;
        color: white;
        margin-bottom: 1vw;
        text-align: center;
        cursor: default;
    }

    .latestzone ul {
        padding: 0;
        overflow-y: auto;
        padding: 0 .5vw 0 1vw;
        max-height: calc(40vh - 2vw);
    }

        /* List Inside the List */
        .latestzone ul ul {
            padding-left: 2em;
        }

            .latestzone ul ul li {
                padding: .5vw 0 0 0;
                margin: 0;
                font-size: 0.75vw;
                color: black;
                background-color: transparent;
            }

    .latestzone li {
        margin-bottom: 1vw;
        height: auto;
        padding: 0.5vw;
        background-color: white;
        border-radius: 15px;
        pointer-events: none;
    }

        .latestzone li h3 {
            font-size: 1.2vw;
            color: cyan;
            text-align: center;
            -webkit-text-stroke: 1px;
            -webkit-text-stroke-color: black;
        }

        .latestzone li p {
            margin: 0.5vw 0 0 0;
            text-align: left;
            font-size: .75vw;
            color: #1f1f1f;
            padding-left: 1.25em;
            position: relative;
        }

            .latestzone li p::before {
                content: "•";
                color: black;
                font-size: 1.2vw;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }

    .latestzone ul::-webkit-scrollbar {
        width: .5vw;
    }

    .latestzone ul::-webkit-scrollbar-track {
        background: #2a2a2a;
    }

    .latestzone ul::-webkit-scrollbar-thumb {
        background-color: cyan;
    }

        .latestzone ul::-webkit-scrollbar-thumb:hover {
            background: white;
        }

/* site hue change */
@keyframes huerot {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}