:root {
    --fifthCol: #72EFDD;
    --type-transparency: 0.7;
    --drop-shadow-width: 5px;
    --drop-shadow-width-minus: -5px;
}


@keyframes scroll {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 165px 110px;
    }
}

@font-face {
    font-family: "Yugi font 1";
    src: url("/resuorces/MatrixRegularSmallCaps.ttf");
}

@font-face {
    font-family: "Yugi font 2";
    src: url("/resuorces/Yu-Gi-Oh!ITCStoneSerifSmallCapsBold.ttf");
}

@font-face {
    font-family: "Yugi font 3";
    src: url("/resuorces/ITC Stone Serif Bold.ttf");
}

body {
    position: relative;
    width: 100dvw;
    height: 100%;
    background-color: #2D3C9F !important;
    top: 0%;
    left: 0%;
    margin: 0%;

    * {
        h7 {
            font-family: "Yugi font 1";
            font-weight: 700;
            filter: drop-shadow(3px 3px 1px black);
        }

        p,
        a {
            font-family: "Yugi font 3";
            font-weight: 700;
        }
    }

    #real {
        position: fixed;
        height: 100vh;
        width: 100vw;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 20;

        /*img {
            height: 80%;
        }/**/
        img {
            height: 100%;
            width: 100%;
        }

    }
}

.small-kursor {
    * {
        cursor: url("/resuorces/kursor.ico"), auto !important;
    }
}

.mid-kursor {
    * {
        cursor: url("/resuorces/kursor_mid.ico"), auto !important;
    }
}

.large-kursor {
    * {
        cursor: url("/resuorces/kursor_large.ico"), auto !important;
    }
}

#background::before {
    z-index: 0;
    content: "";
    display: grid;
    width: 100vw;
    height: 100vh;
    background-image: url("/resuorces/SiteBackgroundOriginaltile.webp");
    position: fixed;
    background-position: center;
    opacity: 60%;
    transform: scale(1.3);

}

.animated::before {
    animation: scroll 2s linear infinite;
}



#page-content {
    position: relative;
    height: 100%;
    align-items: center;
    margin: auto;
    display: grid;
}

#landing {
    margin: auto;
    align-items: center;
    display: inline-grid;
    justify-items: center;
    height: 77vh;
    aspect-ratio: 1 / 0.6;
    padding: 11vh 0;

    #logo {
        width: 70%;
        filter: drop-shadow(var(--drop-shadow-width) var(--drop-shadow-width) 0px white) drop-shadow(var(--drop-shadow-width-minus) var(--drop-shadow-width-minus) 0px white) drop-shadow(var(--drop-shadow-width) var(--drop-shadow-width-minus) 0px white) drop-shadow(var(--drop-shadow-width-minus) var(--drop-shadow-width) 0px white);
        margin-bottom: 7%;

        :hover {
            transform: scale(300%);
        }
    }

    #about-button {
        height: 8vh;

        img {
            width: auto;
            height: 100%;
        }
    }

    #about {
        position: fixed;
        height: 100vh;
        width: 100vw;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;

        #about-content {
            position: absolute;
            background-color: rgba(11, 10, 26, 0.849);
            height: 80%;
            width: 60%;
            border-radius: 25px;
            color: white;
            overflow: scroll;
            scrollbar-width: none;
            text-align: center;
            font-size: 2.7vh;

            :nth-child(2) {
                padding-top: 5%;
            }

            p {
                padding: 0% 3%;
                margin: 2%;
            }



            a:link {
                color: lightblue;
            }
        }
    }
}

.modal-close {
    position: absolute;
    width: 5%;
    margin: 0;
    padding: 0;
    top: 2%;
    right: 2%;

    img {
        width: 100%;
    }
}

button {
    width: 50%;
    margin: 1%;
    background-color: transparent;
    border-style: none;
    height: auto;
    filter: drop-shadow(5px 10px 2px rgba(0, 0, 0, 0.507));

    img {
        width: 100%;
    }

    :active {
        transform: translateY(5%) scaleY(95%);
    }

    :hover {
        filter: brightness(50%);
    }
}

.landing-butt {
    transform: translateX(-7%);
}

#scary {
    z-index: 10;
    display: none;
    filter: drop-shadow(5px 10px 5px rgba(0, 0, 0, 0.507));
    position: fixed;
    top: 10%;
    width: 60vw;
}

#web-body {
    margin: auto;
    padding: 5%;
    border-radius: 5px;
    background-color: #2d3c9fc4;
    width: 80%;
    height: 100%;
}

#return,
#card-style-changer,
#animation-toggle {
    position: fixed;
    padding: 1vh;
    height: 15vh;
    font-size: 100%;
    width: auto;
    z-index: 9;

    img {
        height: 100%;
    }
}

#return:hover,
#card-style-changer:hover,
#animation-toggle:hover,
.filter-button:hover {
    filter: brightness(50%) drop-shadow(5px 10px 2px rgba(0, 0, 0, 0.507));
}


#animation-toggle {
    bottom: 1vh;
    right: 1vw;
}

#settings-window {
    position: fixed;
    width: 30vw;
    font-size: 2vh;
    height: 45vh;
    margin: 2vh;
    padding: 3vh;
    z-index: 6;
    bottom: 1vh;
    right: 1vw;
    color: white;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.59);
    font-family: "Yugi Font 3";

    label {
        width: 50%;
    }

    input#kursor-setter {
        width: 50%;
    }

    .setting-option {
        margin: 1.2vh 0;
        display: flex;
        justify-content: space-between;

        #volume-number {
            width: 20%;
        }
    }
}

#return,
#card-style-changer {
    left: 1vw;
}

#return {
    top: 1vw;
}

#card-style-changer {
    bottom: 1vw;
}

.anime {
    background-image: url(/resuorces/button5.webp);
}

.game {
    background-image: url(/resuorces/button6.webp);
}

.hide,
.hider {
    width: 0% !important;
    height: 0% !important;
    margin: 0% !important;
    padding: 0% !important;
    font-size: 0%;

    transition: ease-in 0ms !important;
}

div#video-container {
    top: 0%;
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    background: black;
    align-items: flex-start;
    z-index: 12;

    video {
        top: 0%;
        height: 100vh;
    }
}