/* 
Title: Home Page & Global Styles Page
Author: Jasmine
Updated: 02 06 2025
Version: #8 
*/

/*COLOUR PALETTE
---------------------------------
(easy info for display)

    #023859 - dark blue
    #03658C - light blue
    #80907A - green
    #C8B693 - cream  
    #D99543 - orange
    #A66B37 - copper
    #8C5230 - dark brown

    background-color: #D9CEB8; 

    font & unvisited links: white
*/

/* GLOBAL STYLES 
---------------------------------
each section is labeled. this css is for the repeating nav, 
header, footer and sidebar, and the index page. 
I used two css to easily keep track.*/ 

html {
    background-color: #D9CEB8;
    /*background-image: url(_images/background.jpg);*/
        /*hidden code to easily change the background look*/
}

body {
    color: white; /*universal font colour*/
    font-family: Arial, Helvetica, sans-serif; /*most used fonts*/
    margin: 0;
    overflow-x: clip; /*removes horizontal scroll bar. may cause problems, has fixed others*/
    max-width: 100%;
}

a {
    color: white;
} /*a & a:visited are for the colour of links*/

a:visited {
    color: white;
}

h1 { /*banner heading*/
    font-size: 4em;
    margin: 5px;
}

/* NAVIGATION
---------------------------------
*/

nav {
    background-color: #023859;
    padding: 2px 25px;
    margin: 0;
    position: sticky; /*hard to learn, search internet and ai to 
    help work correctly. sticky lets the nav bar attach to the 
    top of the screen and stay when scrolling down.*/

    top: 0; /*used to tell code what to sticky too*/
    z-index: 101; /*this keeps the nav above all other layers*/
    width: 1200%;
}

/* Banner 
---------------------------------
*/

header {
    background-image: url(_images/banner.jpg); /*banner background as an image 
        instead of a soild colour, learnt in unit week activites*/
    margin: 0;
    padding: 50px 15px 2px 15px; /*up, right, down and left*/
    position: relative; /*used to keep fixed*/
}

header div {
    position: absolute; /*used for images, aboslute instead of float for less problems*/
    bottom: 8px; /*these means positions*/
    right: 16px;
}

.content_strip {
    background-color: #b3aa98;
    padding: 10px;
    font-size: 90%;
    text-align: center;
}

/* Content 1
---------------------------------
*/

#about_us {
    background-color: #80907A;
    margin: 30px 80px;
    padding: 15px 40px;
    border-radius: 25px; /*bevels the coloured edges*/
    columns: 2;
    text-align: center;
}

#scouting {
    background-color: #D99453;
    margin: 30px 80px;
    padding: 15px 40px;
    border-radius: 25px; /*consistent radius*/
    columns: 2;
    text-align: center;
}

/* BLOCKQUOTE  
---------------------------------
*/

blockquote { /*used for all quotes, no id needed*/
    background-color: #A66B37;
    margin: 30px 180px;
    padding: 15px 35px;
    border-radius: 35px;
    text-align: center; /*text is displayed in the 
        center of the box rather than the left*/
}

/* CONTENT 2  
---------------------------------
*/

#join {
    background-color: #D99453;
    margin: 30px 80px;
    padding: 60px;
    border-radius: 25px;
    columns: 3;
}

#join #help {
    /*split up to keep clear to understand*/
    background-color: #03658C;
    padding: 10px 20px;
    width: auto;
    height: 180px;

    /*text based styles*/
    text-align: center;
    font-weight: bolder; 
    font-size: larger;
    letter-spacing: 2px;
    font-size: 1.5em;

    /*border styles*/
    border-style: solid;
    border-color: white;
    border-radius: 1px;
}

#more {
    background-color: #80907A;
    margin: 30px 80px;
    padding: 15px 40px;
    border-radius: 25px;
    columns: 3;
}

/* SIDEBAR  
---------------------------------
*/

#sidebar {
    background-color: #03658C;
    margin: 0; 
    width: 100%;
    display: flex;
    padding-left: 25%;
}

/* FOOTER  
---------------------------------
*/

footer {
    background-color: #023859;
    padding: 0.2px 25px;
    text-align: center;
}




/* MEDIA 
---------------------------------
(included media for all content on this page for less mess in folder)
*/

    /*-- 1200 MAX --*/
        /*mostly uneeded apart from width of all body content. 
        1200, 800 & 600 all labeled. learnt mostly from wk 10 exercise 
        and trial and error of movement*/

@media (max-width: 1200px) {
    body {
        width: 100%;
    }
}

@media (max-width: 900px) {
    header h1 {
        font-size: 340%;
    }
}
    
    /*-- 800 MAX --*/
        /*most is just movement of images and text to display correctly*/

@media (max-width: 800px) {
    
    header h1 {
        font-size: 300%;
    }

    #sidebar {
        padding-left: 70px;
    }

    #about_us {
        columns: 1;
    }

    #scouting {
        columns: 1;
    }

    blockquote {
        margin: 30px 100px;
    }

    #join {
        columns: 1;
        text-align: center;
    }
        
        #join #help {
            height: 120px;
        }

    #join img {
        padding-top: 20px;
    }

    #more {
        columns: 1;
        text-align: center;
    }
        #wa {
            text-align: left;
        }

        #aus {
            text-align: left;
        }
}

@media (max-width: 750px) {
    header h1 {
        font-size: 240%;
        margin-right: 300px;
    }
}

    /*-- 600 MAX --*/
        /*needed more moving than the 800 but similar*/

@media (max-width: 600px) {
    header h1 {
        font-size: 230%;
        margin-right: 250px;
    }

    nav {
        padding-left: 8px;
        font-size: 90%;
    }

    #sidebar {
        font-size: 80%;
    }
    
    footer {
        font-size: 70%;
    }

    blockquote {
        margin: 30px 80px;
    }

        #join #help {
            font-size: 100%;
            height: 100px;
        }

    #nat {
        padding-left: 0;
    }
}

/* sidebar media 
to help keep track 
*/

@media (max-width:1000px) {
    #sidebar {
        padding-left: 15%;
    }
}

@media (max-width:800px) {
    #sidebar {
        padding-left: 5%;
    }
}

@media (max-width:600px) {
    #sidebar {
        padding-left: 2px;
    }
}