/* Général */

:root {
    --main-box-style: rgba(0, 0, 0, 0.35) 0 5px 15px, inset rgba(255,255,255,0.25) 0.2em 0.2em 0.2em 0, inset rgba(0,0,0,0.25) -0.2em -0.2em 0.2em 0;
    --main-success-color: #3cb371;
    --main-error-color: #dc143c;
    --main-primary-color: #7066ff;
    --main-secondary-color: #ec4bff;
}

@font-face {
    font-family: SimplyRounded;
    src: url(../fonts/SimplyRounded.ttf);
}

*, *::after, *::before {
    font-family: SimplyRounded, serif;
    color: white;
    box-sizing: border-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
    animation: fadeIn 0.5s ease-in-out;
}

*::-webkit-scrollbar {
    display: none;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: linear-gradient(rgba(90, 87, 255, 0.9), rgba(236, 55, 255, 0.9)), url("../images/background.webp");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

main {
    min-width: fit-content;
    padding: 15px;
    width: 100%;
    position: relative;
}

main::before {
    content: "";
    background: url('../images/deezerLogo.webp') no-repeat center center/cover;
    width: 25px;
    height: 25px;
    overflow: hidden;
    position: absolute;
    bottom: 15px;
    left: 15px;
}

ul {
    list-style-type: none;
    float: none;
    padding: 0;
    margin: 0;
    font-size: 1.5rem;
    line-height: 3.5rem;
}

.box, .button, .action-button, .information-box, .information-icon, .input-box {
    box-shadow: var(--main-box-style);
    border-radius: 15px;
    overflow: hidden;
}

.melody-match-icon {
    max-height: 100px;
    max-width: 100%;
    margin: 0 auto;
}

.button {
    border: none;
    background: rgba(255,255,255,0.25);
    padding: 15px;
    font-size: 1.25rem;
    min-width: fit-content;
    text-decoration: none;
    transition: box-shadow 0.3s ease;
}

.button:hover {
    cursor: pointer;
    box-shadow: var(--main-box-style), inset 0 0 10px 5px rgba(255, 255, 255, 0.25);
}


.button:active, .pressed {
    box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px, inset 0 0 5px 2px rgba(0, 0, 0, 0.5);
}

.information-box {
    margin: 15px auto;
    padding: 5px;
    width: fit-content;
}

.information-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 0 auto;
}

.information-icon {
    display: flex;
    align-items: center;
}

.information-icon svg {
    fill: white;
    height: 2.5rem;
}

.input-box {
    background: transparent;
    border-style: none;
    max-width: fit-content;
    margin: auto;
    padding: 10px;
}

::placeholder{
    color: rgba(255, 255, 255, 0.75);
}

.success-message {
    background-color: var(--main-success-color);
}

.error-message {
    background-color: var(--main-error-color);
}

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

.secondary-color {
    background-color: var(--main-secondary-color);
}

.leaderboard .user:nth-of-type(1)::before {
    content: "🏆";
}

.leaderboard .user:nth-of-type(2)::before {
    content: "🏆";
    filter: grayscale(100%) brightness(120%);
}

.leaderboard .user:nth-of-type(3)::before {
    content: "🏆";
    filter: saturate(150%) grayscale(50%) brightness(90%);
}

.password-input {
    width: fit-content;
    margin: auto;
    position: relative;
}

.password-input .button {
    padding: 5px;
    position: absolute;
    right: -35px;
}

.hidden {
    display: none;
}

.unselected {
    opacity: 0.5;
}

input[type="range"] {
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: var(--main-box-style);
    border: none;
    border-radius: 15px;
    -webkit-appearance: none;
}

/* Page principale */

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

.index .connection,
.index .leaderboard {
    flex: 1 1 100%;
    max-width: 100%;
}

.index .connection {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.index .buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0 auto;
}

.index .buttons a {
    margin: auto;
}

.index .leaderboard {
    padding: 5px;
    text-align: center;
    max-height: 100%;
}

.index .leaderboard>div {
    overflow: hidden;
    max-height: 100%;
}

.index .leaderboard .users {
    animation-duration: 15s;
    animation-name: leaderboard;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    max-height: 300px;
}

/* Page de connexion */

.login {
    text-align: center;
}

.login form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.login>div {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.login .button {
    margin: auto;
}

/* Page d'inscription */

.register {
    text-align: center;
}

.register form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.register>div {
    margin-top: 15px;
}

.register div {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.register .button {
    margin: auto;
}

/* Page de modification du profil */

.profile {
    text-align: center;
}

.profile form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.profile>div {
    margin-top: 15px;
}

.profile .button {
    margin: auto;
}

.profile .pictures {
    display: flex;
    overflow: scroll;
    flex-wrap: nowrap;
    max-width: 275px;
    margin: auto;
    padding: 15px 0;
}

.profile .picture {
    position: relative;
}

.profile input[type="radio"] {
    position: absolute;
    border-radius: 25px;
    visibility: hidden;
}

.profile input[type=radio]:checked+img {
    border-color: var(--main-success-color);
    box-shadow: 4px 4px 15px 0 #000000, 0 0 15px 0 rgba(0,0,0,0);
}

.profile .pictures img {
    max-width: 75px;
    border-radius: 50px;
    border: white 3px solid;
    margin: 0 15px;
}

/* Page de contact */

.contact {
    text-align: center;
}

.contact form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact>div {
    margin-top: 15px;
}

.contact .button {
    margin: auto;
}

/* Page du traitement des données et de tutoriel */

.privacy, .tutorial {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 1rem;
}

.privacy .site-icon, .privacy .backButton, .tutorial .site-icon, .tutorial .backButton {
    display: flex;
    justify-content: center;
}

.privacy h1, .privacy h2, .privacy h3, .privacy .policy>p, .tutorial h1, .tutorial h2, .tutorial h3, .tutorial p
{
    text-align: center;
}

.privacy p, .tutorial p {
    text-align: justify;
}


/* Page d'accueil */

.home {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    text-align: center;
}

.home .main,
.home .play {
    flex: 1 1 100%;
    max-width: 100%;
}

.home h1 {
    font-size: 2rem;
}

.home h2 {
    font-size: 1.5rem;
}

.home .main {
    display: flex;
    flex-direction: column;
}

.home .user-profile {
    text-align: center;
    margin: 0 auto;
}

.home .user-profile img {
    max-height: 150px;
    max-width: 100%;
    border-radius: 100px;
    border: white 3px solid;
}

.home .user-information {
    display: flex;
    gap: 15px;
}

.home .main .buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 0 auto;
    white-space: nowrap;
}

.home .leaderboard {
    max-width: fit-content;
    margin: auto auto 15px;
}

.home .leaderboard .users {
    max-height: 175px;
    overflow: scroll;
    margin: 0 15px;
}

.home .gamemode-selectors {
    display: flex;
    justify-content: space-around;
    margin: 15px auto;
}

.home .personalized-gamemode .option {
    display: flex;
    gap: 15px;
    overflow: scroll;
    max-width: 275px;
    margin: auto;
    white-space: nowrap;
    padding: 15px;
}

.home .rating, .home .theme {
    white-space: nowrap;
}

.home .time-option {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.home .play-button {
    margin: 15px auto;
}

/* Page de verification */

.verify {
    text-align: center;
}

.verify .buttons {
    padding: 15px 0;
}

/* Page de jeu */

.game .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: rgba(0.0, 0.0, 0.0, 0.25);
    border-radius: 25px;
    box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
    max-height: 75px;
}

.game .header .question {
    display: none;
    font-size: 1.5rem;
}

.game .profile-button, .game .home-button {
    border: white 3px solid;
    border-radius: 50px;
    max-height: 60px;
    cursor: pointer;
}

.game .player {
    display: flex;
    flex-direction: column;
    text-align: center;
    max-width: 250px;
    max-height: 250px;
    margin: 30px auto;
    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
    border-radius: 25px;
}

.game .media-player {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50%;
    width: 100%;
    overflow: hidden;
}

.game .player-icon {
    max-width: calc(100%/3);
    padding: 10px;
}

.game .left-arrow {
    transform: rotate(180deg);
}

.game .arrow {
    height: 100%;
}

.game .disk {
    animation: linear 5s disk;
    animation-iteration-count: infinite;
    height: 100%;
}

.game .question-box {
    background-color: rgba(0, 0, 0, 0.25);
    margin-bottom: 30px;
    border-radius: 25px;
    padding: 15px;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
}

.game .answers {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.game .answer {
    width: 100%;
    text-align: center;
}

.game .answer img {
    max-width: 100%;
    border-radius: 15px;
}

.game .good-cat, .game .bad-cat {
    display: none;
}

.game .error-message {
    text-align: center;
    cursor: pointer;
}

.end-cat{
    max-width: 200px;
    margin: 20px;
}



@media (min-width: 640px) {

    /* Général */

    main {
        max-width: 1000px;
        height: 100%;
    }

    /* Page d'accueil */

    .index .connection,
    .index .leaderboard {
        flex: 1 1 auto;
        max-width: 50%;
    }

    .index .buttons {
        flex-direction: row;
    }

    .index .users {
        max-height: 300px;
    }

    /* Page de connexion */

    .login div {
        flex-direction: row;
        justify-content: center;
    }

    .login div .button {
        margin: unset;
    }

    /* Page d'inscription */

    .register div {
        flex-direction: row;
        justify-content: center;
    }

    .register>div>.button {
        margin: unset;
    }

    .register>form>div>div {
        display: flex;
        flex-direction: column;
    }

    /* Page du traitement des données et de tutoriel */

    .privacy, .tutorial{
        padding: 2rem 5rem;
    }
    

    /* Page d'accueil connecté */

    .home {
        gap: 0;
    }

    .home .main,
    .home .play {
        flex: 1 1 auto;
        max-width: 50%;
    }

    .home .main {
        margin: auto;
    }

    .home .options  {
        margin-top: 0;
    }

    /* Page de jeu */

    .game {
        position: relative;
    }

    .game::before {
        content: "";
        position: absolute;
        top: 9.5rem;
        left: -12.5rem;
        width: 12.5rem;
        height: 12.5rem;
        background: url(../images/goodCat.webp);
        background-size: cover;
    }

    .game::after {
        content: "";
        position: absolute;
        top: 9.5rem;
        right: -12.5rem;
        width: 12.5rem;
        height: 12.5rem;
        background: url(../images/badCat.webp);
        background-size: cover;
    }

    .game .header .question {
        display: block;
        text-align: center;
    }

    .game .question-box {
        display: none;
    }

    .game .answers {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .game .answer {
        text-align: center;
        overflow-wrap: break-word;
        flex-basis: calc(33.33% - 15px);
    }

    .game .answer img {
        max-width: 100%;
        border-radius: 15px;
    }

    .game .good-cat, .game .bad-cat {
        display: block;
        position: absolute;
        max-height: 200px;
        top: 8.5rem;
    }

    .game .good-cat {
        left: -200px;
    }

    .game .bad-cat {
        right: -200px;
    }

    .game .slide-left {
        animation: linear 1s slideLeft forwards;
    }

    .game .slide-right {
        animation: linear 1s slideRight forwards;
    }

    .end-cat {
        max-width: 400px;
    }
}

@keyframes leaderboard {
    from {transform: translateY(10%)}
    50% {transform: translateY(-90%)}
    to {transform: translateY(10%)}
}

@keyframes disk {
    from {transform: rotate(0)}
    to {transform: rotate(359deg)}
}

@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

@keyframes slideLeft {
    to {left: 0}
}

@keyframes slideRight {
    to {right: 0}
}