@font-face {
    font-family: Crew;
    src: url(/resources/fonts/Crewniverse-KYqZ.ttf);
}

@font-face {
    font-family: CrystalUniverseRegular;
    src: url(/resources/fonts/CrystalUniverseRegular-w1V6n.otf);
}


body {
    background: url("/pages/peridottwinpeaks/background.png");
    background-size: 100%;
    background-attachment: fixed;
}

h1 {
    font-family: CrystalUniverseRegular;
    line-height: 2em;
}

h2 {
    font-family: Crew;
    line-height: 1em;
    text-align: center;
}

p {
    font-size: 1em;
}

.logoimages {
    align-items:end;
    display: flex;
}

.header {
        font-family: Crew;
    text-align: center;
    font-size: 2em;
    color: white;
    padding: 12px;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

.logo {
    z-index: 4;
    margin-left: -32px;
    margin-right: -32px;
}

.peridotemoji {
    z-index: 5;
    width: 128px;
    height: 128px;
    background: url("/pages/peridottwinpeaks/peridotemoji1.png");
    animation: peridot 4s infinite, rotate 1s infinite steps(1, end);
    filter: drop-shadow(8px 8px black);
}

.dalecooperhead {
    z-index: 5;
    width: 128px;
    height: 128px;
    background: url("/pages/peridottwinpeaks/dalecooper.png");
    animation: rotate 1s infinite steps(1, end);
    filter: drop-shadow(8px 8px black);
}

@keyframes peridot {
    0%, 100% {background: url("/pages/peridottwinpeaks/peridotemoji1.png");}
    25% {background: url("/pages/peridottwinpeaks/peridotemoji2.png");}
    50% {background: url("/pages/peridottwinpeaks/peridotemoji3.png");}
    75% {background: url("/pages/peridottwinpeaks/peridotemoji4.png");}
}

@keyframes rotate {
    0%, 100% {transform: rotateZ(15deg);}
    50% {transform: rotateZ(-15deg);}
}

.textborder {
    text-shadow: 2px 2px black,
                 -2px 2px black, 
                 2px -2px black, 
                 -2px -2px black;
}

.bugholder {
      color: #c000c0;
}

.menusection {
    display: flex;
    flex-direction: row;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.menupart {
    height: fit-content;
    border-radius: 16px;
    font-family: Crew;
    display: flex;
    flex-direction: column;
    background: white;
    margin: 12px;
    padding: 16px;
    font-size: 1.5em;
}

.copyright {
    text-align: center;
    border-radius: 16px;
    font-family: Crew;
    display: flex;
    flex-direction: column;
    background: white;
    color: rgb(119, 119, 119);
    margin: 12px;
    margin-left: auto;
    margin-right: auto;
    padding: 16px;
    font-size: 1em;    
    width: 50%;
}

.mainmenu {
    border-radius: 32px;
    background: white;
    background: white;
    margin: 12px;
    padding: 16px;
    font-size: 1.5em;
}

.newestcomicbox {
    width: fit-content;
    padding: 16px;
    margin: 16px;
    margin-left: auto;
    margin-right: auto;
    border: 4px solid black;
        border-radius: 16px;
}

.shadow {
    border: 4px solid black;
    box-shadow: 8px 8px black;
}

.comic {
    border: 4px solid black;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.translation {
    text-align: center;
}