:root { /* root means applies to everything */
    --header-image: url('/k.Website_Banner.png'); /*set header image*/
    --body-bg-image: url('/k.background4web.png'); /*set background image*/
    --content: #43256E; /*set colour of?*/
}

/* import fonts section: */

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
    font-style: italic;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
    font-style: italic;
    font-weight: bold;
}


body { /* body means your webpage */
    font-family: 'Nunito', sans-serif; /* set default font */
    color: #fceaff; /* set default font colour */
    
    margin: 0; /* aligns page (ignore) */
    
    background-image: var(--body-bg-image); /* sets the background image to the one defined in the "root" section above  */
    background-size: contain;
    background-repeat: repeat;
    background-attachment: fixed;   
    background-color: #08031A; /* set background colour (for when background image doesn't load) */
}

* {
    box-sizing: border-box; /* ?? */
}

#container { /* the floating page in the middle of your webpage */
    max-width: 1200px;
    margin: 100px auto; /* aligns container in relation to body */
}

#container a { /* container links */
    color: #ED64F5; /* set font colour for links */
    font-weight: bold; 
}

#header {
    width: 100%;
    height: 150px;
    
    background-image: var(--header-image);
    background-size: cover;
    background-color: #5e4e8c; /* set background colour (for when background image doesn't load */
    background-repeat: no-repeat;
}

/* navigation section!! */
#navbar {
    height: 40px;
    width: 100%;
    
    background-color: #13092D; /* set navbar background colour */
}

#navbar ul { /* formatting navbar (ignore)*/
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li { /* formatting navbar (ignore)*/
    padding-top: 10px;
}

#navbar li a { /* navigation links*/
    color: #ED64F5; /* navbar text color */
    font-weight: 800;
    text-decoration: none; /* this removes the underline */
}

#navbar li a:hover { /* navigation link when a link is hovered over */
    color: #a49cba; 
    text-decoration: underline;
}

#flex { /* contains left sidebar and main sections */
    display: flex;
}

aside { /* left sidebar */
    background-color: #241445;
    width: 400px;
    padding: 20px;
    font-size: smaller; /* this makes the sidebar text slightly smaller */
}

main {
    background-color: #43256E;
    flex: 1;
    padding: 10px;
    order: 2;
  
}

#leftSidebar {
    order: 1;
}

footer {
    background-color: #13092D; /* background color for footer */

    width: 100%;
    height: 40px;
    padding: 10px;
    text-align: center; /* this centers the footer text */
}

h1,
h2,
h3 {
    color: #ED64F5; /* set default heading text colour */
}

h1 {
    font-size: 25px;
}

strong { /* this styles bold text */
    color: #ED64F5; /* bold font colour */
}

.box { /* this is just a random box */
    background-color: #13092D;
    border: 1px solid #ED64F5;
    padding: 30px;
}

#topBar {
    width: 100%;
    height: 30px;
    padding: 10px;
    font-size: smaller;
    background-color: #490C7E;
}

/* BELOW THIS POINT IS MEDIA QUERY - important for mobile functionality!!!*/

@media only screen and (max-width: 800px) {
    #container{
      margin: 0 auto;
    }
    
    #header{
      height: 50px;
    }
    
    #flex {
        flex-wrap: wrap;
    }

    aside {
        width: 100%;
    }

    main {
        order: 1;
        width: 100%;
    }
    
    .yt {
      width: 250px;
      height: auto;
      margin: auto auto;
    }

    #leftSidebar {
        order: 2;
        
    }

    #rightSidebar {
        order: 3;
    }

    #navbar ul {
        flex-wrap: wrap;
    }
}