/* Box Model Hack */
* {
     box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/
body{
     font-size: 16px;
     background-color: rgb( 60, 111, 177);
}


#home {
     background-image: url(../images/pokemon-city.jpg);
     background-repeat: no-repeat;
     background-size: cover;
background-position: center;
     height: 100vh;
}

.searchBar{
     display: flex;
     align-items: center;
     justify-content: center;
     height: 10em;
     overflow: auto;
}
input{
     width: 50%;
     height: 25%;
     border: 3px solid rgb( 60, 111, 177);
     border-radius: 5px;
     background-color: rgb(248, 246, 242);
     font-family: "Futura", Arial, Helvetica, sans-serif;
}
button{
     height: 25%;
     width: fit-content;
     margin-left: 1%;
     border-radius: 5px;
     border: 3px solid rgb( 52, 99, 176);
     background-color: rgb(237, 20, 30);
     transition: all 0.5s ease;
     display: flex;
     align-items: center;
     justify-content: center;
}
a{
     color: white;
     font-family: "Futura", Arial, Helvetica, sans-serif;
     font-weight: 700;
     text-shadow: 
    -2px 0 rgb(160, 10, 15),  /* Left */
    2px 0 rgb(160, 10, 15),   /* Right */
    0 -2px rgb(160, 10, 15),  /* Top */
    0 2px rgb(160, 10, 15); 
    cursor: pointer;
    font-size: 1em;
    padding: 0 2%;
    text-decoration: none;
}
button:hover{
     border: 3px solid rgb( 248, 205, 70);
}
.logoContainer{
     display: flex;
     align-items: center;
     justify-content: center;
     height: fit-content;
     margin-top: 10%;
}
.logo{
     width: 40%;
     height: auto;
     padding: 0;
     margin: -2em;
}
#logoTop{
     max-height: fit-content;
     margin: 0;
     background-color: rgb(217, 69, 69);
     border-bottom: 5px solid white;
     border-bottom-left-radius: 30px;
     border-bottom-right-radius: 30px;
     width: 100%;
     box-shadow: 0px 0px 10px 0px black;
}
#searchLogo{
     display: flex;
     align-items: center;
     justify-content: center;
     transform: scale(70%);
     cursor: pointer;
}
#cards{
     height: fit-content;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
}
#cards img{
     width: 21%;
     margin: 1%;
     transition: all .2s ease;
     box-shadow: 0 4px 15px -2px black;
}
#cards img:hover{
     transform: scale(1.1);
     cursor: pointer;
}
img{
     width: 60%;
}
/******************************************
/* LAYOUT
/*******************************************/
header {

}

footer {

}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/