body {
    background-color: rgb(255, 255, 255);
    cursor: url(default.png), default;
}

.container {
    display: flex;
    width: 100vw;
    height: 100vh;
    position: fixed;
    justify-content: center;
    align-items: center;
}

.jug {
    width: 75px;
    height: 75px;
    translate: 0 -110px;
    }

    .jug_pic {
    filter: drop-shadow(1px 1px 0px rgb(255, 255, 255));
    translate: -2px -5px;
    }

    button {
        background: none;
	    color: inherit;
	    border: none;
	    padding: 0;
	    font: inherit;
	    outline: inherit;
        cursor: url(pointer.png), pointer;
    }

.subpages {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    width: 220px;
}

    a {
        margin: 4px;
        text-decoration: none;
        font-size: 200%;
        font-family: Arial, Helvetica, sans-serif;
        color: rgb(255, 255, 255);
        text-shadow: 1px 2px 0px rgb(0, 0, 0), 1px 4px 0px rgb(255, 255, 255), 1px 6px 0px rgb(0, 0, 0), 1px 8px 0px rgb(255, 255, 255), 1px 10px 0px rgb(0, 0, 0), 1px 12px 0px rgb(255, 255, 255), 1px 14px 0px rgb(0, 0, 0), 1px 16px 0px rgb(255, 255, 255), 1px 18px 0px rgb(0, 0, 0);
        transition: 500ms;
        cursor: url(pointer.png), pointer;
    }

    a:hover {
        transition: 1000ms;
        font-size: 200%;
        text-shadow: 1px 2px 0px rgb(0, 0, 0), 1px 4px 0px rgb(255, 255, 255), 1px 6px 0px rgb(0, 0, 0), 1px 8px 0px rgb(255, 255, 255), 1px 10px 0px rgb(0, 0, 0), 1px 12px 0px rgb(255, 255, 255), 1px 14px 0px rgb(0, 0, 0), 1px 16px 0px rgb(255, 255, 255), 1px 18px 0px rgb(0, 0, 0), 1px 20px 0px rgb(255, 255, 255), 1px 22px 0px rgb(0, 0, 0), 1px 24px 0px rgb(255, 255, 255), 1px 26px 0px rgb(0, 0, 0), 1px 28px 0px rgb(255, 255, 255), 1px 30px 0px rgb(0, 0, 0), 1px 32px 0px rgb(255, 255, 255), 1px 34px 0px rgb(0, 0, 0), 1px 36px 0px rgb(255, 255, 255), 1px 38px 0px rgb(0, 0, 0), 1px 40px 0px rgb(255, 255, 255), 1px 42px 0px rgb(0, 0, 0), 1px 44px 0px rgb(255, 255, 255), 1px 46px 0px rgb(0, 0, 0), 1px 48px 0px rgb(255, 255, 255), 1px 50px 0px rgb(0, 0, 0), 1px 52px 0px rgb(255, 255, 255), 1px 54px 0px rgb(0, 0, 0), 1px 56px 0px rgb(255, 255, 255), 1px 58px 0px rgb(0, 0, 0), 1px 60px 0px rgb(255, 255, 255), 1px 62px 0px rgb(0, 0, 0), 1px 64px 0px rgb(255, 255, 255), 1px 66px 0px rgb(0, 0, 0);
    }

.invissiblejug {
    width: 75px;
    height: 75px;
}

.fleck1div {
    position: absolute;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    transition: 10s;
}

.fleck1 {
    position: absolute;
    top: 50%;
    left: 40%;
    transition: 60s;
    pointer-events: none;
    width: 100px;
    transform: scale(100%, 100%);
}

.fleck2div {
    position: absolute;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    transition: 20s;
}

.fleck2 {
    position: absolute;
    top: 60%;
    left: 45%;
    transition: 100s;
    pointer-events: none;
    width: 100px;
    transform: scale(100%, 100%);
}

.fleck3div {
    position: absolute;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    transition: 50s;
}

.fleck3 {
    position: absolute;
    top: 45%;
    left: 50%;
    transition: 120s;
    pointer-events: none;
    width: 100px;
    transform: scale(100%, 100%);
}

.gifdiv {
    position: absolute;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: difference;
    transition: 10s;
    z-index: 10;
}

.gif {
    position: absolute;
    top: 0%;
    left: 0%;
    transition: 10s;
    pointer-events: none;
    width: 100vw;
    transform: scale(100%, 100%);
}