*,
*::after,
*::before {
    /* box-sizing: border-box; */
    /* border: 1px red solid; */
    padding: 0;
    margin: 0;

}

:root {
    --aqua: hsl(174, 97%, 44%);
    --gray: hsl(0, 0%, 20%);
    --h1: clamp(1rem, 5vw, 3rem);
}

body {
    background-color: var(--gray);
    overflow-x: hidden;
}

.container {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.item {
padding: 1rem;
width: 50%;
}

p {
    color: white;
    font-size: 1.5rem;
    text-align: center;
    font-weight: bold;
}


h1 {
    font-size: var(--h1);
    font-family: japanese;
    text-align: center;
    /* filter: invert(1); */
    margin-top: 25px;
}

h3 {
    font-size: 1.5rem;
    text-align: center;
    /* filter: invert(1); */
}

img, #home-button {
    width: 250px;
    display: inline-block;
    vertical-align: middle;
    filter: invert();
}

.archivo-black-regular {
    font-family: "Archivo Black", sans-serif;
    font-weight: 400;
    font-style: normal;
  }  

/* ****************************************************HOME PAGE CSS**************************************************** */

.home-title {
    color: #000;
}

.akatsuki , #home-button{
    display: block;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    top: 70%;
    left: 50%;
    transform: translateX(-50%) translateY(-5%);
    filter: drop-shadow(10px 10px 5px rgb(255, 255, 255));
}


#home-button:active {
    filter: drop-shadow(5px 6px 5px rgb(255, 255, 255));
    top: 71%;
}


.fuji {
    background-image: url(./content/anime-hom-page.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    /* filter: invert(1); */
}

.home-quote {
    color: #000;
    font-size: 1.5rem;
    text-align: center;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 45%;
    left: 50%;
    width: 700px;
    transform: translateX(-50%) translateY(-50%);
}

.home-character {
    color: #000;
    font-size: 1.5rem;
    text-align: center;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.home-anime {
    color: #000;
    font-size: 1.5rem;
    text-align: center;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 64%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}


button {
    background-color: transparent;
    border: transparent;
    cursor: pointer;
    
}



@font-face {
    font-family: japanese;
    src:url(japanese_2020/JAPANESE_2020.ttf)
}


/* MENU */

.group:after {
    content: "";
    display: table;
    clear: both;
}

.content {
    padding: 1.5em;
}

.flex {
    display: flex;
    gap: var(--gap, 1rem);
}

.logo {
    margin: 2rem;
}

.primary-header {
    align-items: center;
    justify-content: space-between;
}

.primary-navigation {
    font-family: "Archivo Black", sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.3rem;
}

@media (min-width: 35em) {
    .primary-navigation {
        --gap: clamp(1.5rem, 5vw, 3rem);
        padding-block: 2rem;
        padding-inline: clamp(3rem, 5vw, 10rem);
        
    }
}

.primary-navigation a {
    text-decoration: none;
    color: #000;
}

.primary-navigation-death-note a{
    color: #fff !important;
}

.primary-navigation-death-note a:hover{
    color: red !important;
}

.primary-navigation a:hover {
    text-decoration: none;
    color: var(--aqua);
    /* filter: invert(1); */
}

.primary-navigation a > span {
    font-weight: 700;
    margin-inline-end: 0.75em;
}

/* ****************************************************TOKYO GHOUL CSS**************************************************** */

.background-image {
    background-image: url(./content/ken.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    /* -webkit-filter: invert(1); */
    /* filter: invert(1); */
}

.ghoul-hover a:hover {
    color: red;
}

.ghoul-button, #kaneki-button {
    display: block;
    font-family: japanese;
    font-size: 4rem;
    background-image: url(./content/ghoul-teeth.jpg);
    background-size: cover;
    background-clip: text;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-stroke: 2px red;
    color: transparent;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translateX(-50%) translateY(-5%);
    filter: drop-shadow(10px 10px 2px rgb(36, 36, 36));
}

#kaneki-button:active {
    filter: drop-shadow(5px 6px 4px rgb(36, 36, 36));
    top: 70.5%;
}

.p-character {
    color: #000;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.p-quote {
    color: #000;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 700px;
}

/* ****************************************************DEATH NOTE CSS**************************************************** */

@font-face {
    font-family: death-note;
    src: url(./Death-Note-Font/Death_Note_Font_by_Karlibell22.ttf);
}

.ryuk-background {
    background-image: url(./content/death-note.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

.ryuk-button, #deathnote-button {
    font-family: death-note;
    font-size: 4rem;
    color: #fff;
    background-size: cover;
    background-clip: text;
    background-position: center;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 70%;
    left: 30%;
    transform: translateX(-50%) translateY(-5%);
    filter: drop-shadow(10px 10px 2px rgb(36, 36, 36));
}

#deathnote-button:active {
    filter: drop-shadow(5px 6px 4px rgb(36, 36, 36));
    top: 70.5%;
}

.ryuk-character {
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 60%;
    left: 30%;
    transform: translateX(-50%) translateY(-50%);
}

.ryuk-quote {
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    word-wrap: break-word;
    top: 40%;
    left: 30%;
    transform: translateX(-50%) translateY(-50%);
    width: 700px
}

.deathnote-title {
    font-family: death-note;
    font-size: 2rem;
    display: none;
}

/* ****************************************************NARUTO CSS**************************************************** */

.naruto-background {
    background-image: url(./content/uzumaki.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    image-rendering:optimizeQuality;
    /* filter: invert(1); */
    /* -webkit-transform: scaleX(-1); */
    /* transform: scaleX(-1); */
}

.naruto-hover a:hover {
    color: red;

}

.naruto-button, #naruto-button {
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 70%;
    left: 70%;
    transform: translateX(-50%) translateY(-5%);
    filter: invert(1) drop-shadow(10px 10px 2px rgba(0, 0, 0, 0.6));
}

#naruto-button:active {
    filter: invert(1) drop-shadow(5px 6px 2px rgba(0, 0, 0, 0.6));
    top: 71%;
}

.naruto-quote {
    color: #000;
    font-size: 1.5rem;
    text-align: center;
    font-weight: bold;
    font-size: 1.5rem;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 35%;
    left: 70%;
    width: 450px;
    /* height: 200px; */
    transform: translateX(-50%) translateY(-50%);
}

.naruto-character {
    color: #000;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 60%;
    left: 70%;
    transform: translateX(-50%) translateY(-50%);
}

/* ****************************************************JUJUTSU KAISEN CSS**************************************************** */

@font-face {
    font-family: jujutsu;
    src:url(jujutsu-kaisen-font/Jujutsu-Kaisen.ttf)
}

.jujutsu-background {
    background-image: url(./content/gojo.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    image-rendering:optimizeQuality;
}

.jujutsu-button, #kaisen-button {
    font-family: jujutsu;
    font-size: 4rem;
    color: rgb(0, 0, 0);
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 65%;
    left: 70%;
    transform: translateX(-50%) translateY(-5%);
    filter:  drop-shadow(10px 10px 2px rgb(107, 107, 107));
}

#kaisen-button:active {
    filter:  drop-shadow(5px 6px 4px rgb(117, 117, 117));
    top: 65.5%;
}

.jujutsu-character {
    color: #000;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translateX(-50%) translateY(-50%);
}

.jujutsu-quote {
    color: #000;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    word-wrap: break-word;
    top: 40%;
    left: 70%;
    transform: translateX(-50%) translateY(-50%);
    width: 800px
}

/* ****************************************************AOT CSS**************************************************** */

@font-face {
    font-family: aot;
    src: url(./attack-on-titan/CloisterBlack.ttf);
}

.titan-hover a {
    color: #fff;
}

.titan-hover a:hover {
    color: red;
}

.titan-button, #titan-button {
    font-family: aot;
    font-size: 5rem;
    background-size: cover;
    background-clip: text;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-stroke: 3px rgb(0, 0, 0);
    color: transparent;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translateX(-50%) translateY(-5%);
    filter: invert(1) drop-shadow(10px 10px 2px rgb(36, 36, 36));
}

#titan-button:active {
    filter: invert(1) drop-shadow(5px 6px 4px rgb(36, 36, 36));
    top: 55.5%;
}

.titan-background {
    background-image: url(./content/aot.jpg);   
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    image-rendering:optimizeQuality;
}

.titan-quote {
    color: rgb(255, 255, 255);
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    word-wrap: break-word;
    top: 35%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 800px
}

.titan-character {
    color: rgb(255, 255, 255);
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    word-wrap: break-word;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 800px
}

/* ****************************************************MEDIA QUERIES**************************************************** */

@media all and (max-width: 900px) {

    .primary-navigation {
        background-color: var(--aqua);
    }

    h1 {
        font-size: 25px;
        line-height: 50px;
        font-family: japanese;
        text-align: center;
        margin-top: 50px;
    }

    h3 {
        font-size: 1rem;
        text-align: center;
        font-weight: bold;

    }

    /* @supports (backdrop-filter: blur(5px)) {
        .primary-navigation { 
            background-color: rgb(128,128,128, 0.8);
            backdrop-filter: blur(5px);
        }
    } */

    .akatsuki , #home-button{
        display: block;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        top: 80%;
        left: 50%;
        transform: translateX(-50%) translateY(-5%);
        filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
    }
    
    
    #home-button:active {
        filter: drop-shadow(5px 5px 5px rgb(255, 255, 255));
        top: 81%;
    }

    img, #home-button {
        width: 175px;
        display: inline-block;
        vertical-align: middle;
    }

    .fuji {
        background-image: url(./content/homepage-mobile.png);
        background-repeat: no-repeat;
        image-rendering:optimizeQuality;
        background-position: bottom;
    }

    .home-quote {
        color: #000;
        font-size: 1rem;
        text-align: center;
        font-weight: bold;
        text-align: center;
        position: absolute;
        top: 40%;
        left: 50%;
        width: 270px;
        transform: translateX(-50%) translateY(-50%);
    }
    
    .home-character {
        color: #000;
        font-size: 1rem;
        text-align: center;
        font-weight: bold;
        text-align: center;
        position: absolute;
        top: 65%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    
    .home-anime {
        color: #000;
        font-size: 1rem;
        text-align: center;
        font-weight: bold;
        text-align: center;
        position: absolute;
        top: 68%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
/* ****************************************************MOBILE NAV********************************************************** */
    .primary-navigation {
        --gap: 2em;
        position: fixed;
        inset: 0 0 0 30%;
        flex-direction: column;
        padding: min(30vh, 10rem) 2rem;
        z-index: 1000;
        transform: translateX(100%);
        transition: transform 350ms ease-out;
    }

    .primary-navigation[data-visible="true"] {
        transform: translateX(0%);
        color: #fff;
    }

    .primary-navigation a {
        color: #000;
    }

    .menu-btn {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 9999;
        padding-right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        cursor: pointer;
        transition: all .5s ease-in-out;
    }

    .menu-btn_burger {
        width: 25px;
        height: 3px;
        background:#000;
        border-radius: 2.5px;
        transition: all .5s ease-in-out;
    }

    .menu-btn_burger::before,
    .menu-btn_burger::after {
        content: '';
        position: absolute;
        width: 25px;
        height: 3px;
        background:#000;
        border-radius: 2.5px;
        transition: all .5s ease-in-out;
    }

    .menu-btn_burger::before {
        transform: translateY(-8px);
    }

    .menu-btn_burger::after {
        transform: translateY(8px);
    }

    /* ANIMATION */
    .menu-btn.open .menu-btn_burger {
        transform: translateX(-50px);
        background: transparent;
        box-shadow: none;
    }

    .menu-btn.open .menu-btn_burger::before {
        transform: rotate(45deg) translate(35px, -35px);
    }

    .menu-btn.open .menu-btn_burger::after {
        transform: rotate(-45deg) translate(35px, 35px);
    }

    /* ****************************************************MEDIA Q TOKYO GHOUL CSS**************************************************** */

    .background-image {
        background-image: url(./content/ken.png);
        background-repeat: no-repeat;
        image-rendering:optimizeQuality;
        background-position: bottom;
    }

    .ghoul-button, #kaneki-button {
        display: block;
        font-family: japanese;
        font-size: 2.5rem;
        background-image: url(./content/ghoul-teeth.jpg);
        background-size: cover;
        background-clip: text;
        background-position: center;
        -webkit-background-clip: text;
        -webkit-text-stroke: 1.5px red;
        color: transparent;
        margin: 0;
        padding: 0;
        text-align: center;
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translateX(-50%) translateY(-5%);
        filter:  drop-shadow(10px 10px 2px rgb(36, 36, 36));
    }

    #kaneki-button:active {
        filter:  drop-shadow(5px 6px 4px rgb(36, 36, 36));
        top: 60.5%;
    }

    .p-character {
        color: #000;
        font-size: 1rem;
        font-weight: bold;
        margin: 0;
        padding: 0;
        text-align: center;
        position: absolute;
        top: 52.5%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

    .p-quote {
        color: #000;
        font-size: 1rem;
        font-weight: bold;
        margin: 0;
        padding: 0;
        text-align: center;
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 350px;
    }

    /* ****************************************************MEDIA Q DEATH NOTE CSS**************************************************** */

    @font-face {
        font-family: death-note;
        src: url(./Death-Note-Font/Death_Note_Font_by_Karlibell22.ttf);
    }

    .death-note-mobile {
        filter: invert(1);
    }

    .ryuk-background {
        background-image: url(./content/death-note.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 100vh;
    }

    .ryuk-button, #deathnote-button {
        font-family: death-note;
        font-size: 2rem;
        color: #fff;
        background-size: cover;
        background-clip: text;
        background-position: center;
        margin: 0;
        padding: 0;
        text-align: center;
        position: absolute;
        top: 80%;
        left: 50%;
        transform: translateX(-50%) translateY(-5%);
        filter: drop-shadow(10px 10px 2px rgb(36, 36, 36));
    }

    #deathnote-button:active {
        filter: drop-shadow(5px 6px 4px rgb(36, 36, 36));
        top: 80.5%;
    }

    .ryuk-character {
        color: #fff;
        font-size: 1rem;
        font-weight: bold;
        margin: 0;
        padding: 0;
        text-align: center;
        position: absolute;
        top: 65%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

    .ryuk-quote {
        color: #fff;
        font-size: 1rem;
        font-weight: bold;
        margin: 0;
        padding: 0;
        text-align: center;
        position: absolute;
        word-wrap: break-word;
        top: 45%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 350px
    }

    .deathnote-title {
        font-family: death-note;
        font-size: 3rem;
        display: block;
        padding-top: 10%;
    }

 /* ****************************************************MEDIA Q NARUTO CSS**************************************************** */

    .naruto-background {
        background-image: none;
        background-color: rgb(254, 149, 56);
        background-size: cover;
        background-repeat: no-repeat;
        height: 100vh;
        image-rendering:optimizeQuality;
    }

    .naruto-button, #naruto-button {
        margin: 0;
        padding: 0;
        text-align: center;
        position: absolute;
        top: 82.5%;
        left: 50%;
        transform: translateX(-50%) translateY(-5%);
        filter: invert(1)  drop-shadow(10px 10px 2px rgba(0, 0, 0, 0.6));
    }

    #naruto-button:active {
        filter: invert(1) drop-shadow(5px 6px 2px rgba(7, 7, 7, 0.6));
        top: 81%;
    }

    .naruto-quote {
        color: #000;
        font-size: 1rem;
        text-align: center;
        font-weight: bold;
        margin: 0;
        padding: 0;
        text-align: center;
        position: absolute;
        top: 60%;
        left: 50%;
        width: 350px;
        /* height: 200px; */
        transform: translateX(-50%) translateY(-50%);
    }

    .naruto-character {
        color: #000;
        font-size: 1rem;
        margin: 0;
        padding: 0;
        text-align: center;
        position: absolute;
        top: 77%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

    .naruto {
        filter: invert(1) !important;
    }

    /* ****************************************************MEDIA Q JUJUTSU KAISEN CSS**************************************************** */

@font-face {
    font-family: jujutsu;
    src:url(jujutsu-kaisen-font/Jujutsu-Kaisen.ttf)
}


.jujutsu-button, #kaisen-button {
    font-family: jujutsu;
    font-size: 3rem;
    color: rgb(0, 0, 0);
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translateX(-50%) translateY(-5%);
    filter:  drop-shadow(10px 10px 2px rgb(36, 36, 36));
}

#kaisen-button:active {
    filter:  drop-shadow(5px 6px 4px rgb(36, 36, 36));
    top: 70.5%;
}

.jujutsu-character {
    color: #000;
    font-size: 1rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.jujutsu-quote {
    color: #000;
    font-size: 1rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    word-wrap: break-word;
    top: 30%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 350px
}

.jujutsu-background {
    background-image: url(./content/gojo.png);
    background-repeat: no-repeat;
    image-rendering:optimizeQuality;
    /* filter: invert(1); */
    background-position: bottom;
}

    /* ****************************************************MEDIA Q AOT CSS**************************************************** */

    .titan-mobile {
        filter: invert(1);
    }

.titan-background {
    background-image: url(./content/aot.jpg);   
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    background-position: bottom;
}

.titan-quote {
    color: rgb(255, 255, 255);
    font-size: 1rem;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    word-wrap: break-word;
    top: 40%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 350px
}

.titan-character {
    color: rgb(255, 255, 255);
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    word-wrap: break-word;
    top: 55%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 1rem;
    width: 350px;
}

.titan-button, #titan-button {
    font-family: aot;
    font-size: 5rem;
    background-size: cover;
    background-clip: text;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-stroke: 3px rgb(0, 0, 0);
    color: transparent;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%) translateY(-5%);
    filter: invert(1) drop-shadow(10px 10px 2px rgb(36, 36, 36));
}

#titan-button:active {
    filter: invert(1) drop-shadow(5px 6px 4px rgb(36, 36, 36));
    top: 60.5%;
}

}