@font-face {
    font-family:'Messy Handwritten';
    src: url(../fonts/MESSYHANDWRITTEN-REGULAR.TTF);
}

@font-face {
    font-family: 'Avara';
    src: url(../fonts/AVARA-ITALIC.OTF);
}

@font-face {
    font-family: 'PP Mondwest';
    src: url(../fonts/PPMONDWEST-REGULAR.OTF);
}

:root {
    --color-vert: rgb(181, 255, 33);
    --color-rose: rgb(255, 86, 173);
    --color-rose-dark: rgb(255, 0, 132);
}

body {
    font-family: "Messy Handwritten";
    font-size: 20px;
    color: white;
}

.page {
    background-image: url(../images/covers_2025/covers/coverartober_2025_20.jpg);
    background-repeat: no-repeat;
    background-size: cover;

    .container {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 20px;

        .content {
            width: 70%;
            height: 80%;
        }

        .side {
            width: 20%;
            display: flex;
            flex-direction: column;
            text-align: center;
        }

        .menu {
            background-image: url(../images/site/menu_button.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            margin: 40px;
            padding: 10px;
            border-image: url(../images/site/border.png) 20 / 16px round;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .menu h2 {
            margin: 10px;
        }
        
        .card {
            box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.50);
        }
    }
}


.about {
    background-image: url(../images/site/about.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    text-align: left;

    .card {
        background-image: none;
    }

    .card:hover {
        background-image: url(../images/site/fond_about_mix.JPG);
        background-repeat: no-repeat;
        background-size: cover;
        mix-blend-mode: overlay;
    }
}

.photos {
    background-image: url(../images/site/fond_photos.JPG);
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.board {
    background-image: url(../images/site/fond_board.JPG);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.photogrammetry {
    background-color: white;
}

iframe {
    border-image: url(../images/site/border.png) 20 / 16px round;
    padding: 20px;
}


.gallery {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.gallery img {
    width: 30%;
    max-width: 300px;
    margin: 10px;
}

.text {
    margin: 20px;
}

a {
    color: var(--color-rose-dark);
    transition: 0.5s ease;
}

a:hover {
    color: var(--color-vert);
}

::selection{
    background: var(--color-vert);
    color: white;
}

a::selection {
    color: black;
}

h2 {
    font-family: "Messy Handwritten";
    color: var(--color-vert);
    margin-top: 0;
}


.titre {
    display: flex;
    justify-content: center;   
    padding-bottom: 40px;
}

.card {
    border-image: url(../images/site/border.png) 20 / 16px round;
    background-image: url(../images/site/fond_find_me.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin: 20px;
    padding: 20px;
}

.official-site {
    font-family: "Avara";
    font-style: italic;
}

ul {
    list-style-type: none;
}


.board-gallery {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.board-gallery img {
    max-width: 120px;
    height: auto;
    margin: 10px;
    max-height: none; 
    object-fit: contain;
    border-radius: 10px;
}



::-webkit-scrollbar {
    width: 1vw; 
  }

  ::-webkit-scrollbar-thumb {
    background-image: url(../images/site/scrollbar.png);
    background-repeat: no-repeat;
    background-size: cover;
  }


  @media screen and (max-width: 768px) {
    .page {
    .container {
        flex-direction: column;
        flex-direction: column-reverse;
        align-items: center;

        .content {
            width: 100%;
        }

        .side {
            width: 100%;
            align-items: center;
        }
    }}
    .container, .content, .side {
        margin: 0;
        padding: 0;
        width: 100%; 
    }
    .content {
        text-align: center;
    }
}