/* Importing free font from google */
@import url('https://fonts.googleapis.com/css?family=Niconne');

/* ------------------------ Heading -------------------------*/

/* Setting up the flex for the overall heading and main features
   of the headingssssss */

header {
    /* Flex and creating the space between them */
    display:flex;
    justify-content: space-between;
    /* Colour of all the text in headings */
    color: white;
    background: rgba(0,0,0,0.2);
}
    
header nav {
    display:flex;
    justify-content: space-between;
    align-items: center;
    /* Font size and type for navigation bar (centered) */
    font-size: 20px;
    /* Navigation bar (center) font size and type */
    font-size: 23px;
    font-weight: 900;
    line-height: 20px;
    padding-top: 3em;
    padding-bottom: 2em;   
}

/* ------------------- Right side of heading ----------------- */

/* Everything from the right side of the heading */

.rightNav {
    /* Positoning, margining and setting up
       the right side of the div */
    margin-top: auto;
    margin-bottom: auto;
    display:block;
    justify-content: space-between;
    /* Aligning items in the center of the heading */
    align-items: center; 
    /* Spacing out from left side and center */
    margin-right: 2em;
    padding-left: 70px;
    padding-right: 70px;
}

.myButton {
    /* Adding styling to the Bootsrap sign up button */
    font-size: 23px;
    font-weight: 700;
    letter-spacing: 2px;
    /* Spacing between text right and left side */
    padding-left: 60px;
    padding-right: 60px;
    text-transform: uppercase;
    border-radius: 0;
}

.myButton_desktop {
    /* Fixing the button desktop. 
       IMPORTANT FOR MEDIA QUERIES */
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.myButton:active { 
    /* Creates a more effecient button hover effect
       Source of this is from stack overflow */
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.4); 
    transform: scale(.9);
}

.myButton:hover {
    /* Makes button larger on hover */
    transform: scale(1.05);
}

.myButton:focus {
    /* Helps make the hover effect more natural */
    transform: scale(1.05);
}

.rightNav > div {
    /* Fixing the div in the rightNav */
    margin: 8px 0 8px 0;
    width: 100%;
    float: right;
    position: relative;
    text-align: center;
}

.signUp {
    /* Adding sign up text styling */
    font-size: 24px;
    color: white;
    text-decoration: none;
}

.sign_in_button {
    /* Touching up the sign in button 
       IMPORTANT FOR MEDIA QUERIES */
    display: block;
    margin: auto;
    font-size: 26px;
}

.sign_out_button {
    /* Styling the sign out button bootsrap */
    background-color: red;
    border: red;
}

.sign_out_button:hover {
    /* Adding a red border on the hover*/
    background-color: #DC143C;
    border: #DC143C;
}

.acc_name {
    /* Styling the users account name */

    /* Only when user is logged in, you see this */
    margin: 10px 0;
    font-size: 28px;
    text-decoration: none;
    color: #FFFFFF;
}

#acc_name_text {
    /* Making the text colour of the user account name */
    color: #FFFFFF;
}

#acc_name_text:hover {
    /* Making sure there is no underline on hover */
    text-decoration: none;
    color: #0183DA;
}

#acc_name_mobile {
	font-size: 24px;
}

/* ---------------- Left side of heading --------------*/

/* Everything from the left side of the heading */

.leftNav {
    /* Felx and creating the space between them */
    display:flex;
    justify-content: space-between;
    align-items: center;
    /* Margining the sign up button from top of heading */
    margin-left: 2em;    
}

.logo {
      /* Logo font information */
    font-size: 23px;
    font-weight: 700;
      /* Spacing out the logo */
    letter-spacing: 2px;
    padding-left: 60px;
    padding-right: 60px;
      /* Adding the colour */
    background-color: transparent;
    color: whitesmoke;
    border: none;
    /* More font information */
    font-family: 'Niconne', cursive;
    font: bold;
    font-weight: 900;
    font-size: 50px;
    text-decoration: none;
    list-style: none;
    display: inline;
}

.logo:hover {
    /* Making sure no underline on hover */
    text-decoration: none;
    color: whitesmoke;
}

.logo {
    /* Adding more to the logo
       KEEP FOR MEDIA QUERIES */
    font-size: 63px;
    font-weight: 700;
    letter-spacing: 2px;
    font-family: 'Niconne', cursive;
    font: bold;
    font-weight: 900;
    cursor: pointer;
}

/* ------------------- Center of heading ------------------*/

nav ul li{
    /* Removing undelrine and aligning them 
       side by side */
    list-style: none;
    display: inline;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 100px;
    letter-spacing: 5px;
}

nav li > a{
    /* Padding is for the hover background.
       This is the gray background padding. */
    padding: 1.5em;
    padding-top: 1.7em;
    padding-bottom: 1.7em;
    /* Remove the underline */
    text-decoration: none;
    color: white;
}

nav li a:hover {
    /* Adding grey backgorund on hover for centered
       lists */
    text-decoration: none;
    color:whitesmoke;
    background: rgba(255,255,255,.2);
}

/* ------------------- Button --------------------*/

.myButton {
    /* Adding to the bootrap button */
    font-size: 23px;
    font-weight: 700;
    letter-spacing: 2px;
    /* Increasing the spacing on left and rigth side of 
       the button text */
    padding-left: 60px;
    padding-right: 60px;
    text-transform: uppercase;
    border-radius: 0;
}
  
h3 {
    /* Increasing the font size of the heading and
       adding the styling to it */
    text-transform: uppercase;
    font-size: 40px;
    margin: 0px;
    line-height: 0.5em;
}

/* ---------------- Icon and Slider CSS ------------------ */

/* This section of styling is important for the media queries.
   when you decrease the wdith of the window a nav icon displays
   instead of the header. This nav icon will show a slide in 
   header */

.mediaIconDiv {
    /* A nav icon image will show on right side */

    /* Flexing the div and displaying it on the right side */
    display:flex;
    justify-content: space-between;
    align-items: center;
    display: none;
    cursor: pointer;
}

.mediaIcon {
    /* The icon image */
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    /* Dimensions of the icon image */
    width: 95px;
    height: 95px;
    padding: 20px 20px;
    margin-right: 12px;
}

/* The media query nav bar will display on a slider */

.slider {
    /* Hide on regular screen. Want it to show on click. */
    display: none;
}

.slider > ul {
    /* Creating the slider items (aka the stuff on center nav) */
    list-style: none;
    text-transform: uppercase;
    font-size: 28px;
}

.slider_widget_button {
    /* The X button of, returns slider back to none; */
    margin-left: 0px;
    margin-bottom: 10px;
}

#slider_widget_text {
    /* Styling the text on the slider */
    color: white;
    font-size: 18px;
}

#slider_user_widget {
    /* Margining the lider and creating the full height */
    height: 120px;
    border-bottom: 1px solid white;
}

.my_acc_link {
    /* Link to the users account */

    /* Takes you to the users page with prizes */
    font-size: 18px;
    height: 40px;
    padding: auto 0px;
}


/*****************************************\
              DESKTOP VERSION
/*****************************************/


/* -----Responsiveness -----*/
@media only screen and (max-width: 1759px) {

    /* -----Slider Changes----- */
    .logo {
        padding : 0;
    }
}


@media only screen and (max-width: 1632px) {
    /*-----Header Bar Changes ----- */
    nav ul li {
        display: none;
    }

    header > .rightNav {
        display: none;
    }

    .logo {
        padding-left: 0;
        padding-right: 0;
    }

    /* -----Slider Changes----- */
    .slider ul li a {
        font-size: 24px;
        text-decoration: none;
        color: white;
    }

    .slider ul li {
        margin: 0px;
        padding: 10px 20px;
    }

    .mediaIconDiv {
        display: block;
    }

    .slider {
        float : right;
        color : white;
        position : absolute;
        background-color: #3e4f6b;
        padding : 20px 50px;
        width : 600px;
    }

    .slider ul {
        padding: 0px;
    }
}

@media only screen and (max-width: 999px) {

    /* -----Slider Changes----- */
    .slider {
        width : 550px;
    }
}

@media only screen and (max-width: 899px) {
    /* -----Slider Changes----- */
    .slider {
        width : 500px;
    }
}

@media only screen and (max-width: 799px) {
    /* -----Slider Changes----- */
    .slider {
        width : 450px;
    }
}

@media only screen and (max-width: 699px) {
    /* -----Slider Changes----- */
    .slider {
        width : 400px;
    }
}

@media only screen and (max-width: 599px) {
    /*-----Header Bar Changes ----- */
    .logo {
        font-size: 48px;
    }
    
    .mediaIcon {
        width: 90px;
        height: 90px;
        margin-top: 20px;
    }

    /* -----Slider Changes----- */
    .slider {
        width : 100%;
        padding: 0px auto;
        text-align: center;
    }

    .slider_widget_button {
        margin-left: auto;
        margin-right: auto;
    }
    
}

@media only screen and (max-width: 499px) {
    /*-----Header Bar Changes ----- */
    .logo {
        padding-left: 20px;
        padding-right: 20px;
        font-size: 36px;
    }

    .mediaIcon {
        display: block;
        width: 80px;
        height: 80px;
    }

    .mediaIconDiv img {
        width: 100px;
        height: 100px;
    }

    /* -----Slider Changes----- */
    .slider ul {
        padding-left: 0px;
        margin: 0px;
    }

    /* Slider positioning */
    .slider {
        padding: 10px 50px;
    }

    .slider ul li {
        padding: 5px 0px;
    }

    .slider ul li a {
        font-size: 24px;
    }
}

@media only screen and (max-width: 399px) {
    /*-----Header Bar Changes ----- */
    .leftNav {
        margin: 0px;
    }

    /* Fixing the logo */
    .logo {
        margin-top: 10px;
    }

    nav {
        position: absolute;
        left: -999999px;
    }

    .mediaIcon {
        margin-right: 0px;
    }

    .slider_widget_button {
        font-size: 18px;
    }
    
    #slider_user_widget {
        height: 100px;
        border-bottom: solid;
    }

    #acc_name_mobile {
        font-size: 18px;
    }

    .myButton {
        font-size: 16px;
    }
}


/*****************************************\
              MOBILE VERSION
/*****************************************/


@media only screen 
    and (max-width : 414px)  { 

        .mediaIcon {
            margin-top: 15.5px;
            width: 40px;
            height: 40px;
            padding: 31px 31px;
            margin-right: -13.5px;
        }       

        .leftNav {
            margin-left: 12px;
         }
         
         .logo {
             padding-left: 10px;
         }
}

@media only screen 
    and (max-width : 376px)  { 

        .mediaIcon {
            margin-top: 11px;
            width: 20px;
            height: 20px;
            padding: 33px 33px;
            margin-right: -15px;
        }       
}