/* ==========================================
   NET.GURLIE TEMPLATE
   CHANGE THESE VALUES TO CUSTOMIZE
========================================== */

:root {

    --dark: #16116d;

    --pink: #df4778;

    --inside-pink: #ad7087;

    --cream: #f4f0dc;

    --button: #a94f68;

    --lime: #e5ff91;

}


/* ==========================================
   MAIN BACKGROUND
========================================== */

body {

    margin: 0;

    background-color: #741c38;

    background-image:
        linear-gradient(
            #c4879d 2px,
            transparent 2px
        ),
        linear-gradient(
            90deg,
            #c4879d 2px,
            transparent 2px
        );

    background-size: 31px 31px;

}


/* ==========================================
   WEBSITE CONTAINER
========================================== */

.site {

    width: 1000px;

    max-width: 95%;

    margin: 35px auto;

    background-color: var(--inside-pink);

    border: 5px solid var(--dark);

    border-radius: 20px;

    padding: 0 20px 25px;

}


/* ==========================================
   BANNER
========================================== */

.banner {

    margin: 0 -20px 20px;

    height: 170px;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: black;

    background-image: url("images/banner.png");

    background-size: cover;

    background-position: center;

    border-bottom: 5px solid var(--dark);

}


.banner h1 {

    color: var(--lime);

    font-family: Georgia, serif;

    font-style: italic;

    font-size: 52px;

    text-align: center;

    text-shadow:
        3px 3px var(--dark),
        -2px -2px var(--dark);

}


/* ==========================================
   THREE COLUMNS
========================================== */

main {

    display: grid;

    grid-template-columns:
        1fr
        1.7fr
        1fr;

    gap: 15px;

}


/* ==========================================
   BOXES
========================================== */

.box {

    background: var(--cream);

    border: 5px solid var(--dark);

    border-radius: 15px;

    overflow: hidden;

    margin-bottom: 15px;

}


.box h2 {

    margin: 0;

    padding: 5px 20px;

    background: var(--pink);

    color: var(--lime);

    border-bottom: 5px solid var(--dark);

    font-size: 27px;

}


.box-inside {

    padding: 12px;

}


/* ==========================================
   NAVIGATION BUTTONS
========================================== */

.nav-button,
.social-button {

    display: block;

    padding: 7px;

    margin-bottom: 10px;

    background: var(--button);

    border: 4px solid var(--dark);

    border-radius: 7px;

    color: var(--lime);

    text-align: center;

    font-size: 21px;

    font-weight: bold;

    text-decoration: none;

}


/* BUTTON HOVER */

.nav-button:hover,
.social-button:hover {

    background: var(--pink);

    transform: translateX(4px);

}


/* ==========================================
   INTRO
========================================== */

.intro {

    min-height: 650px;

}


.intro-content {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    padding: 30px 15px;

}


.character {

    width: 55%;

    max-height: 400px;

    object-fit: contain;

}


.intro-text {

    width: 35%;

    padding: 15px;

    background: var(--pink);

    border: 5px solid var(--dark);

    border-radius: 8px;

    color: var(--lime);

    font-size: 25px;

    font-weight: bold;

}


/* ==========================================
   MOODBOARD
========================================== */

.moodboard-area {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 5px;

    padding: 10px;

}


.moodboard-area img {

    width: 100%;

    aspect-ratio: 1;

    object-fit: cover;

    border: 3px solid var(--dark);

}


/* ==========================================
   BLINKIES
========================================== */

.blinkies {

    margin: 10px 15px;

    border: 3px solid var(--dark);

}


.blinkies h3 {

    margin: 0;

    padding: 3px 15px;

    background: var(--pink);

    color: var(--lime);

}

.blinkie-area {

    min-height: 90px;
    
   
    background: var(--button);

    padding: 5px;

}