@import url("modules/fonts.css");
@import url("modules/vars.css");


body {
    margin: 40px 60px;
    padding: 0;
    background-color: black;
    overflow: hidden;
    display: grid;
    grid-template-columns: calc(70vw - 145px) calc(25vw - 150px);
    grid-template-rows: calc(100vh - 80px);
    column-gap: 250px;
    color: var(--text-color);
    font-family: var(--font-text);
    font-size: var(--text-size);
}

/* MAIN TITLE */
h1 {
    grid-column: 1/2;
    font-family: var(--font-titles);
    font-size: 18.5em;
    animation: rotate 2s infinite;
    line-height: .8;
    letter-spacing: -0.1em;
    margin-top: 50px;
}

@keyframes rotate {
    0% {
        font-variation-settings: "rttx" 0;
        animation-timing-function: cubic-bezier(0.5, 0.0, 1, 0.5);
    }

    25% {
        font-variation-settings: "rttx" 90;
        animation-timing-function: cubic-bezier(0.0, 0.5, 0.5, 1);
    }

    50% {
        font-variation-settings: "rttx" 180;
        animation-timing-function: cubic-bezier(0.5, 0.0, 1, 0.5);
    }

    75% {
        font-variation-settings: "rttx" 270;
        animation-timing-function: cubic-bezier(0.0, 0.5, 0.5, 1);
    }

    100% {
        font-variation-settings: "rttx" 360;
    }
}


/* MENU */
#bloc-menu {
    grid-column: 2/3;
    margin-top: 50px;
}

a,
#dropBtn {
    text-decoration: none;
    width: max-content;
    height: max-content;
    box-shadow: none;
    border: none;
    text-align: center;
    line-height: 1.8;
    font-size: 1.5em;
    color: rgb(244, 240, 247);
    cursor: cell;
}

a:hover,
#dropBtn:hover,
.dropctnt a:hover {
    text-decoration: underline;
    text-underline-position: under;
}

/* Dropdown */
#dropdown {
    position: relative;
    display: block;
}

#dropBtn {
    font-family: var(--font-text);
    margin: 0;
    padding: 0;
    background-color: transparent;
}

span#drop {
    font-size: .65em;
}

.dropctnt {
    display: none;
    position: absolute;
    background-color: transparent;
    min-width: 160px;
    z-index: 1;
}

.dropctnt a {
    padding: 0 30px;
    text-decoration: none;
    display: block;
}

.show {
    display: block;
    position: relative;
    max-width: calc(25vw - 150px);
    text-wrap: wrap;
    margin-top: 6px;
}

.menu {
    color: rgb(244, 240, 247);
    text-align: left;
    line-height: 1.3;
    font-size: 1em;
    text-decoration: underline;
    text-underline-position: under;
    text-wrap: wrap;
    cursor: cell;
    max-width: calc(25vw - 150px);
    margin-bottom: 10px;
}

.enter-warning {
    display: none;
}

@media screen and (min-width:200px) and (max-width: 1280px) {
    .enter-warning {
        display: block;
        transform: rotate(-3deg);
        border: solid 1px rgb(244, 240, 247);
        padding: 8px;
        line-height: 1.5;
        margin-bottom: 60px;
    }
}

@media screen and (max-width: 320px) {
    body {
        margin: 20px;
        overflow: scroll;
        display: block;
    }

    /* MAIN TITLE */
    h1 {
        font-size: 3em;
        margin-top: 0px;
    }

    /* MENU */
    #bloc-menu {
        margin-top: 50px;
    }

    a,
    #dropBtn {
        line-height: 1.8;
        font-size: .9em;
    }

    /* Dropdown */
    span#drop {
        font-size: .6em;
    }

    .menu {
        font-size: .75em;
        max-width: 75vw;
    }
}

@media screen and (min-width: 321px) and (max-width: 500px) {
    body {
        margin: 40px;
        overflow: scroll;
        display: block;
    }

    /* MAIN TITLE */
    h1 {
        font-size: 4.5em;
        margin-top: 0px;
    }

    /* MENU */
    #bloc-menu {
        margin-top: 50px;
    }

    a,
    #dropBtn {
        line-height: 1.8;
        font-size: 1em;
    }

    /* Dropdown */
    span#drop {
        font-size: .7em;
    }

    .menu {
        font-size: .9em;
        max-width: 75vw;
    }
}

@media screen and (min-width: 501px) and (max-width: 800px) {

    /*TBD!!!*/
    body {
        margin: 40px;
        overflow: scroll;
        display: block;
    }

    /* MAIN TITLE */
    h1 {
        font-size: 4.5em;
        margin-top: 0px;
    }

    /* MENU */
    #bloc-menu {
        margin-top: 50px;
    }

    a,
    #dropBtn {
        line-height: 1.8;
        font-size: 1em;
    }

    /* Dropdown */
    span#drop {
        font-size: .7em;
    }

    .menu {
        font-size: .9em;
        max-width: 75vw;
    }
}

@media screen and (min-width: 801px) and (max-width: 1080px) {
    body {
        margin: 40px;
        overflow: scroll;
        display: block;
    }

    /* MAIN TITLE */
    h1 {
        font-size: 3.5em;
        margin-top: 0px;
    }

    /* MENU */
    #bloc-menu {
        margin-top: 50px;
    }

    a,
    #dropBtn {
        line-height: 1.8;
        font-size: 1em;
    }

    /* Dropdown */
    span#drop {
        font-size: .7em;
    }

    .menu {
        font-size: .9em;
        max-width: 75vw;
    }
}

@media screen and (min-width: 1081px) and (max-width: 1200px) {
    body {
        margin: 40px;
        overflow: scroll;
        display: block;
    }

    /* MAIN TITLE */
    h1 {
        font-size: 4.5em;
        margin-top: 0px;
    }

    /* MENU */
    #bloc-menu {
        margin-top: 50px;
    }

    a,
    #dropBtn {
        line-height: 1.8;
        font-size: 1em;
    }

    /* Dropdown */
    span#drop {
        font-size: .7em;
    }

    .menu {
        font-size: .9em;
        max-width: 75vw;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1350px) {
    body {
        margin: 40px;
        overflow: scroll;
        grid-template-columns: calc(70vw - 190px) calc(25vw - 150px);
    }

    /* MAIN TITLE */
    h1 {
        font-size: 14em;
        margin-top: 0px;
    }

    /* MENU */
    #bloc-menu {
        margin-top: 50px;
    }

    a,
    #dropBtn {
        line-height: 1.8;
        font-size: 1em;
    }

    /* Dropdown */
    span#drop {
        font-size: .7em;
    }

    .menu {
        font-size: .9em;
        max-width: 75vw;
        /* max-width: calc(25vw - 160px); */
    }
}