/* =====================================================
   GAL HEAVEN - MAIN STYLESHEET
   ===================================================== */


/* =====================================================
   BASIC PAGE SETTINGS
   ===================================================== */

body {

    /* CHANGE THIS FONT */
    font-family: Arial, Helvetica, sans-serif;

    /* CHANGE THE MAIN TEXT COLOR */
    color: #4d2448;

    /* REMOVE DEFAULT BROWSER MARGINS */
    margin: 0;

    /* CHANGE THIS BACKGROUND COLOR */
    background-color: #ffd6ec;

    /*
        BACKGROUND IMAGE

        Change "galbg.jpg" to your image filename.

        If you don't want a background image,
        delete these lines.
    */

    background-image: url("galbg.jpg");

    background-size: cover;

    background-attachment: fixed;

    background-position: center;

}


/* =====================================================
   HEADER
   ===================================================== */

.header {

    /*
        CHANGE THE HEADER COLOR HERE
    */

    background: #ff8fcf;

    /*
        SPACE INSIDE THE HEADER
    */

    padding: 25px;

    /*
        CENTER THE TEXT
    */

    text-align: center;

    /*
        BORDER
    */

    border-bottom: 5px solid #ffffff;

}


/* MAIN HEADER TITLE */

.header h1 {

    /*
        CHANGE TITLE SIZE
    */

    font-size: 45px;

    /*
        CHANGE TITLE COLOR
    */

    color: white;

    /*
        REMOVE DEFAULT MARGIN
    */

    margin: 0;

    /*
        SHADOW BEHIND TEXT
    */

    text-shadow:
        3px 3px #d94c9c,
        5px 5px #ffffff;

}


/* HEADER SUBTITLE */

.subtitle {

    /*
        CHANGE THIS COLOR
    */

    color: white;

    /*
        CHANGE SIZE
    */

    font-size: 16px;

    /*
        SPACE ABOVE TEXT
    */

    margin-top: 8px;

}


/* =====================================================
   MAIN WEBSITE LAYOUT
   ===================================================== */

.site-container {

    /*
        MAKES SIDEBAR + CONTENT SIT NEXT TO EACH OTHER
    */

    display: flex;

    /*
        MAXIMUM WIDTH OF YOUR WEBSITE
    */

    max-width: 1100px;

    /*
        CENTERS THE WEBSITE
    */

    margin: 30px auto;

    /*
        SPACE BETWEEN SIDEBAR AND CONTENT
    */

    gap: 20px;

    /*
        SPACE ON SMALL SCREENS
    */

    padding: 0 15px;

}


/* =====================================================
   SIDEBAR
   ===================================================== */

.sidebar {

    /*
        SIDEBAR WIDTH
    */

    width: 220px;

    /*
        PREVENTS SIDEBAR FROM SHRINKING
    */

    flex-shrink: 0;

    /*
        SIDEBAR BACKGROUND
    */

    background: #fff0f8;

    /*
        BORDER
    */

    border: 3px solid #ff75bb;

    /*
        ROUNDED CORNERS

        Make this 0px for a more old-school
        boxy website.
    */

    border-radius: 10px;

    /*
        SPACE INSIDE SIDEBAR
    */

    padding: 15px;

    /*
        MAKES PADDING COUNT INSIDE WIDTH
    */

    box-sizing: border-box;

}


/* =====================================================
   SIDEBAR TITLE
   ===================================================== */

.sidebar-title {

    background: #ff75bb;

    color: white;

    text-align: center;

    font-weight: bold;

    font-size: 20px;

    padding: 10px;

    margin-bottom: 15px;

}


/* =====================================================
   SIDEBAR LINKS
   ===================================================== */

.sidebar nav a {

    /*
        MAKES EACH LINK ITS OWN BUTTON
    */

    display: block;

    /*
        TEXT COLOR
    */

    color: #8c306b;

    /*
        REMOVES UNDERLINE
    */

    text-decoration: none;

    /*
        BACKGROUND
    */

    background: white;

    /*
        SPACE INSIDE BUTTON
    */

    padding: 10px;

    /*
        SPACE BETWEEN BUTTONS
    */

    margin-bottom: 8px;

    /*
        BORDER
    */

    border: 2px solid #ff9dd0;

    /*
        ROUNDED CORNERS
    */

    border-radius: 5px;

}


/* =====================================================
   SIDEBAR HOVER EFFECT
   ===================================================== */

.sidebar nav a:hover {

    /*
        THIS HAPPENS WHEN YOU PUT YOUR MOUSE
        OVER A LINK
    */

    background: #ffb9dc;

    color: white;

    /*
        MAKES IT MOVE SLIGHTLY
    */

    transform: translateX(4px);

}


/* =====================================================
   SIDEBAR BOX
   ===================================================== */

.sidebar-box {

    margin-top: 20px;

    padding: 10px;

    background: #ffe0ef;

    border: 2px dashed #ff75bb;

}


/* SIDEBAR BOX TITLE */

.sidebar-box h3 {

    margin-top: 0;

    color: #d43d8d;

}


/* =====================================================
   SIDEBAR IMAGE
   ===================================================== */

.sidebar-image {

    /*
        IMAGE WIDTH
    */

    width: 100%;

    /*
        PREVENTS IMAGE FROM BREAKING SIDEBAR
    */

    height: auto;

    /*
        SPACE ABOVE IMAGE
    */

    margin-top: 15px;

}


/* =====================================================
   MAIN CONTENT
   ===================================================== */

.content {

    /*
        TAKES UP THE REST OF THE SPACE
    */

    flex: 1;

    /*
        PREVENTS CONTENT FROM OVERFLOWING
    */

    min-width: 0;

}


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

.box {

    /*
        BACKGROUND
    */

    background: rgba(255, 245, 251, 0.95);

    /*
        BORDER
    */

    border: 3px solid #ff8ac8;

    /*
        ROUNDED CORNERS
    */

    border-radius: 10px;

    /*
        SPACE INSIDE
    */

    padding: 20px;

    /*
        SPACE BELOW EACH BOX
    */

    margin-bottom: 20px;

    /*
        SHADOW
    */

    box-shadow: 4px 4px 0px #e66cab;

}


/* =====================================================
   BOX HEADINGS
   ===================================================== */

.box h2 {

    /*
        COLOR
    */

    color: #d63d8d;

    /*
        REMOVE DEFAULT TOP SPACE
    */

    margin-top: 0;

}


/* =====================================================
   NORMAL LINKS
   ===================================================== */

.content a {

    color: #d13b8d;

    font-weight: bold;

}


.content a:hover {

    color: #ff6db5;

}


/* =====================================================
   MAIN IMAGE
   ===================================================== */

.main-image {

    /*
        IMAGE CANNOT BECOME WIDER THAN CONTENT
    */

    max-width: 100%;

    /*
        HEIGHT ADJUSTS AUTOMATICALLY
    */

    height: auto;

    /*
        BORDER
    */

    border: 4px solid white;

    /*
        SPACE BELOW IMAGE
    */

    margin-bottom: 20px;

}


/* =====================================================
   TWO COLUMN SECTION
   ===================================================== */

.two-columns {

    /*
        CREATES TWO BOXES NEXT TO EACH OTHER
    */

    display: flex;

    gap: 20px;

}


/*
    Makes each box take up half the space
*/

.two-columns .box {

    flex: 1;

}


/* =====================================================
   LISTS
   ===================================================== */

.box li {

    margin-bottom: 8px;

}


/* =====================================================
   FUN FACT BOX
   ===================================================== */

.fun-fact {

    /*
        DIFFERENT BACKGROUND
    */

    background: #ffe3f1;

    /*
        DASHED BORDER
    */

    border-style: dashed;

}


/* =====================================================
   FOOTER
   ===================================================== */

footer {

    /*
        FOOTER BACKGROUND
    */

    background: #ff8fcf;

    /*
        TEXT COLOR
    */

    color: white;

    /*
        CENTER TEXT
    */

    text-align: center;

    /*
        SPACE
    */

    padding: 20px;

    /*
        BORDER
    */

    border-top: 4px solid white;

}


/* =====================================================
   MOBILE VERSION
   =====================================================

   This makes the site work better on phones.
   ===================================================== */

@media (max-width: 700px) {


    /*
        SIDEBAR + CONTENT BECOME VERTICAL
    */

    .site-container {

        flex-direction: column;

    }


    /*
        SIDEBAR BECOMES FULL WIDTH
    */

    .sidebar {

        width: 100%;

    }


    /*
        TWO BOXES BECOME ONE COLUMN
    */

    .two-columns {

        flex-direction: column;

    }


    /*
        MAKES HEADER SMALLER
    */

    .header h1 {

        font-size: 32px;

    }

}