body {
    margin: 0;
    padding: 0;
}

/*FONT LINK*/
@font-face {
    font-family: 'Zpix';
    src: url(/fonts/zpix.ttf)
}

@font-face {
    font-family: 'Yuji';
    src: url(/fonts/YujiSyuku-Regular.ttf)
}


/*STYLING OF ENTIRE PAGE*/

body {
    font-family: Yuji;
    color: #ffffff;
    margin: 0;
    margin-bottom: 0;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* RBackground filters in ::before*/
}
body::before {
    content: "";
    position: fixed;
    inset: 0; /* Covers entire body */
    z-index: -1; /* Sends it behind content */
    /* Your original background styles */
    background-image: 
        linear-gradient(120deg, rgb(255, 255, 255), rgb(255, 255, 255), rgba(255, 255, 255, 0.858), rgba(136, 239, 255, 0.447)),
        url('/images/bg_polka.png');
    background-repeat: no-repeat, repeat;
    
    /* Your weird effects (now isolated) */
    clip-path: polygon(
        0% 30%,
        100% 10%,
        70% 100%,
        20% 80%
    );

}

/*NAVBAR*/

.navbar {
    height: 80%;
    width: 200px;
    font-family: yuji;
    overflow-x:visible;
    float:left;
    position: absolute;
    margin-top: 13%;
    margin-left: 2vw;
    width: 7vw;
    text-align: center;

}

#iframe_navbar {
    width: 300px;
    position: fixed;
}

.button {
    background-image:  linear-gradient(120deg, rgba(191, 218, 248, 0.589),  rgba(136, 239, 255, 0.447)),
    url('/images/bg_cross.png');
    border-style: solid;
    border-color: rgb(56, 68, 122);
    border-width: 2px;
    height: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    width: 170px;
    margin-bottom: 70px;
    overflow-x: visible;
}

.button:hover {
    background-image:  linear-gradient(120deg, rgba(255, 255, 255, 0.685),  rgba(243, 253, 255, 0.74)),
    url('/images/bg_cross.png');
}

@font-face {
    font-family: 'Yuji';
    src: url(/fonts/YujiSyuku-Regular.ttf);
}

/*PAGE BORDERS, BOTTOM CAN BE FINICKY WHEN ZOOMING IN AND OUT*/
.top-border {
    width: 100vw;
    height: 80px;
    overflow-x: hidden;
    background: linear-gradient(-90deg, #8ecaff 0%, #cff2ff 50%, #e1f8ff 100%);
    font-size: xx-large;
    overflow-y: hidden;
    margin-bottom: 13px;
    box-shadow: 0px 4px 0px 0px rgba(0,67,142,0.68);
    -webkit-box-shadow: 0px 4px 0px 0px rgba(0,67,142,0.68);
    -moz-box-shadow: 0px 4px 0px 0px rgba(0,67,142,0.68);
}

.bottom-border {
    width: 100vw;
    height: 80px;
    bottom: -1tg;
    font-size: xx-large;
    background: linear-gradient(90deg, #8ecaff 0%, #cff2ff 50%, #e1f8ff 100%);
    overflow-y: hidden;
    box-shadow: 0px -5px 0px 0px rgba(0,67,142,0.68);
    -webkit-box-shadow: 0px -5px 0px 0px rgba(0,67,142,0.68);
    -moz-box-shadow: 0px -5px 0px 0px rgba(0,67,142,0.68);
}