/****** CSS RESET ******/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: normal;
}

h1, h2, h3, h4, h5, h6, p {
    font-size: 100%;
}

ol, ul, li {
    list-style: none;
}

figure {
    font-size: 0;
    line-height: 0;
}

img, video {
    width: 100%;
}

a {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

body {
    height: 100svh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightgray;
}

/* Font Import */

@font-face {
    font-family: "AntiDesignEndeavour";
    src: url("/assets/fonts/AntiDesignEndeavourDemo-w14Gx.woff2") format("woff2");
}

@font-face {
    font-family: "PPRight";
    src: url("/assets/fonts/PPRightSerifMono-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "MonaSans";
    src: url("/assets/fonts/MonaSans-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "OTBrut";
    src: url("/assets/fonts/OTBrut-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "PPFragment";
    src: url("/assets/fonts/PPFragment-GlareExtraBold.woff2") format("woff2");
}

/* MAIN */

.poster-container {
    background-color: white;
    height: 90%;
    aspect-ratio: 5 / 7;
    overflow: hidden;
    position: relative;
}

h1 {
    position: absolute;
    top: 23%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    color: white;
    font-size: 5svh;
    line-height: 100%;
    text-align: left;
}

.font--AntiDesignEndeavour {
    font-family: "AntiDesignEndeavour";
}

.font--MDPolychromeNano {
    font-family: "MDPolychromeNano";
}

.font--MonaSans {
    font-family: "MonaSans";
}

.font--OTBrut {
    font-family: "OTBrut";
}

.font--PPFragment {
    font-family: "PPFragment";
}

.image-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.poster-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.color--green {
    filter: sepia(100) hue-rotate(75deg);
}

.color--purple {
    filter: sepia(100) hue-rotate(250deg);
}

.color--red {
    filter: sepia(100) hue-rotate(295deg);
}

.color--yellow {
    filter: sepia(100) hue-rotate(25deg);
}


.poster-pattern {
    opacity: 30%;
    mix-blend-mode: exclusion;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;

    background-color: rgb(0, 0, 0);
    background-image: 
        linear-gradient(-45deg, transparent 75%, rgb(245, 0, 0) 75%),
        linear-gradient(45deg, transparent 75%, rgb(255, 0, 0)),
        linear-gradient(-135deg, transparent 75%, rgb(255, 0, 0)),
        linear-gradient(135deg, transparent 75%, rgb(255, 0, 0));

    filter
}