* {
    margin: 0;
    padding: 0;
    user-select: none;
}

body {
    overflow-x: hidden;
    height: 200vh;
}

.container {
    position: relative;
    display: grid;
    height: 100vh;
    width: 100vw;
    grid-template-columns: repeat(20, 5%);
    grid-template-rows: repeat(20, 5%);
}



.background2 {
    z-index: 500;
    background-color: white;
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 100vh;
    border-top: 5px solid black;
    display: grid;
    grid-template-columns: repeat(20, 5%);
    grid-template-rows: repeat(20, 5%);
    overflow-y: hidden;
}

.topbar {
    position: fixed;
    width: 100vw;
    height: 10vh;
    background-color: rgb(255, 255, 255);
    border-bottom: solid black 5px;
    display: grid;
    grid-template-columns: repeat(20, 5%);
    grid-template-rows: repeat(2, 50%);
    z-index: 500000;
}

.Logo {
    grid-column: 2;
    grid-row: 1/3;
    display: flex;
    align-items: center;
    font-size: 3em;
    font-family: manga;
    margin-top: 4%;
}

.HomePage {
    grid-column: 4/5;
    grid-row: 1/3;
    display: flex;
    align-self: center;
    font-size: 1.9em;
    white-space: nowrap;
    font-family: manga;
    z-index: 6;
    height: 3vh;
    cursor: pointer;
}





body {
    background-color: white;
}

@font-face {
    font-family: 'manga';
    src: url('../fonts/CC Wild Words Roman.ttf');
}

.MangaLibrary {
    grid-column: 7/8;
    grid-row: 1/3;
    display: flex;
    align-self: center;
    font-size: 1.9em;
    white-space: nowrap;
    font-family: manga;
    z-index: 45;
    cursor: pointer;
    text-decoration: none;
    justify-self: center;
    color: black;
    margin-left: 35%;
}

.grider {
    grid-column: 1/21;
    grid-row: 1/3;
    height: 100%;
    width: 100%;
    z-index: -1;
    display: flex;
}

    .MangaLibrary:hover {
        color: #a7a7a7;
    }

.join, .join2 {
    grid-column: 18;
    background-color: white;
    border: 2px solid black;
    grid-row: 1/3;
    height: 50%;
    width: 80%;
    align-self: center;
    cursor: pointer;
    pointer-events: auto !important;
    font-family: roboto;
}

.login, .login2 {
    grid-column: 19;
    background-color: black;
    border: 2px solid black;
    grid-row: 1/3;
    height: 50%;
    width: 80%;
    align-self: center;
    cursor: pointer;
    pointer-events: auto !important;
    font-family: roboto;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .login::before, .login2::before {
        content: '';
        position: absolute;
        top: -2px;
        right: -2px;
        bottom: -2px;
        left: -2px;
        pointer-events: none;
    }

.textinjoin {
    color: black;
    font-size: 1.55em;
    font-family: roboto;
}

.textinlogin {
    color: white;
    font-size: 1.55em;
    font-family: roboto;
    
}

.blacker {
    grid-row: 3/21;
    grid-column: 1/21;
    background-color: black;
    z-index: -1;
    opacity: 0.8;
}

.header {
    margin-left: -.5%;
    grid-row: 9;
    align-self: center;
    grid-column: 2/10;
    z-index: 1;
    color: white;
    font-family: roboto;
    font-size: 4em;
    position: relative;
}




.description {
    color: white;
    grid-column: 2/9;
    grid-row: 12/15;
    font-family: manga;
    font-size: 1.2em;
    line-height: 1.7;
}

.join2 {
    grid-column: 2;
    background-color: white;
    border: 2px solid black;
    grid-row: 15;
    height: 110%;
    width: 90%;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 75%;
    cursor: pointer;
    animation: shadow-pop-br-opposite1 0.15s;
}

.login2 {
    margin-left: 10%;
    grid-column: 3;
    background-color: black;
    border: 2px solid white;
    grid-row: 15;
    height: 108%;
    width: 118%;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 75%;
    cursor: pointer;
    animation: shadow-pop-bl-out1 0.15s;
    text-decoration: none;
}

.textinjoin2 {
    color: black;
    font-size: 1.55em;
    font-family: roboto;
    align-self: center;
    justify-self: center;
}

.textinlogin2 {
    color: white;
    font-size: 1.55em;
    font-family: roboto;
}

.backgroundimage {
    height: 100%;
    width: 100%;
    grid-column: 1/21;
    grid-row: 3/21;
    z-index: -5;
}

.naruto {
    grid-column: 13/17;
    grid-row: 6/21;
    height: 200%;
    width: 200%;
    margin-left: -67%;
    margin-top: -20%;
    display: none;
    pointer-events: none;
}

.guts {
    grid-column: 10/21;
    grid-row: 1/20;
    height: 115%;
    width: 150%;
    margin-top: -5%;
    display: none;
    pointer-events: none;
}

.luffy {
    position: absolute;
    grid-column: 13/17;
    grid-row: 6/21;
    height: 300%;
    width: 300%;
    margin-left: -95%;
    margin-top: -20%;
    display: none;
    pointer-events: none;
    clip-path: inset(0 0 50% 0);
}

.itchigo {
    grid-column: 13/17;
    grid-row: 6/21;
    height: 200%;
    width: 300%;
    margin-left: -58%;
    margin-top: -25%;
    z-index: 1;
    display: none;
    pointer-events: none;
}

.goku {
    grid-column: 13/17;
    grid-row: 6/21;
    height: 150%;
    width: 250%;
    margin-left: -77%;
    margin-top: -30%;
    z-index: 1;
    display: none;
    pointer-events: none;
}

.Mussashi {
    grid-column: 13/17;
    grid-row: 6/21;
    height: 150%;
    width: 150%;
    margin-left: -30.69%;
    margin-top: -30%;
    z-index: 1;
    display: none;
    pointer-events: none;
}

.thorfinn {
    grid-column: 13/17;
    grid-row: 6/21;
    height: 125%;
    width: 125%;
    margin-left: -13.5%;
    margin-top: -30%;
    z-index: 1;
    display: none;
    pointer-events: none;
}







.how {
    grid-row: 4/6;
    grid-column: 1/21;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: roboto;
    font-size: 3.5em;
    white-space: nowrap;
    margin-bottom: 3%;
}

.box1 {
    grid-row: 9/14;
    grid-column: 3/7;
    height: 100%;
    width: 100%;
}

.box2 {
    grid-row: 9/14;
    grid-column: 9/13;
    height: 100%;
    width: 100%;
}

.box3 {
    grid-row: 9/14;
    grid-column: 15/19;
    height: 100%;
    width: 100%;
}

.howitworks {
    grid-row: 6;
    grid-column: 7/15;
    font-family: manga;
    color: black;
    text-align: center;
    font-size: 1.2em;
    line-height: 1.2;
    margin-top: -1%;
}

.miniheader1 {
    font-family: roboto;
    grid-column: 3/7;
    grid-row: 15/17;
    text-align: center;
    font-size: 1.5em;
    margin-top: -5%;
}

.miniheader1text {
    font-family: manga;
    grid-row: 16/18;
    text-align: center;
    grid-column: 3/7;
    line-height: 1.3;
    display: flex;
    align-items: center;
    font-size: .98em;
}

.miniheader2 {
    font-family: roboto;
    grid-column: 9/13;
    grid-row: 15/17;
    text-align: center;
    font-size: 1.5em;
    margin-top: -5%;
}

.miniheader2text {
    font-family: manga;
    grid-row: 16/18;
    text-align: center;
    grid-column: 9/13;
    line-height: 1.3;
    display: flex;
    align-items: center;
    font-size: .98em;
    margin-bottom: -20%;
}

.miniheader3 {
    font-family: roboto;
    grid-column: 15/19;
    grid-row: 15/17;
    text-align: center;
    font-size: 1.5em;
    margin-top: -5%;
}

.miniheader3text {
    font-family: manga;
    grid-row: 16/18;
    text-align: center;
    grid-column: 15/19;
    line-height: 1.3;
    display: flex;
    align-items: center;
    font-size: .98em;
}

.HomePage:hover {
    color: #a7a7a7;
}

.HomePage {
    color: #a7a7a7;
}




/* Animation classes that will be added by JavaScript */
.join-hover, .join2-hover {
    animation: shadow-pop-br 0.15s forwards;
}

.join-unhover, .join2-unhover {
    animation: shadow-pop-br-opposite 0.15s forwards;
}

.login-hover, .login2-hover {
    animation: shadow-pop-bl 0.15s forwards;
}

.login-unhover, .login2-unhover {
    animation: shadow-pop-bl-out 0.15s forwards;
}




.searchform {
    grid-row: 1/3;
    grid-column: 13/18;
    margin-left: 10%;
    width: 75%;
    align-self: center;
    display: grid;
    grid-template-columns: repeat(5, 20%);
    grid-template-rows: repeat(2, 50%);
    height: 100%;
}

.searcher {
    width: 100%;
    font-size: 1.5em;
    grid-column: 1/5;
    grid-row: 1/3;
    align-self: center;
    height: 50%;
    font-family: roboto;
}

.submiter {
    cursor: pointer;
    width: 100%;
    height: 54%;
    grid-row: 1/3;
    align-self: center;
    font-size: 1.2em;
    font-family: roboto;
}