@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Oswald", sans-serif;
    text-decoration: none;
}
body{
    background-color: #1C1A1A  ;
}
header div.logo{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #E83E03;
}
header div.logo img{
    margin-left: 10px;
    margin-top: 10px;
}
header div.logo a{
    color: white;
    font-weight: bold;
    font-size: 30px;
    margin-right: 20px;
}
header div.logo a:hover{
    transition: .5s;
    opacity: .8;
    font-size: 25px;
}
nav.nav{
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #1C1A1A;
}
nav.nav a#personagens{
    text-decoration: underline;
    transition: 0.5s;
}
nav.nav a {
    color: white;
    font-weight: bold;
    font-size: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
}
nav.nav a:hover {
    transition: 0.5s;
    font-size: 25px;
    opacity: .8;
    text-decoration: underline;
}
/* main */
section.personagem{
    background-color: #430098;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-around;
}

section.personagem img{
  padding: 20px 10px;
  height: 100%;
}
section.personagem h1{
    font-size: 40px;
}
section.personagem p{
    font-weight: bold;
    font-size: 20px;
}
/* goku */
section.personagens{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
    
}
div.goku{
    background-color: #E83E03;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 1000px;
    margin-top: 30px;
    margin-bottom: 30px;
    cursor: pointer;
    transition: 0.5s;
}
div.goku img{
    height: 276px;
}
div.goku_div{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
div.goku_div img.seta,div.goku.active img.seta,div.vegeta.active img.seta,div.gohan img.seta,div.gohan.active img.seta,div.cell.active img.seta{
    height: 167px;
}
div.goku_div span{
    font-weight: bold;
    font-size: 25px;
    margin-right: 160px;
}
/* active */
div.goku.active{
   display: none;
   flex-direction: column;
   border: 1px solid white;
   transition: 0.5s;

    
}
div.lado{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
div.lado img.seta{
    margin-left: 390px;
}
div.goku.active img{
    height: 600px;
   
}
div.goku_div.active{
    display: flex;
    flex-direction: column;
}
div.embaixo p{
    width: 700px;
    text-align: center;
    margin: 0 auto;
    color: white;
    font-weight: bold;
    margin-bottom: 20px;
}
div.embaixo  audio{
    color: #1C1A1A;
}
/* vegeta */
div.vegeta{
    background-color: #062E5C;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 1000px;
    margin-top: 30px;
    margin-bottom: 30px;
    cursor: pointer;
    transition: 0.5s;
}
div.vegeta img{
    height: 276px;
}
div.vegeta_div{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
div.vegeta_div img.seta{
    height: 167px;
}
div.vegeta_div span{
    font-weight: bold;
    font-size: 25px;
    margin-right: 160px;
}
/* vegeta active */
div.vegeta.active{
    display: none;
    flex-direction: column;
    border: 1px solid white;
    transition: 0.5s;
 
 }
 div.vegeta.active img{
    height: 600px;
   
}
div.lado img.seta{
    margin-left: 390px;
}
/* gohan */
div.gohan{
    background-color: #430098;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 1000px;
    margin-top: 30px;
    margin-bottom: 30px;
    cursor: pointer;
    transition: 0.5s;
}
div.gohan img{
    height: 276px;
}
div.gohan_div{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
div.gohan_div span{
    font-weight: bold;
    font-size: 25px;
    margin-right: 160px;
}
/* gohan active */
div.gohan.active,div.piccolo.active,div.kuririn.active,div.n18.active,div.bulma.active,div.freeza.active,div.cell.active,div.boo.active{
    display: none;
    flex-direction: column;
    border: 1px solid white;
    transition: 0.5s;
 
 }
 div.gohan.active img,div.piccolo.active img,div.kuririn.active img,div.bulma.active img,div.freeza.active img,div.cell.active img,div.boo.active img{
    height: 600px;
   
}
div.lado img.seta{
    margin-left: 390px;
}
/* piccolo */
div.piccolo{
    background-color: #8DE50B;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 1000px;
    margin-top: 30px;
    margin-bottom: 30px;
    cursor: pointer;
    transition: 0.5s;
}
div.piccolo img,div.kuririn img,div.bulma img,div.freeza img{
    height: 276px;
}
div.piccolo img.seta, div.kuririn img.seta,div.n18 img.seta,div.bulma img.seta,div.freeza img.seta,div.boo img.seta{
    height: 167px;
}
div.piccolo_div,div.kuririn_div,div.n18_div,div.bulma_div,div.freeza_div,div.cell_div,div.boo_div{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
div.piccolo_div span,div.kuririn_div span,div.n18_div span,div.bulma_div span,div.freeza_div span,div.cell_div span,div.boo_div span{
    font-weight: bold;
    font-size: 25px;
    margin-right: 160px;
}
div.cell_div span{
    margin-right:0px;
    margin-left:90px;
}
/* kuririn */
div.kuririn{
    background-color: #F46036;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 1000px;
    margin-top: 30px;
    margin-bottom: 30px;
    cursor: pointer;
    transition: 0.5s;
}
div.kuririn.active div.lado img.seta,div.freeza.active div.lado img.seta{
    margin-left: 300px;
}
/* n 18 */
div.n18{
    background-color: #C6BA8E;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 1000px;
    margin-top: 30px;
    margin-bottom: 30px;
    cursor: pointer;
    transition: 0.5s;
}
/* bulma */
div.bulma{
    background-color: #7BE4EA;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 1000px;
    margin-top: 30px;
    margin-bottom: 30px;
    cursor: pointer;
    transition: 0.5s;
}
div.bulma.active div.lado img.seta,div.cell img.seta,div.boo.active div.lado img.seta{
    margin-left:210px;
}
/* freeza */
div.freeza{
    background-color: #52226F;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 1000px;
    margin-top: 30px;
    margin-bottom: 30px;
    cursor: pointer;
    transition: 0.5s;
}
/* cell */
div.cell{
    background-color: #274E07;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 1000px;
    margin-top: 30px;
    margin-bottom: 30px;
    cursor: pointer;
    transition: 0.5s;
}
/* majin boo */
div.boo{
    background-color: #ED9DC2;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 1000px;
    margin-top: 30px;
    margin-bottom: 30px;
    cursor: pointer;
    transition: 0.5s;
}
@media screen and (max-width:1000px){
    div.goku,div.vegeta,div.gohan,div.piccolo,div.kuririn,div.n18,div.bulma,div.freeza,div.cell,div.boo{
        max-width: 700px;
    }
    div.gohan.active img,div.piccolo.active img,div.kuririn.active img,div.bulma.active img,div.freeza.active img,div.cell.active img,div.boo.active img{
        height: 400px;
    }
    div.goku img.seta,div.vegeta img.seta,div.gohan img.seta,div.piccolo img.seta, div.kuririn img.seta,div.n18 img.seta,div.bulma img.seta,div.freeza img.seta,div.cell img.seta,div.boo img.seta{
        height: 100px;
    }
    div.lado img.seta{
        margin-left: 200px;
    }
    div.kuririn.active div.lado img.seta,div.freeza.active div.lado img.seta{
        margin-left: 180px;
    }
}
@media screen and (max-width:680px){
    header div.logo img{
        height: 50px;
    }
    header div.logo a{
        font-size: 15px;
    }
    section.personagem img{
        padding: 20px 10px;
        height: 150px;
      }
      section.personagem h1{
        font-size: 25px;
    }
    section.personagem p{
        font-weight: bold;
        font-size: 15px;
    }
    div.goku,div.vegeta,div.gohan,div.piccolo,div.kuririn,div.n18,div.bulma,div.freeza,div.cell,div.boo{
        display: flex;
        justify-content: space-around;
        align-items: center;
        max-width: 320px;
    }
    div.goku img,div.vegeta img,div.gohan img,div.piccolo img,div.kuririn img,div.n18 img,div.bulma img,div.freeza img,div.cell img,div.boo img{
        height: 100px;
    }
    div.goku_div span,div.vegeta_div span,div.gohan_div span,div.piccolo_div span,div.kuririn_div span,div.n18_div span,div.bulma_div span,div.freeza_div span,div.cell_div span,div.boo_div span{
        font-size: 15px;
        margin-left: 30px;
        margin-right: 30px;
    }
    div.goku img.seta,div.vegeta img.seta,div.gohan img.seta,div.piccolo img.seta, div.kuririn img.seta,div.n18 img.seta,div.bulma img.seta,div.freeza img.seta,div.cell img.seta,div.boo img.seta{
        height: 50px;
        padding-right: 0px;
    }
    div.cell{
        margin: 0px;
        padding: 0px;
    }
    div.cell_div img.seta{
        margin: 0px;
        padding: 0px;
    }
    div.embaixo p{
        font-size: 10px;
        max-width: 300px;
    }
    #goku,#vegeta,#gohan,#piccolo,#n18,#kuririn,#bulma,#freeza,#cell,#boo{
        height: 300px;
    }
    div.lado  img.seta{
        margin-left: 20px;
        height: 10px;
        display: none;
    }
   

}