html {
    background: linear-gradient(rgb(109, 59, 236),rgb(87, 199, 133),rgb(168, 19, 163));
}

@font-face {
    font-family: GothicURW;
    src: url(URWGothic-Book.otf);
}

@font-face {
    font-family: MGS1;
    src: url(METAG___.TTF);
}

@font-face {
    font-family: MGS2;
    src: url(MGS2.ttf);
}

@font-face {
    font-family: OCRA;
    src: url(OCRA.otf);
}

.scrolling-text-container {
    border-radius: 4px;
    overflow: hidden;
}

.scrolling-text-inner {
    display: flex;
    white-space: nowrap;
    color: antiquewhite;
    font-size: 180px;
    font-family:GothicURW;
    font-weight:900;
    font-style: italic;
    padding: 8px 0;
    user-select: none;
}

.scrolling-text {
    display: flex;
}

.scrolling-text-item {
    padding: 0 30px;
}

.scrolling-text-item-codec {
    padding: 0 0px;
}

.scrolling-text-inner>div {
    animation: var(--direction) var(--marquee-speed) linear infinite;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-100%);
    }

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

.greeter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 5px groove;
    padding: 10px;
    background-color: rgba(1, 7, 4, 0.992);
    mix-blend-mode:hard-light;
}

h2 {
    font-family: MGS1;
    text-align: center;
    color: rgb(168, 19, 163);
    font-size: 30px;
    user-select: none;
}

p {
    font-family: OCRA;
    text-align: center;
    color: antiquewhite;
    font-size: 12px;
}

button {
    font-family: MGS2;
    text-align: center;
    padding: 10px;
    display: block;
    margin: 0 auto;
    font-size: 20px;
}

.buttonsub {
    font-family: MGS2;
    text-align: center;
    padding: 5px;
    display: block;
    margin: 0 auto;
    font-size: 10px;
}

.codec {
    position: absolute;
    top: 25%;
    left: 13%;
    transform: translate(-50%, -50%);
    padding: 10px;
    background-color: rgba(1, 7, 4, 0.4);
}

.gallery {
    position: absolute;
    top: 75%;
    left: 13%;
    transform: translate(-50%, -50%);
    padding: 10px;
    background-color: rgba(1, 7, 4, 0.4);
}

.sketchbook {
    position: absolute;
    top: 25%;
    left: 86%;
    transform: translate(-50%, -50%);
    padding: 10px;
    background-color: rgba(1, 7, 4, 0.4);
}

.jamoriquaied {
    position: absolute;
    top: 75%;
    left: 86%;
    transform: translate(-50%, -50%);
    padding: 10px;
    background-color: rgba(1, 7, 4, 0.4);
}

.codec:hover, .gallery:hover, .sketchbook:hover, .jamoriquaied:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

.selectorcodec {
    position: absolute;
    top: 60%;
    left: 150%;
    transform: translate(-50%, -50%);
    visibility: hidden;
}

.codec:hover .selectorcodec {
    transform: rotate(23deg);
    visibility: visible;
}

.selectorgallery {
    position: absolute;
    top: -20%;
    left: 150%;
    transform: translate(-50%, -50%);
    visibility: hidden;
}

.gallery:hover .selectorgallery {
    transform: rotate(-23deg);
    visibility: visible;
}

.selectorjamoriquaied {
    position: absolute;
    top: -60%;
    left: -240%;
    transform: translate(-50%, -50%);
    visibility: hidden;
}

.jamoriquaied:hover .selectorjamoriquaied {
    transform: rotate(23deg) scaleX(-1);
    visibility: visible;
}

.selectorsketchbook {
    position: absolute;
    top: 22%;
    left: -240%;
    transform: translate(-50%, -50%);
    visibility: hidden;
}

.sketchbook:hover .selectorsketchbook {
    transform: rotate(-23deg) scaleX(-1);
    visibility: visible;
}

.codecselect {
    position: absolute;
    top: 100%;
    left: 260%;
    transform: translate(-50%, -50%);
    visibility: hidden;
}

.codec:hover .codecselect {
    visibility: visible;
}

.galleryselect {
    position: absolute;
    top: 0%;
    left: 250%;
    transform: translate(-50%, -50%);
    visibility: hidden;
}

.gallery:hover .galleryselect {
    visibility: visible;
}

.jamoriquaiedselect {
    position: absolute;
    top: -165%;
    left: -180%;
    transform: translate(-50%,50%) scaleX(-1);
    visibility: hidden;
}

.jamoriquaied:hover .jamoriquaiedselect {
    visibility: visible;
}

.sketchbookselect {
    position: absolute;
    top: -55%;
    left: -180%;
    transform: translate(-50%,50%) scaleX(-1);
    visibility: hidden;
}

.sketchbook:hover .sketchbookselect {
    visibility: visible;
}

h3 {
    font-family: MGS2;
    letter-spacing: 5px;
}

.bottombar {
    position: absolute;
    top: 93%;
    left: 45%;
    padding: 5px;
    background-color: rgba(1, 7, 4, 0.4);
}

.infodump {
    position: absolute;
    top: 1%;
    left: 1%;
    right: 1%;
    background-color: rgba(1, 7, 4, 0.8);
}

.infodump h2 {
    margin-left: 2%;
    text-align: left;
}

.infodump p {
    margin-left: 1%;
    text-align: left;
}

.infodump h3 {
    margin-left: 1%;
    margin-bottom: -1%;
    text-align: left;
    color: rgb(168, 19, 163);
}

a {
    forced-color-adjust: none;
    color: rgb(87, 199, 133);
}

mark {
    color: rgb(196, 195, 195);
    background-color: rgb(87, 87, 87);
    border-radius: 1px;
}

.galleryartwork:hover {
    scale: 1.1;
}

h4 {
    font-family: GothicURW;
    font-style: italic;
    font-size: 42px;
    margin-left: 3%;
    margin-top: 2%;
    color: rgb(87, 199, 133);
}