/* ================ reset ================ */
* {
    margin:  0;
    padding: 0;
    gap:     0;
    box-sizing: border-box;
    user-select: none;
    outline: none;
}

hr {
    border: none;
}

li {
    list-style: none;
}

a {
    color: black;
    text-decoration: none;
}

button {
    border: none;
    background: none;
}




/* ================ global ================ */
h1, h2, h3 {
    color: white;
    font-family: system-ui;
}

h1 a, h2 a {
    font-weight: inherit;
}

li, a, p {
    color: white;
    font-family: system-ui;
    font-weight: 500;
}


img, video {
    max-width: 100%;
    background: black;
}

button {
    cursor: pointer;
}





/* ============================================ */
/* ================ background ================ */
/* ============================================ */
html {
    scroll-behavior: smooth;
    background: black;
}

body {
    min-height: 100vh;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(45deg, hsl(0, 100%, 5%), hsl(0, 100%, 2%));
}




/* ======================================== */
/* ================ header ================ */
/* ======================================== */
header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    
    /* background-color: red; */
    /* background-color: crimson; */
    /* background-color: firebrick; */
    /* background-color: brown; */
    /* background-color: darkred; */
    /* background-color: maroon; */

    background: linear-gradient(firebrick, maroon);
}

header h1 {
    margin-top: -5px;
    text-shadow: hsl(0, 0%, 0%, 33%) 0 0 12px;
}




/* ================ navbar ================ */
nav {
    position: sticky;
    z-index: 2;
    top: 0;
    
    /* background-color: black; */
    background-color: hsl(0, 0%, 9%);
    box-shadow: hsl(0, 0%, 0%, 50%) 0 10px 10px;
}

nav ul {
    overflow: hidden;
    display: flex;
    align-items: center;

    margin: auto;
    max-width: 1080px;
    
    height: 27px;
    padding-left: 13px;
}

nav a {
    white-space: nowrap;
    margin-right: 13px;
}

nav a:hover {
    color: hsl(0, 85%, 55%);
}




/* ================ Carrousel ================ */
.carrousel {
    position: fixed;
    z-index: 2;
    top: 50%;

    font-weight: bolder;
    border-radius: 15px;
    width:  30px;
    height: 30px;

    color: white;
    /* background-color: red; */
    /* background-color: crimson; */
    /* background-color: firebrick; */
    /* background-color: brown; */
    /* background-color: darkred; */
    background-color: maroon;
    box-shadow: hsl(0, 0%, 0%, 33%) 0 0 12px;
}


.carrousel:hover {
    background-color: hsl(0, 75%, 36%);
}

.carrousel#prev { left:  10px; }
.carrousel#next { right: 10px; }




/* ====================================== */
/* ================ main ================ */
/* ====================================== */
main {
    margin: auto;
    max-width: 1080px;
    min-height: 100vh;

    padding-top:    30px;
    padding-left:    8px;
    padding-right:   8px;
    padding-bottom: 50px;
}



/* ================ sections ================ */
section {
    overflow: hidden;
    border-top-left-radius:  8px;
    border-top-right-radius: 8px;

    background-color: black;
    background: linear-gradient(45deg, hsl(0, 10%, 33%, 25%), hsl(0, 0%, 8%, 55%));
    /* background: linear-gradient(45deg, hsl(0, 0%, 17%, 60%), hsl(0, 0%, 15%, 25%)); */
    box-shadow: hsl(0, 0%, 10%, 33%) 0 0 15px;
}

section h2, section h3 {
    white-space: nowrap;
    text-align: center;
    /* padding-top:    10px; */
    /* padding-bottom:  5px; */
    text-shadow: hsl(0, 0%, 0%, 25%) 0 0 12px;
}


/* ================ containers ================ */
section div, section ul {
    padding-top:    18px;
    padding-left:   10px;
    padding-right:  10px;
    padding-bottom: 20px;
}




/* ========================================= */
/* ================ customs ================ */
/* ========================================= */

/* ================ bio ================ */
#bio {
    margin-top: 8px;
}

#bio h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    
    height: 35px;
    background: linear-gradient(brown, maroon);
}



#bio li {
    margin-bottom: 2px;
}

#bio li a {
    color: crimson;
}

#bio li a:hover {
    color: red;
}



#bio hr {
    background-color: hsl(0, 0%, 100%, 80%);
    height: 1px;

    margin-top:      3px;
    margin-left:    10px;
    margin-right:   10px;
    margin-bottom:   5px;
}



#bio div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    column-gap: 5px;
    row-gap:    5px;
}


#bio div a {
    transition: 85ms;
}

#bio div a:hover {
    box-shadow: hsl(0, 0%, 100%, 20%) 0 0 8px;
}

#bio div a:hover img {
    filter: brightness(1.09);
}



#bio div p {
    position: absolute;
    z-index: 1;
    background: black;
    opacity:       0.75;
    padding-left:   3px;
    padding-right:  5px;
}

#bio div img {
    object-fit: cover;
    border-radius: 3px;
    height: 100%;
    transition: 85ms;
}




/* ================ stories ================ */
#stories {
    margin-top: 35px;
}

#stories h2 {
    padding-top: 12px;
}

#stories div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    column-gap: 10px;
    row-gap:    20px;
}

#stories div video {
    cursor: pointer;
    object-fit: cover;
    width:  100%;
    height: 100%;
    border-radius: 5px;
    box-shadow: hsl(0, 0%, 0%, 50%) 0 0 10px;
}




/* ================ posts ================ */
#posts {
    margin-top: 60px;
}

#posts h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    
    height: 40px;
    background: linear-gradient(brown, maroon);
}

#posts div {
    display: flex;
    flex-wrap: wrap;
    row-gap: 15px;
}


#posts a {
    position: relative;
    
    overflow: hidden;
    border-radius: 5px;
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3px;
    box-shadow: hsl(0, 0%, 0%, 66%) 0 0 12px;
    transition: 85ms
}

#posts a:hover {
    box-shadow: hsl(0, 0%, 100%, 8%) 0 0 10px;
}

#posts a:hover img {
    filter: brightness(1.08);
}


#posts p {
    position: absolute;
    background: black;
    z-index: 1;
    opacity:       0.80;
    font-size:     19px;
    padding-left:   5px;
    padding-right:  5px;
    padding-bottom: 3px;
}

#posts img {
    transition: 85ms;
}





/* ======================================== */
/* ================ footer ================ */
/* ======================================== */

/* ================ Navigation ================ */
#gohead {
    position: fixed;
    z-index: 1;
    bottom: 25px;
    right:  25px;

    border-radius: 15px;
    width:  30px;
    height: 30px;
    background-color: maroon;
    box-shadow: hsl(0, 0%, 0%, 33%) 0 0 12px;
}

#gohead:hover {
    background-color: hsl(0, 75%, 36%);
}

#gohead p {
    color: white;
    font-size: 15px;
    margin-top: -5px;
}




/* ================ footer ================ */
footer {
    display: flex;
    justify-content: center;
    align-items: center;
    
    height: 90px;
    background: linear-gradient(firebrick, maroon);
    box-shadow: black 0 0 15px;
}

footer h1 {
    margin-top: -5px;
    text-shadow: hsl(0, 0%, 0%, 50%) 0 0 12px;
}