/*Importing Fonts from Google */
    
    /* font-family: 'Mansalva', cursive; */
    @import url('https://fonts.googleapis.com/css?family=Mansalva&display=swap');

    /* font-family: 'Caveat Brush', cursive; */
    @import url('https://fonts.googleapis.com/css?family=Caveat+Brush&display=swap');

    /* font-family: 'Nunito', sans-serif; */
    @import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');

    /* font-family: 'Merienda One', cursive; */
    @import url('https://fonts.googleapis.com/css?family=Merienda+One&display=swap');

    /* font-family: 'Sniglet', cursive; */
    @import url('https://fonts.googleapis.com/css?family=Sniglet&display=swap');

    /* font-family: 'Baloo Da 2', cursive; */
    @import url('https://fonts.googleapis.com/css?family=Baloo+Da+2&display=swap');


/* Font Library */
p, li {
    font-size: 18px;
    font-family: 'Baloo Da 2', cursive;
    color:white;
}

.redMe {
    color: rgb(83, 3, 0);
}

h2 {
    font-family: 'Mansalva','Helvetica';
    font-size: 32px;
    color:white;
}

h3 {
    font-size:24px;
    font-family: 'Merienda One', cursive;
    /*font-family: 'Sniglet', cursive;*/
    margin-top: 2%;
    margin-bottom: 0;
}

h4 {
    font-size:20px;
    font-family: 'Sniglet', cursive;
    font-style: normal;
    margin: 4% 1% 2% 1%;
}

h5 {
    font-size:16px;
    font-family: 'Sniglet', cursive;
    font-style: normal;
    margin:0;
}

h6 {
    font-size: 20px;
    font-family: 'Sniglet', cursive;
    font-style: normal;
    margin: 0% 1% 0% 1%;
}

.boxFont {
    font-family: 'Baloo Da 2', cursive;
    font-size: 18px;
    
}


/*Main page stuff */

html{
    scroll-behavior: smooth
}

body {
    background-image: url(../images/background_texture.png);
    background-repeat: repeat-y;
    background-size: 100vw;
    background-color: black;
    text-align: center;
    margin: 0;
}

.mainImage
{
    position: relative;
    top: 0;
    left: 0;
    max-width: 100%;
}
.logoImage
{
    position: absolute;
    top: 70%;
    max-width: 30%;
    left: 35%;
    text-align: center;
    opacity: 1;
}

/*Creating the Menu Bar*/
.navBar {
    width: 100%;
    text-align: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    position: -webkit-sticky; /* Safari */
    position: fixed;
    transition: top 0.3s;
    top: 3%;
    z-index: 999;
}
 
.navBar li {
font-family: 'Sniglet', cursive;
font-size: 1.1vw;
display: inline;
}

.navBar a {
display: inline-block;
color: white;
text-align: center;
padding: 1% 1.2%;
text-decoration: none;
}

.navBar a:hover {
background-color: #111;
color: rgb(178, 38, 34);
border-width: 1px;
border-radius: 8px;
border-color: rgb(178, 38, 34);
border-style: hidden,hidden,solid,hidden;
}

/*Creating the Menu Bar for Mobile*/

#navBarMobile {
    display:none;
}

.navBarMobile {
    width: 90%;
    text-align: center;
    list-style-type: none;
    margin-left: 5%;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    position: -webkit-sticky; /* Safari */
    position: fixed;
    transition: top 0.3s;
    top: 3%;
    z-index: 999;
}
 
.navBarMobile li {
font-family: 'Sniglet', cursive;
font-size: 24px;
}

.navBarMobile a {
display: inline-block;
color: white;
text-align: center;
padding: 1% 1.2%;
text-decoration: none;
}

#dropDownMenu {
    background-color:rgba(2, 2, 2, 0.8);
}

.dropDownContent {
    display: none;
    position: relative;
    width: 100%;
    text-align: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transition: top 0.3s;
    top: 3%;
    z-index: 999;
    background-color:rgba(2, 2, 2, 0.8);
}

.menuHr {
    border-top: 1px solid whitesmoke;
}

.showDropDown {display: block;}


/* Creating the showpage */
#showCase {
    width: 70%;
    margin-left: 15%;
    text-align: center;
    background-color: transparent;
}

.newColumn {
    width: 100%;
    height: auto;
    display:flex;
    background-color: transparent;
    margin-bottom: 6%;
}


/* General rules in text columns */

    /*One element in column*/ 

    .oneCenter {
        width: 50%;
        height: auto;
        margin-left:25%;
        text-align: center;
        background-color: transparent;
    }


    /*Two elements in column*/
    /* Basic Frames */
    .twoLeft {
        width: 50%;
        height: inherit;
        float: left;
        position: relative;
    }

    .twoRight {
        width:50%;
        height: inherit;
        float: right;
        position: relative;
    }

      

    /* Text Handling */
    .leftText {
        width:80%;
        height: inherit;
        padding-right: 4%;
        text-align: left;
        float: right;
    }
    .rightText {
        width:80%;
        height: inherit;
        padding-left: 4%; 
        text-align: left;
        float: left;
    }

    .centerText {
        width:80%;
        height: inherit;
        padding-left: 4%; 
        text-align: center;
        float: left;
    }

    
    
    /*Image Handling */
    .twoLeft img, .twoRight img {
        max-width: 78%;
        position:relative;   
        top: 50%;
        transform: translateY(-50%);
        display: inline-block;
    }

    .oneCenter img {
        max-width: 78%;
        position:relative;
        display: inline-block;
    }

    .centerText img {
        max-width: 78%;
        position:relative;   
        top: 50%;
        transform: unset;
    }


    /* List Handling */
    .twoLeft ul, .twoRight ul, .oneCenter ul, .centerText ul {
        display: inline-block; 
        text-align:left;
    }



/* General button Handling */
    /* Standard Column Button */
    .columnButton {
        height: auto;
        display: inline-block;
        background-color:  whitesmoke;
        font-family: 'Mansalva','Helvetica';
        font-size: 140%;
        color: #111;
        text-align: center;
        padding: 1% 6%;
        border-left: 1vw solid rgb(83, 3, 0);
        border-radius: 4%;
        text-decoration: none;
    } 
    
    .columnButton:hover{
        color: rgb(83, 3, 0);
        border-left: 1vw solid #111;
        transform: scale(0.95);
        
    }
    /*Ignore Standard Styling */
    .noStyling a{
        height: unset;
        display: inline-block;
        background-color:  unset;
        font-family: unset;
        font-size: unset;
        color:unset;
        text-align: unset;
        padding: 1% 6%;
        border-left: unset;
        border-radius: unset;
        text-decoration: unset;
    }

    .noStyling a:hover {
        color: unset;
        border-left: unset;
        transform: scale(0.90);  
    }


/* Creating the Footer */

#footer {
    width: 80%;
    margin-left: 10%;
}

.footerTitle {
    font-family: 'Merienda One', cursive;
    font-size:22px;
    color:rgb(178, 38, 34);   
}

.footerTitle img {
    max-width:10%;
}

.footerText, .footerText a{
    font-family: 'Baloo Da 2', cursive;
    text-decoration: none;
    color: black;
    text-align: center;
    font-size: 14px;
    
}

.footerText a:hover {
    color: rgb(83, 3, 0);
}




 

/* Resizing of the frames for Mobile and such */

/* The tags to show or not show something on Mobile */
.onlyMobile, .onlyMobileBoxes {
    display: none;
    width: 100%;
}


@media only screen and (max-width:800px) {
    /* For mobile phones: */
    #showCase{
        width:90%;
        margin:unset;
        margin-left:5%;
    }

    .logoImage{
        width:50%;
        left:26%;
    }

    .footerTitle {
        font-family: 'Merienda One', cursive;
        font-size:16px;
        color:rgb(178, 38, 34);   
    }
    
    .footerTitle img {
        max-width:24%;
    }
    
 

    /*Adjusting the menu on mobile */


    p, li {
        font-size: 16px;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    #navBar{
        display: none;
    }

    .noMobile {
        display: none;
        width: 0%;
    }

    .showMobile, .onlyMobileBoxes {
        width: 100%;
        display: block;
    }

    .onlyMobile {
        display: flex;
    }

    .leftText, .rightText, .centerText, .oneCenter {
        width: 100%;
        height: auto;
        margin-left: 0;
        text-align: center;
        background-color: transparent;
        padding-left: 0;
        padding-right:0;
    }

    #navBarMobile {
        display: block;
    }


    
}
      /* Colour Archive
        Reddish Color: 
            rgb(178, 38, 34)

        Dark Reddish Color:
            rgb(83, 3, 0)
        
        Dark Brownish Color:
            rgb(66, 36, 20)

        Background Grey
            rgb(230, 227, 227)

      */