@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

::content{width:1600px; margin: 0 auto;}
header{
    background-color: #2b2c28;
    display: grid;
    grid-template-columns: 200px auto;
    justify-content: center;
    align-items: center;
}
nav a{
    text-align: center;
    color: #ffcb08;
    text-decoration: none;
    padding: 25px;
    font-style: bold;
}
nav a:hover{
    background-color: #3c5aa6;
    color: #c7a008;
}
nav{
    display: flex;
    justify-content: space-around;
}
.logo{
    width: 150px;
}
.icon{
    width: 80px;
    padding-bottom: 10px;
    grid-template-columns: 1/2;
    justify-content: left;
    border-radius: 100px;
}
#logolink{
    padding-top: 5px;
    justify-self: center;
    align-self: center;
}
body{
    font-family: "Press Start 2p";
    background-color: white;
    font-size: 15px;
    margin: 0;
    padding: 0;
}
p{
    font-family: "Bangers", "Rock Salt", "sans-serif";
    font-size: 22px;
}
.region{
    font-family: "Bangers", "Rock Salt", "sans-serif";
    font-size: 20px;
    color: #f7d02c;
}
.professor{
    font-family: "Bangers", "Rock Salt", "sans-serif";
    font-size: 20px;
    color: #6390f0;
}
.criminal{
    font-family: "Bangers", "Rock Salt", "sans-serif";
    font-size: 20px;
    color: #ffcb08;
}
.legendary{
    font-family: "Bangers", "Rock Salt", "sans-serif";
    font-size: 20px;
    color: #3c5aa6;
}
.homeGrid{
    display: grid;
    grid-template-columns: repeat(30,1fr);
}
#spacer{
    grid-row: 1/2;
    background-color: white;
    height: 50px;
}
iframe{
    grid-column: 10/28;
    grid-row: 2/5;
    width: 100%;
    height: 450px;
    text-align: right;
    box-shadow: 0px 0px 20px #3c5aa6;
    padding: 15px;
    background-color: #2b2c28;
    justify-content: center;
}
.themeSong{
    grid-column: 10/28;
    grid-row: 5/7;
    text-align: center;
}
.pokemonRed{
    grid-column: 9/15;
    grid-row: 7/8;
    text-align: center;
    background-color: #ee8130;
    height: max-content;
}
.redImg{
    height: 50%;
    width: 90%;
}
.redImg:hover{
    transform: scale(1.05);
    transition: 200ms;
}
.pokemonBlue{
    grid-column: 16/22;
    grid-row: 7/8;
    text-align: center;
    background-color: #6390f0;
    height: max-content;
}
.blueImg{
    height: 50%;
    width: 90%;
}
.blueImg:hover{
    transform: scale(1.05);
    transition: 200ms;
}
.pokemonYellow{
    grid-column: 23/29;
    grid-row: 7/8;
    text-align: center;
    background-color: #f7d02c;
    height: max-content;
}
.yellowImg{
    height: 50%;
    width: 90%;
}
.yellowImg:hover{
    transform: scale(1.05);
    transition: 200ms;
}
.pokemonGames{
    grid-column: 9/29;
    grid-row: 8/12;
    justify-content: center;
    text-align: center;
    background-color: #2b2c28;
    margin-top: 20px;
    color: #f7d02c;
    height: max-content;
    display: flex;
}
.pokemonGamesTitle{
    flex: auto;
}
.pokemonImg{
    width: 65%;
    padding: 25px;
    flex-wrap: left;
}
.msg{
    grid-column: 24/29;
    grid-row: 9/13;
    color: #f7d02c;
    flex-wrap: right;
    padding-right: 15px;    
    align-self: center;
}
.sidebar{
    grid-column: 2/7;
    grid-row: 2/11;
    font-size: 25px;
    border-right: 2px solid #2b2c28;
    display: block;
    height: max-content;
    padding-right: 10px;
    text-align: left;
    line-height: 7px;
}
h5{
    text-align: center;
}
footer a{
    color: #ffcb08;
    text-decoration: none;
}
footer a:hover{
    color: #c7a008;
}
footer{
    background-color: #2b2c28;
    padding: 25px 50px;
    margin-top: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
footer .social img{
    width: 50px;
}
.logoFooter{
    align-self: center;
    width: 150px;
}