html {
    background-color: black;
    background-image: url(images/featherpattern.png);
    animation: slide2 5s linear infinite;
}



@keyframes slide2 {
    from { background-position: 64px 64px; }
    to { background-position: 0 0; }
}

.no_scroll {
    overflow: hidden;
}

.main {
    border-radius: 10px;
    position: relative;
    display: flow-root;
    max-width: 500px;
    min-height: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    background-color: #b0b0b0;
}

.corner-img {
    position: absolute;
    top: -65px;
    right: 10px;
    width: 150px;
}

.logo {
    position: absolute;
    left: -40px;
    top: -70px;
    width: 300px;
    transform: rotate(-3deg);
    animation: rock 1s infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;

}

@keyframes rock {
    from { transform: rotate(-6deg); }
    to { transform: rotate(-3deg); }
}

.top-half, .bottom-half {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
    width: auto;
    min-height: 200px;
    margin: 10px;
}

.top-half {
    margin-top: 50px;
    gap: 10px;
}

.bottom-half {
    margin: 10px 25px 25px 25px;
    height: fit-content;
}

.statement {
    margin-left: 15px;
    width: 300px;
    height: auto;
}

.statement > h1 {
    font-size: larger;
    margin: 0;
    padding-left: 10px;
    padding-bottom: 3px;
    display: block;
    width: auto;
    background-color: black;
    color: white;
}

.statement > p {
    display: block;
    margin: 0;
    padding: 15px 15px 30px;
    background-color: white;
}

.zine {
    overflow: visible;
    position: relative;
    width: 119;
    height: 183px;
    margin: 55px auto auto auto;
    background-image: url(/images/vol0inside.png);
    background-color: black;
    background-size: contain;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.zine img {
    width: 119px;
    height: 183px;
}

.zine h1 {
    width: 100%;
    font-size: larger;
    top: -45px;
    position: absolute;
    color: white;
    background-color: black;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cover {
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: left center;
    transform: perspective(700px) rotateY(0deg);
}

.zine:hover .cover {
    transform: perspective(600px) rotateY(-30deg);
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.zine:hover {
    transform: scale(1.5) rotate(10deg);
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.zine:hover h1 {
    color: transparent;
    top: 0px;
    background-color: transparent;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chatroom {
    width: 250px;
    height: 350px;
    overflow: hidden;
}

#chattable {
    border: none;
    outline: none;
    width: 250px;
    height: 350px;
    background-color: white;
}

.tracks {
    margin-top: 20px;
    margin-bottom: 20px;
    image-rendering: pixelated;
    height: 32px;
    background-image: url(./images/tracks.png);
    background-repeat: repeat;
    animation: slide 3s linear infinite;
}

@keyframes slide {
    from { background-position: 32px 0; }
    to { background-position: 0 0; }
}

.right-half {
    width: 175px;
    height: 350px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
}

.changelog-box {
    display: flex;
    flex-direction: column;
    height: 250px;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: white;
}

.changelog-box p {
    width: 100%;
}

.changelog-box > h1 {
    box-sizing: border-box;
    position: sticky;
    top: 0;
    left: 0;
    font-size: larger;
    margin: 0;
    padding-left: 10px;
    padding-bottom: 3px;
    display: block;
    width: inherit;
    background-color: black;
    color: white;
}

.changelog-info {
    box-sizing: border-box;
    display: flex;
    height: calc( 250px - 25.5px);
    width: 175px;
    white-space: pre;
    overflow: hidden;
}

.icons {
    width: 175px;
    height: 130px;
    margin: auto 0 0;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.icon-container {
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    margin: auto;
}

.icon {
    display: flex;
    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: black;
    height: 48px;
    width: 48px;
    border-radius: 25%;
    filter: drop-shadow(white 0px 10px);
    justify-content: center;
    align-items: center;
}

.icon img {
    width: 32px;
    height: 32px;
}

.icon-container:hover .icon{
    filter: none;
    transform: translateY(10px);
    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.zine_viewer {
    transform-style: preserve-3d;
    max-width: 1000px;
    min-height: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    transform: perspective(2000px) rotateX(24deg);
    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.zine_viewer:hover {
    transform: perspective(2000px) rotateX(0deg);
    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.page {
    transform-origin: 0% 50% 0;
    transform: perspective(3000px) rotateY(0deg);
    transform-style: preserve-3d;
    position: absolute;
    right: 0;
    aspect-ratio: 825 / 1275;
    width: 500px;
}

.page a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: x-large;
    color: black;
    background-color: white;
    height: 25%;
    width: 75%;
    margin: auto;
    text-align: center;
    padding: 10px;
}

.page:nth-child(1) {
    transform-style: preserve-3d;
    position: absolute;
    right: 0;
    aspect-ratio: 825 / 1275;
    width: 500px;
    transform-origin: 0% 50% 0;
    transform: perspective(3000px) rotateY(-7deg);
    transition: 1s ease-in-out;
    z-index: 1;
}

.page:nth-child(1) > .front {
    position: absolute;
    rotate: 180deg;
    right: 0;
    aspect-ratio: 825 / 1275;
    width: inherit;
    backface-visibility: hidden;
    background-size: 400% 200%;
    background-position: 0% 0%;
    background-image: url(./images/vol0spread.PNG);
}

.page:nth-child(1) > .back {
    position: absolute;
    right: 0;
    aspect-ratio: 825 / 1275;
    width: inherit;
    backface-visibility: hidden;
    background-size: 400% 200%;
    background-position: 0% 100%;
    background-image: url(./images/vol0spread.PNG);
    transform: rotateY(180deg)
}

.page:nth-child(2) {
    transform-style: preserve-3d;
    position: absolute;
    right: 0;
    aspect-ratio: 825 / 1275;
    width: 500px;
    transform-origin: 0% 50% 0;
    transform: perspective(3000px) rotateY(-5deg);
    transition: 1s ease-in-out;
}

.page:nth-child(2) > .front {
    position: absolute;
    right: 0;
    aspect-ratio: 825 / 1275;
    width: inherit;
    backface-visibility: hidden;
    background-size: 400% auto;
    background-position: calc(100%/3) 100%;
    background-image: url(./images/vol0spread.PNG);
}

.page:nth-child(2) > .back {
    position: absolute;
    right: 0;
    aspect-ratio: 825 / 1275;
    width: inherit;
    backface-visibility: hidden;
    background-size: 400% 200%;
    background-position: calc(100% - 100%/3) 100%;
    background-image: url(./images/vol0spread.PNG);
    transform: rotateY(180deg)
}

.page:nth-child(3) {
    transform-style: preserve-3d;
    position: absolute;
    right: 0;
    aspect-ratio: 825 / 1275;
    width: 500px;
    transform-origin: 0% 50% 0;
    transform: perspective(3000px) rotateY(-3deg);
    transition: 1s ease-in-out;
}

.page:nth-child(3) > .front {
    position: absolute;
    right: 0;
    aspect-ratio: 825 / 1275;
    width: inherit;
    backface-visibility: hidden;
    background-size: 400% auto;
    background-position: right 100%;
    background-image: url(./images/vol0spread.PNG);
}

.page:nth-child(3) > .back {
    position: absolute;
    rotate: 180deg;
    right: 0;
    aspect-ratio: 825 / 1275;
    width: inherit;
    backface-visibility: hidden;
    background-size: 400% 200%;
    background-position: right 0%;
    background-image: url(./images/vol0spread.PNG);
    transform: rotateY(180deg)
}

.page:nth-child(4) {
    transform-style: preserve-3d;
    position: absolute;
    right: 0;
    aspect-ratio: 825 / 1275;
    width: 500px;
    transform-origin: 0% 50% 0;
    transform: perspective(3000px) rotateY(-1deg);
    transition: 1s ease-in-out;
}

.page:nth-child(4) > .front {
    position: absolute;
    rotate: 180deg;
    right: 0;
    aspect-ratio: 825 / 1275;
    width: inherit;
    backface-visibility: hidden;
    background-size: 400% auto;
    background-position: calc(2 * (100% / 3)) 0%;
    background-image: url(./images/vol0spread.PNG);
}

.page:nth-child(4) > .back {
    position: absolute;
    rotate: 180deg;
    right: 0;
    aspect-ratio: 825 / 1275;
    width: inherit;
    backface-visibility: hidden;
    background-size: 400% 200%;
    background-position: calc(100% / 3) 0%;
    background-image: url(./images/vol0spread.PNG);
    transform: rotateY(180deg)
}


.turned:nth-child(1) {
    transform: perspective(3000px) rotateY(-180deg);
    transition: 1s ease-in-out;
}

.turned:nth-child(2) {
    transform: perspective(3000px) rotateY(-178deg);
    transition: 1s ease-in-out;
}

.turned:nth-child(3) {
    transform: perspective(3000px) rotateY(-176deg);
    transition: 1s ease-in-out;
}

.turned:nth-child(4) {
    transform: perspective(3000px) rotateY(-174deg);
    transition: 1s ease-in-out;
}

.no-mouse {
    pointer-events: none;
}