@import url('https://fonts.googleapis.com/css?family=IM+Fell+French+Canon+SC|Lato');

@font-face {
  font-family: PokemonEmeraldNarrow;
  src: url(/styles/fonts/pokemon-emerald-narrow.ttf);
}

@font-face {
  font-family: PokemonGenThreeBattle;
  src: url(/styles/fonts/pokemon-gen3-battle.otf);
}

 :root {
  --primary-color: #EFF9F0   ;
  --secondary-color: #CC2936 ;
  --accent1-color: #247BA0;
  --accent2-color: #4C1A57;
  --accent3-color: #3D3A4B;
  --accent4-color: #FDCA40;
  --accent5-color: #FFA69E;

  --heading-font: PokemonGenThreeBattle;
  --paragraph-font: PokemonEmeraldNarrow, Lato, Helvetica, sans-serif;

  --headline-color-on-white: #247BA0;  /* headlines on a white background */ 
  --headline-color-on-color: white; /* headlines on a colored background */ 
  --paragraph-color-on-white: #3D3A4B; /* paragraph text on a white background */ 
  --paragraph-color-on-color: #EFF9F0; /* paragraph text on a colored background */ 
  --paragraph-background-color: #CC2936; /* paragraph background color */
  --nav-link-color: #FFA69E;
  --nav-background-color: #4C1A57;
  --nav-hover-link-color: #FDCA40;
  --nav-hover-background-color: #3D3A4B;
}

header {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
}

.navigationButtons {
    display: flex; /* Enables flexbox */
    gap: 10px; /* Adds space between buttons */
    justify-content: center; /* Centers buttons horizontally */
}

.homeButton {
    display: flex;
    align-items: center;
    border: 6px solid var(--accent3-color); /* This applies the border */
    padding: 10px; /* Adds padding for better spacing */
    background-color: var(--secondary-color); /* Optional: Background color for visibility */
    border-radius: 40%; /* Optional: Rounded corners */
}

.homeButton a {
    text-decoration: none; /* Removes underline */
    font-size: 2.5rem; /* Makes the text large */
    color: var(--primary-color); /* Change to any color (example: yellow) */
    font-family: var(--paragraph-font);
    font-weight: bold; /* Optional: Make it bold */
    display: inline-block; /* Helps with spacing if needed */
    transition: color 0.3s ease; /* Smooth color change on hover */
}

.gen5Button {
    display: flex;
    align-items: center;
    border: 6px solid var(--accent3-color); /* This applies the border */
    padding: 10px; /* Adds padding for better spacing */
    background-color: var(--accent1-color); /* Optional: Background color for visibility */
    border-radius: 40%; /* Optional: Rounded corners */
}

.gen5Button a {
    text-decoration: none; /* Removes underline */
    font-size: 2.5rem; /* Makes the text large */
    color: var(--secondary-color); /* Change to any color (example: yellow) */
    font-family: var(--paragraph-font);
    font-weight: bold; /* Optional: Make it bold */
    display: inline-block; /* Helps with spacing if needed */
    transition: color 0.3s ease; /* Smooth color change on hover */
}

.gen6Button {
    display: flex;
    align-items: center;
    border: 6px solid var(--accent4-color); /* This applies the border */
    padding: 10px; /* Adds padding for better spacing */
    background-color: var(--accent3-color); /* Optional: Background color for visibility */
    border-radius: 40%; /* Optional: Rounded corners */
}

.gen6Button a {
    text-decoration: none; /* Removes underline */
    font-size: 2.5rem; /* Makes the text large */
    color: var(--paragraph-color-on-color); /* Change to any color (example: yellow) */
    font-family: var(--paragraph-font);
    font-weight: bold; /* Optional: Make it bold */
    display: inline-block; /* Helps with spacing if needed */
    transition: color 0.3s ease; /* Smooth color change on hover */
}

.homeButton:hover, .gen5Button:hover, .gen6Button:hover {
    background-color: var(--accent2-color); /* Optional: Background color for visibility */
    border: 6px solid var(--accent3-color);
}

.homeButton a:hover, .gen5Button a:hover, .gen6Button a:hover {
    color: var(--nav-link-color);
}

body {
    background-color: var(--primary-color);
    font-family: var(--paragraph-font);
    color: #247BA0;
    padding: 50px;
    box-sizing: border-box;
}

.pokemon {
    /* display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: .5fr .25fr .25fr 1fr;
    border: #247BA0 solid 6px; 
    margin:10px 10px 10px 10px;  */
    display: flex;
    flex-direction: column;
}

.pokeInfo {
    display: flex;
}

.spriteImage {
    margin: 20px;
    padding: 0;
    width: 40%;
}

.pokedex {
    display: flex;
    flex-direction: column;
}

.pokedexDescription {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    grid-column: 2/4;
    grid-row: 2/3;
    margin-right: 20px;
    margin-bottom: 0; 
}

.sAndw {
    display: flex;
    justify-content: center;
}

.weaknesses {
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    grid-column: 2/3;
    grid-row: 3/4;
    color: #4C1A57;
    margin-top: 20px;
    margin-right: 20px;
}

.strengths {
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    grid-column: 3/4;
    grid-row: 3/4;
    color: #4C1A57;
    margin-top: 20px;
}

h1 {
    font-size: 35px;
    font-family: var(--paragraph-font);
    background-color: #CC2936;
    color: white;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

.pokeInfoP2 {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.pokeStats {
    width: 30%;
}

.evoLineNav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 0;
}

.nextButton {
    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}

.evoLine {
  width: 75%;
  height: auto;
  margin: 0px;
}

.previousButton {
    clip-path: polygon(100% 20%, 40% 20%, 40% 0%, 0% 50%, 40% 100%, 40% 80%, 100% 80%);
}

.nextButton, .previousButton {
  width: 50px;
  height: 50px;
  background-color: var(--accent1-color);
  color: var(--headline-color-on-color); /* White text */
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: bold;
  font-family: var(--heading-font);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nextButton:hover, .previousButton:hover {
  background-color: var(--accent2-color);
} 

@media (max-width: 768px) {
    .pokeInfo {
        flex-direction: column;
        align-items: center;
    }

    .spriteImage img {
        margin: 0px;
        width: 100%;
    }

    .pokeInfoP2 {
        flex-direction: column;
        justify-content: space-around;
    }

    .pokeStats{
        width: 70%;
    }

    .evoLine {
        width: 100%;
    }
}

@media (max-width: 426px) {
    .navigationButtons {
        flex-direction: column;
    }

    .spriteImage {
        margin: 0px;
        width: 100%;
    }

    .pokeStats{
        width: 110%;
    }

    .evoLine {
        width: 105%;
    }

}