/* Estilo Geral */
/* Importa as fontes do google */
@import url('https://fonts.googleapis.com/css2?family=Playwrite+FR+Trad:wght@100..400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Playwrite+FR+Trad:wght@100..400&display=swap');

header .cabecalho {
    padding-top: 5vw;
    padding-bottom: 5vw;
    padding-left: 10vw;
    padding-right: 10vw;
    display: flex;
    align-items: center;
    text-align: center;
    background-color: #302858;
    color: #F2D16D;
}
#nav-bar ul{
    display: flex;
    padding: 0px;
    width: 100%;
    align-items: center;
    text-align: center;
    border-top: #F2D16D solid 1px;
    background-color: #302858;
    color: #F2D16D;
}
#nav-bar ul li{
    display: flex;
    padding: auto;
    margin: auto;
}
#nav-bar ul li a{
    padding: auto;
    margin: 2vh;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: #F2D16D;
}
main {
    padding-top: 5vw;
    padding-bottom: 5vw;
    padding-left: 10vw;
    padding-right: 10vw;
    display: block;
    color: #3C3C3C;
}
footer {
    padding-top: 1vw;
    padding-bottom: 1vw;
    padding-left: 5vw;
    padding-right: 5vw;
    display: block;
    text-align: center; 
    color: #E0C8F8;
    background-color: #302858;
}
button {
    font-size: 1rem;
    background-color:#FFF;
    color:#302858;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-bottom: 0.7vw;
    padding-top: 0.7vw;
    border: solid 2px;
    border-color: #302858;
    border-radius: 10px;
    margin: 1vw;
}
p {
    padding-top: 1vw;
    padding-bottom: 1vw;
    font-size: 1.1rem;
}
h1, h2, h3, h4, h5, h6 {
    padding-top: 1vw;
    padding-bottom: 1vw;
}
#nome {
    font-family: "Playwrite FR Trad", cursive;
    font-size: 3rem;
}
h1 {
    font-family: "Oswald", sans-serif;
    padding-bottom: 5vw;
    font-size: 2.5rem;
    font-weight: bold;
    font-optical-sizing: auto;
    font-style: normal;
    color:#302858;
}
h2 {
    font-family: "Oswald", sans-serif;
    color: #302858;
    font-size: 1.5rem;
    font-weight: bold;
}
h3 {
    font-weight: bold;
}
ul {
    padding-top: 1vw;
    padding-bottom: 1vw;
    list-style: circle;
    padding-left: 1vw;
    font-size: 1.1rem;
}
a {
    text-decoration: none;
}

/* Index - Header */
#introducao {
    width: 45vw;
}
#avatar {
    width: 45vw;
}
#avatar img {
    width: 30vw;
    border-radius: 100%;
    /* border: 3px solid #F2BB13; */
}
header h1 {
    color: #F2BB13;
}

/* Portifólio - Index - Main */
#portifolio {
    width: 80vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.item-portifolio {
    margin: auto;
    margin-top: 0;
    text-align: center;
    padding: 1vw;
    width: 24vw;
    min-width: 300px;
}
.item-portifolio img {
    width: 100%;
    aspect-ratio: 1/0.6;
    object-fit: cover;
    object-position: top;
    border: solid;
    border-width: 1px;
    border-color: #E0C8F8;
    border-radius: 20px;
}
.item-portifolio a {
    width: 100%;
    height: 100%;
}

/* Footer */
#icons {
    padding-top: 1vw;
    margin: auto;
}
#icons img {
    right: 0.9rem;
    width: 0.9rem;
}
#icons a {
    font-size: 1rem;
    color: #e0c8f8  ;
    text-decoration: none;
}
#developed {
    font-size: 0.8rem;
    color: #f2bb13;
}

/* Página Portifólio  */
.voltar {
    position: absolute;
    left: 2vw;
    top: 2vw;
}
.voltar img {
    width: 2vw;
}
#banner-portifolio {
    width: 100%;
}
#banner-portifolio img {
    width: 100%;
    aspect-ratio: 1/0.3;
    object-fit: cover;
    object-position: top;
    border-radius: 20px;
}

/* Carrossel de Imagens */
.carrossel {
    height: 40vw;
    border-radius: 20px;
    overflow: hidden;
}
.navigation {
    width: 80vw;
    margin-top: 42vw;
    height: 5vw;
    position: absolute;
    display: flex;
    justify-content: center;
}
.bar {
    width: 1vw;
    height: 1vw;
    margin-left: 1vw;
    margin-right: 1vw;
    border: 2px solid #302858;
    border-radius: 100px;
    cursor: pointer;
    transition: .6s;
}
.bar:hover {
    background-color: #302858;
}
input {
    display: none;
}
.slides {
    display: flex;
    width: 500%;
    height: 100%;
}
.slide {
    width: 20%;
    transition: .6s;
}
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
#slide1:checked ~ .s1 {
    margin-left: 0;
}
#slide2:checked ~ .s1 {
    margin-left: -20%;
}
#slide3:checked ~ .s1 {
    margin-left: -40%;
}
#slide4:checked ~ .s1 {
    margin-left: -60%;
}
#slide5:checked ~ .s1 {
    margin-left: -80%;
}

#slide1:checked ~ .navigation .bar1 {
    background-color: #302858;
}
#slide2:checked ~ .navigation .bar2 {
    background-color: #302858;
}
#slide3:checked ~ .navigation .bar3 {
    background-color: #302858;
}
#slide4:checked ~ .navigation .bar4 {
    background-color: #302858;
}
#slide5:checked ~ .navigation .bar5 {
    background-color: #302858;
}