body {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    background-image: url(Untitled.png);
    background-size: cover;
    font-family: 'Times New Roman', Times, serif;
    overflow-x: hidden;

    div {
        display: flex;
        flex-direction: column;
        width: 300px;
        transition: 2s ease-in-out;

        >* {
            transition: 2s ease-in-out;
        }
    }
}

h1 {
    font-size: 1.1rem;
    transform: scaleX(5) translateX(40%);
    padding-bottom: 6vh;
}

ul {
    color: blue;
    text-shadow: 0 1px 0 turquoise;

    li {
        margin-bottom: 1.2vh;
    }
}

.old {
    filter: blur(1px);
}

.new {
    color: blue;
    text-shadow: 0 1px 0 black, 1px 0 turquoise;
    font-weight: bold;
    filter: blur(0.25px) drop-shadow(0px 4px 2px blue) drop-shadow(0px 8px 3px white) drop-shadow(0px -3px 3px white);
    letter-spacing: 0.2cap;
    text-align: end;
    margin-bottom: 10vh;
    margin-top: 2vh;
    transform: scaleY(3);

}

img {
    width: 100%;
}

#middleCol {
    align-self: center;
    margin-left: 20vw;
    max-height: 80vh;
    overflow-x: clip;
    overflow-y: scroll;

    p {
        padding: 0.5%;
    }

    z-index: 100;
    backdrop-filter: hue-rotate(90deg) blur(3px);

}

a {
    text-decoration: none;
}

a:visited {
    color: inherit;
    text-decoration: none;
}



@media screen and (max-width: 992px) {
    body {
        background-size: auto 200%;
        zoom: 110%;
        font-size: 2.2vh;

    }

    :root {
        font-size: 2vh;
    }

    h1 {
        max-width: 20%;
    }
}

@media screen and (max-width: 600px) {
    body {
        width: 100%;
    }

    #stuff {
        width: fit-content;
        text-align: right !important;
        top: 60vh !important;
        right: 5vw;
    }
}

.gooey {
    pointer-events: none;
    font-size: 40vh;
    filter: inherit;
    view-transition-name: gooFade;
}

#stuff {
    pointer-events: none;
    position: fixed;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    top: 30vh;
    filter: url('filters.xml#goo');
    color: aqua;
    text-align: center;
}

.hidden {
    display: none;
}

::view-transition-group(gooFade) {
    filter: url('filters.xml#goo');
    animation: 5s;
    pointer-events: none;
}

::view-transition {
    pointer-events: none;
}

.scroll::-webkit-scrollbar {
    display: none;
}

.scroll {
    scrollbar-width: none;
}

.mouseEffect{
    color: blue;
    text-align: center;
    vertical-align: middle;
    position: fixed;
    pointer-events: none;
    z-index: 100;
    backdrop-filter: hue-rotate(90deg) blur(1px) contrast(1.1);
}
.saturateBD{
    backdrop-filter:saturate(5);
}