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

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

body {
    font-family: "Outfit", sans-serif;
    margin: 0;
    padding: 0;
    color: white;
    min-height: 100vh;
    height: 100%;
    background: #070e22ff radial-gradient(circle farthest-corner at 100% 100%, #001866ff 0%, #020e3bff 20%, #090f20ff 48%, #070e22ff 61%);
}

.link {
    transition: 250ms cubic-bezier(.08,.82,.17,1);
}

.link:visited {
    color: inherit;
}

.link:hover {
    transform: scale(1.03);
}

.link:active {
    transform: scale(0.98);
}

nav {
    font-variation-settings: 'wght' 500;
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 60px;
    gap: 0 0;
    grid-template-areas:
    "menu-logo menu-center menu-account";
    height: 60px;
    position: fixed;
    width: 100%;
    background-color: rgba(96, 117, 207, 0.15);
    backdrop-filter: blur(20px);
    z-index: 100;
}

.menu-logo a, .menu-center a, .menu-account a {
    font-size: 16pt;
    padding: 1px 2px;
    font-weight: 500;
    text-decoration: none;
    margin-inline: 5px;
    text-align: center;
    color: white;
    user-select: none;
}

.image-logo {
    grid-area: menu-logo;
    align-items: center;
    margin: auto auto auto 10px;
    a {
        display: flex;
        p {
            margin: auto 0 auto 10px;
            text-wrap: nowrap;
        }
    }
    img {
        height: 60px;
    }
}

.menu-logo {
    grid-area: menu-logo;
    margin: auto auto auto 10px;
}

.menu-center {
    width: 100%;
    display: flex;
    grid-area: menu-center;
    align-items: center;
    margin: auto;
    justify-content: center;
    a {
        margin: auto 20px
    }
}

.menu-account {
    grid-area: menu-account;
    margin: auto 10px auto auto;
}

main {
    padding-top: 60px;
}

.std-btn {
    margin: auto auto 0;
    padding: 0.4rem;
    border: none;
    border-radius: 0.7rem;
    background-color: rgba(255, 255, 255, 0.9);
    font-size: 15pt;
    font-weight: 500;
    max-width: 150px;
    min-width: 100px;
    width: 100%;
    cursor: pointer;
    transition: 100ms all ease-in-out;
}

.std-btn:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.02);
}

.std-btn:active {
    background-color: rgb(177, 177, 177);
    transition: 100ms all ease-in;
    transform: scale(0.98);
}

.pfp_circle {
    height: 50px !important;
    width: 50px !important;
    border-radius: 50% 50% 50% 50%;
    object-fit: cover;
    object-position: center bottom;
    z-index: 60;
}

/* Galerie */

.content-tile {
    background-color: rgba(29, 82, 165, 0.55);
    display: flex;
    flex-direction: column;
    position: relative;
    width: var(--column-width);
    height: var(--column-width);
    justify-content: normal;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 5px;
    overflow: hidden;
    transition: 250ms cubic-bezier(.08,.82,.17,1);
    a {
        text-decoration: none;
        img {
            width: 100%;
            height: var(--column-width);
            overflow: hidden;
            position: relative;
            display: flex;
            cursor: pointer;
            transition-duration: 50ms;
            object-fit: cover;
        }
    }
}

.title-wrapper {
    height: 50px;
    width: var(--column-width);
    display: flex;
    position: absolute;
    bottom: 0;
    background: rgb(23,23,37);
    background: linear-gradient(0deg, rgba(23,23,37,1) 0%, rgba(18,18,28,0.7343137938769257) 30%, rgba(0,0,0,0) 100%);
    p {
        margin: auto 0 0;
        font-size: 15px;
        text-decoration: none;
        color: #fdfdfd;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
    }
}

.content-tile:hover {
    transform: scale(1.02);
}

.content-tile:active:not(:has(button:active)) {
    transform: scaleX(0.98) scaleY(0.96);
}

/* Comments */

#comments {
    ul {
        padding: 0;
        max-height: 500px;
        overflow-y: auto;
    }
}

.comment-title-container {
    display: flex;
    align-items: center;
}

.comment-card {
    list-style-type: none;
    background: linear-gradient(to right, #fafcffff 0%, #cfcfcfff 100%);
    color: rgb(46, 46, 46);
    backdrop-filter: blur(20px);
    padding: 5px 20px;
    margin: 2px 30px;
    border-radius: 5px;
    border: 2px solid rgba(0, 0, 0, 0.85);
}

/* Tags */

.tag-bubble {
    box-sizing: border-box;
    background: #2a374a;
    border-radius: 8px;
    padding: 8px;
    font-size: 18px;
    flex-grow: 0;
    flex-shrink: 0;
    order: 2;
    transition: 250ms ease-in-out;
}

/* Boîte à cocher custom */

.checkbox-wrapper input[type="checkbox"] {
    visibility: hidden;
    display: none;
}

.checkbox-wrapper *,
.checkbox-wrapper ::after,
.checkbox-wrapper ::before {
    box-sizing: border-box;
}

.checkbox-wrapper .switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em;
}

.checkbox-wrapper .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-wrapper .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border: 1px solid #adb5bd;
    transition: .4s;
    border-radius: 30px;
}

.checkbox-wrapper .slider:before {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 1.4em;
    border-radius: 20px;
    left: 0.27em;
    bottom: 0.25em;
    background-color: #adb5bd;
    transition: .4s cubic-bezier(.18,.89,.32,1.28);
}

.checkbox-wrapper input:checked + .slider {
    background: linear-gradient(to top right, rgba(255, 0, 115, 0.85) 0%, #ff0000 50%, rgb(255, 115, 0) 100%);
    border: 1px solid #a34242;
}

.checkbox-wrapper input:focus + .slider {
    box-shadow: 0 0 1px #a34242;
}

.checkbox-wrapper input:checked + .slider:before {
    transform: translateX(1.4em);
    background-color: #fff;
}

@media (max-width: 920px) {
    .image-logo {
        a {
            p {
                display: none;
            }
        }
    }
}