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

#background {
    position: absolute;
    /* Covers the full screen */
    width: 100%;
    height: 100%;
      /* Includes the background image */
    background-image: url(../Images/main_background.png);
    background-size: cover;
    margin: 0;
    /* Covers full scrern for height.
       Helps for the mobile resposive */
    min-height: 100vh;
}

#overlay {
     /* Blue overlay over the gif */
    background: rgba(39,62,84,0.89);
    overflow: hidden;
    /* Overlay needs to be positioned over background */
    z-index: 2;
    height: 100%;
    position: relative;
}

/* -------------------- Main Title ------------------- */

.titleText {
    /* Styling for the typewritter and title of the homepage */
    position: relative;
    /* Margining it from top */
    top: 200px;
    /* Centering everything including the text */
    text-align: center;
    display: block;
    margin: 0 auto;
    /* Adding the colour */
    color: whitesmoke;
    z-index: -1;
}

h1 {
    /* Font information for the title of the homepage */
    font-family: 'Niconne', cursive;
    font: bold;
    font-weight: 900;
    font-size: 200px;
    /* Giving the text a shadow */
    text-shadow: 5px 5px black
}

.middleText {
    text-transform: uppercase;
    font-size: 40px;
    margin-top: 0.5em;
}

p {
    margin: 0px;
}

/*--------------- Page Load Fade In Effects ---------------------- */

/* Making the entire header fade in */

header {
    /* Adding animation effect */
    -webkit-animation: fadein 1.2s; /* Safari, Chrome and Opera > 12.1 */
    animation: fadein 1.2s;
}

/* Creating the fade in effect through CSS */
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Making the entire text including the heading and type writter fade in */

.titleText {
    /* Adding animation effect */
    -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
    animation: fadein 5s;
}
    
/* Creating the fade in effect through CSS */
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
        
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Type Write Effect */
.txt-type > .txt {
    border-right: 3px solid white;
}

/* Easter Egg */
#easter {
    /* Hides the easter egg from the user */
    cursor: pointer;
    position:absolute;
    bottom:0;
    right:0;
    margin: 40px;
    opacity: 0;
}

#easter:hover {
    /* Displays the easter egg if the mouse hovers over it */
    opacity: 1;
}

.dust {
    position: absolute;
}


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


@media only screen 
    and (min-width : 700px)
    and (max-width : 1024px) {
        /* Fixing the margin from the top */
        .titleText {
            top: 210px;
        }
        
        /* Resizing the title text */
        h1 {
            font-size: 140px;
        }
        
        .middleText {
            font-size: 42px;
            line-height: 1.3em;
            margin-left: 5%;
            margin-right: 5%;
        }
}

@media only screen 
    and (min-width : 500px)
    and (max-width : 699px) {
        /* Fixing the margin from the top */
        .titleText {
            top: 150px;
        }
        
        /* Resizing the title text */
        h1 {
            font-size: 100px;
        }
        
        .middleText {
            font-size: 32px;
            line-height: 1.3em;
            margin-left: 5%;
            margin-right: 5%;
        }
}

@media only screen 
    and (min-width : 415px)
    and (max-width : 499px) {
        /* Fixing the margin from the top */
        .titleText {
            top: 120px;
        }
        
        /* Resizing the title text */
        h1 {
            font-size: 64px;
        }
        
        .middleText {
            font-size: 24px;
            line-height: 1.3em;
            margin-left: 5%;
            margin-right: 5%;
        }
}

@media only screen 
    and (max-width : 415px) {
        /* Fixing the margin from the top */
        .titleText {
            top: 100px;
        }
        
        /* Resizing the title text */
        h1 {
            font-size: 33px;
        }
        
        .middleText {
            font-size: 20px;
            line-height: 1.3em;
            margin-left: 5%;
            margin-right: 5%;
        }
}


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


/* Phones such as the Pixel, or any with a width around 400px */
@media only screen 
    and (max-width : 415px)  { 
        /* Fixing the margin from the top */
        .titleText {
            top: 150px;
        }
        
        /* Resizing the title text */
        h1 {
            font-size: 92px;
        }
        
        .middleText {
            font-size: 20px;
            line-height: 1.3em;
            margin-left: 5%;
            margin-right: 5%;
        }
        
}

/* Phones such as the Iphone X, Iphone 6,7,8 */
@media only screen 
    and (max-width : 375px)  { 
        /* Fixing the margin from the top */
        .titleText {
            top: 170px;
        }
        
        /* Resizing the title text */
        h1 {
            font-size: 85px;
        }
        
        .middleText {
            font-size: 20px;
            line-height: 1.3em;
            margin-left: 5%;
            margin-right: 5%;
        }
        
}

@media only screen 
    and (max-width : 375px)  { 
        /* Fixing the margin from the top */
        .titleText {
            top: 120px;
        }
        
        /* Resizing the title text */
        h1 {
            font-size: 64px;
        }
        
        .middleText {
            font-size: 20px;
            line-height: 1.3em;
            margin-left: 5%;
            margin-right: 5%;
        }
        
}

/* Smaller phones, such as Iphone 5 */
@media only screen 
    and (max-width : 320px)  { 
        .titleText {
            top: 100px;
        }
        
        /* Resizing the title text */
        h1 {
            font-size: 70px;
        }
        
        .middleText {
            font-size: 18px;
            line-height: 1.3em;
            margin-left: 5%;
            margin-right: 5%;
        }
}