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


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

img {
    background: rgb(32, 32, 32);
}


/* ============================================ */
/* ================ Background ================ */
/* ============================================ */
body {
    background-color: black;
}



/* ======================================== */
/* ================ Header ================ */
/* ======================================== */
header {
    display: flex;
    justify-content: center;
    align-items: center;
    
    background: linear-gradient(rgb(0, 0, 100), rgb(0, 0, 50));
    min-height: 70px;
}

header h1 {
    text-shadow: rgba(0,0,0,0.50) 0 0 15px;
}



/* ====================================== */
/* ================ Main ================ */
/* ====================================== */
main {
    margin: 0 auto;
    width: 100%;
    max-width: 1080px;

    padding-bottom: 40px;
}   




/* ================ Sections ================ */
section {
    overflow: hidden;
    margin-top: 20px;
    border-top-left-radius:  8px;
    border-top-right-radius: 8px;
    background: rgb(15,15,15);
}

section h2 {
    display: flex;
    justify-content: center;
    
    background: linear-gradient(rgb(0, 0, 100), rgb(0, 0, 50));
}



/* ================ Container ================ */
section div {
    margin: 15px;
}



/* ========================================= */
/* ================ Anchors ================ */
/* ========================================= */
#pictures div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
    gap: 10px;
}

#pictures img {
    object-fit: cover;
    width: 100%;
    border-radius: 4px;
    aspect-ratio: 3/4;
}



/* ======================================== */
/* ================ Footer ================ */
/* ======================================== */
footer {
    display: flex;
    justify-content: center;
    align-items: center;

    background: linear-gradient(rgb(0, 0, 100), rgb(0, 0, 50));
    min-height: 90px;
}

footer h1 {
    text-shadow: rgba(0,0,0,0.50) 0 0 15px;
}