*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    font-family: 'Roboto Condensed', sans-serif;
}
body{
    /*hide vertical scrollbar*/
    overflow:hidden;
}
/*--------Navigation Bar--------*/

/*Nav bar container*/
#navigation{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    overflow: hidden;
    padding-left: 1em;
    padding-right: 0.2em;
    background-color: #333;
   
}
/*Holds all nav bar menu items*/
ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
/*Individual nar bar items*/
.navItem{
    align-items: flex-end;
    margin: 0.5em;
    border-radius: 0.5em;
    padding: 0.9em 1em;
    text-decoration: none;
    color: hsl(0, 0%, 95%);
    background-color:rgba(0,0,0,0.2);

    /*font*/
    font-size: 1.3em;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    text-align: center;
}
.navItem:hover{
    transition: 0.5s; /* smoother transition of opacity*/
    background-color: #767188;
}
/*Container holds logo*/
#cat{
    margin: 0.9em 1em;
    margin-left: auto;
    order: 2;
    border-radius: 1em;
    background-color:#c78aa34f;
}
/*Logo image*/
#logo{
    width: 9em;
    height: auto;
    padding: 0.9em 0.8em;
}
/*--------Home Page starts here--------*/

/*Holds entire Home screen*/
#homePage{
    display: flex;
    flex-direction: column;
}
/*Content below Nav bar*/
#pageContent{
    /* positioning */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /*dimensions*/
    width: auto;
    height: 100vh;
    
    /* background image adjustments */
    background-image: url("Images/NewWallpaper.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
/*Holds Purrdle title and description text*/
.introText{
    /*positioning*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0em 2em 3em;
    padding: 2em 0.9em;

    /*background*/
    border-radius: 2em;
    background-color:#333;
}
/*Largest title*/
.largeHeader{
    font-size: 4em;
    font-family: 'Roboto Condensed', sans-serif;
    text-align: center;
    color: white;
}
/*Mini summary of Purrdle*/
.description{
    padding: 0.5em;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    text-align: center;
    color:rgb(255, 255, 255); 
}
/*PLAY button*/
.button{
    max-width: 10em;
    margin: 1.2em 0em 1.5em;
    border: none;
    border-radius: 0.6em;
    padding: 0.6em 2em;
    background-color:#333;
    color: white;

    /* font */
    font-size: 1.5em;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-align: center;
}
#enter:hover{
    /*Smooth transition of opacity and bg-color*/
    opacity: 0.8;
    transition: 0.5s;
    background-color:#E7ACA4;
}
/*---------Main Game Page Starts here--------*/

#mainGame{
    /*dimensions*/
    max-width: 100%;
    height: 100vh;
     
    /* background image adjustments */
    background-image: url("Images/paws.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/*Style game board and letter tiles*/
#guessBoard{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 21.8em;
    margin: 0 auto;
    margin-top: 3em;
}
.tile{
    /*positioning*/
    display: flex;
    justify-content: center;
    align-items: center;

    /*box component*/
    margin: 2.5px;
    border: 2px solid lightgrey;
    width: 60px;
    height: 60px;
    
    /*Letters inside box*/
    font-size: 2.2em;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    background-color: white;
    color:black;
    transition: 0.5s;

}
.correct {
    border-color: #F382AF;
    background-color:#F382AF;
    color:white;
}
.yellow{
    border-color: white;
    background-color:#DB9C7A;
    color:white;
}
.incorrect{
    border-color: white;
    background-color: grey;
    color:white;
}
/*Input box*/
#guessBox{
    margin-top: 2em;
    text-align: center;
}
/*Input Box Styling*/
#item{
    border-radius: 2em;
    padding: 0.5em;
    font-family:'Roboto', sans-serif;
}
/*Guess button*/
#submit{
    margin: 0em 0.5em;
    border-radius: 0.6em;
    border:none;
    padding: 0.6em 2em;
    background-color:#E7ACA4;
    color: white;

    /* font */
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 0.8em;
    text-align: center;
}
#submit:hover{
    /*Smooth transition of opacity and bg-color*/
    opacity: 0.8;
    transition: 0.5s;
    background-color:#F382AF;
}
/*-------Leaderboard-------*/

#leaderBoard{
    /* positioning */
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /*dimensions*/
    width: auto;
    height: 100vh;
    
    /* background image adjustments */
    background-image: url("Images/NewWallpaper.png");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}
#displayGuess{
    border-radius: 2em;
    padding: 5em;
    color: white;
    background-color: #333;
}

/*---------------Media Queries---------------*/

/*Tablet View---> Alot of making text larger*/
@media screen and (min-width:601px) and (max-width:1030px){
    /*Prevent horizontal shifting on webpage*/
    html, body {
        max-width: 100%;
        overflow-y: hidden;
    } 

    /*Individual nar bar items*/
    .navItem{
        padding: 0.5em 0.5em;
        font-size: 1.5em;
    }

    /*Logo image*/
    #logo{
        width: 10em;
        height: auto;
        padding: 0.9em 0.5em;

    }
    /*Black background of title*/
    #introText{
        margin: 0em 1.5em;
    }

    /*Mini summary of Purrdle*/
    #description{
        font-size: 2em;   
    }
    /*PLAY button*/
    .button{
        font-size: 2em;
    } 
  

}
/*Mobile View--> Same adjustments as Tablet view, but different sizing*/
@media screen and (max-width:600px){

    /*Prevent horizontal shifting on webpage*/
    html, body {
        max-width: 100%;
        overflow-y: hidden;
    }
   
    /*Individual nar bar items*/
    .navItem{
        padding: 0.5em 0.5em;
        font-size: 1.2em;
    }

    /*Logo image*/
    #logo{
        width: 5em;
        height: auto;
        padding: 0.9em 0.5em;

    }
    /*Navigate title contents a little higher on the screen */
    #pageContent{
        margin-bottom: 1em;
    }
    #introText{
        margin: 0em 1.5em;
    }

    /*Mini summary of Purrdle*/
    #description{
        font-size: 1.7em;   
    }
    /*PLAY button*/
    .button{
        font-size: 1.3em;
    } 
    #mainGame{
        background-image: url("Images/miniPaws.png");
    }
 
}