@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap');

:root{

--rosa-claro:#ffd9e8;
--rosa:#ff9fc8;
--rosa-forte:#ff6fae;
--verde:#a8e6cf;
--texto:#75445d;
--branco:#fff8fc;

}

*{
box-sizing:border-box;
}

body{

margin:0;
font-family:'Quicksand',sans-serif;
color:var(--texto);

background:
repeating-linear-gradient(
90deg,
#ffd9e8 0px,
#ffd9e8 45px,
#ffb8d5 45px,
#ffb8d5 90px);

}

#container{

max-width:1000px;
margin:30px auto;

}

#topBar{

background:#fff0f7;
border:3px dashed var(--rosa);
border-radius:20px 20px 0 0;
padding:10px;
text-align:center;
color:var(--rosa-forte);

}

#header{

height:180px;

background:
linear-gradient(
rgba(255,180,210,.5),
rgba(255,180,210,.5)),
url("header.png");

background-size:cover;
background-position:center;

display:flex;
justify-content:center;
align-items:center;

border-left:4px dashed var(--rosa);
border-right:4px dashed var(--rosa);

}

#header h1{

color:white;
font-size:45px;

text-shadow:
3px 3px #ff79af;

}

#navbar{

background:#ff9fc8;
padding:10px;

}

#navbar ul{

list-style:none;
display:flex;
justify-content:space-around;
padding:0;
margin:0;
flex-wrap:wrap;

}

#navbar a{

color:white;
text-decoration:none;
font-weight:bold;

}

#navbar a:hover{

color:#a8e6cf;

}

#flex{

display:flex;
gap:15px;

}

aside{

width:220px;
background:#fff0f7;
padding:15px;
border:3px dashed var(--rosa);

}

main{

flex:1;
background:rgba(255,255,255,.85);
padding:25px;
border:3px dashed var(--rosa);

}

h1,h2,h3{

color:var(--rosa-forte);

}

h1{

font-size:28px;

}

/* FOTO DE PERFIL */

.perfil{

    text-align:center;
    margin-bottom:20px;

}

.perfil img{

    width:150px;
    height:150px;

    object-fit:cover;

    display:block;
    margin:0 auto;

    border-radius:50%;

    padding:8px;

    background:#fff;

    border:8px dotted #ff8fbc;

    box-shadow:
        0 0 0 5px #ffd9e8,
        0 0 20px #ff9fc8;

    transition:.3s;

}

.perfil img:hover{

    transform:scale(1.05) rotate(-2deg);

}

.perfil h2{

    margin:12px 0 5px;
    color:var(--rosa-forte);
    font-size:24px;

}

.perfil p{

    margin:0;
    color:var(--texto);

}

/* LISTAS */

aside ul{

    padding-left:18px;

}

aside li{

    margin-bottom:8px;

}

/* LINKS */

a{

    color:#ff6fae;
    text-decoration:none;
    transition:.25s;

}

a:hover{

    color:#ff9fc8;
    text-decoration:underline;

}

/* IMAGENS */

img{

    max-width:100%;

}

/* FOOTER */

footer{

    background:#ff9fc8;

    color:white;

    text-align:center;

    padding:15px;

    border-left:3px dashed var(--rosa);
    border-right:3px dashed var(--rosa);
    border-bottom:3px dashed var(--rosa);

    border-radius:0 0 20px 20px;

    margin-top:15px;

}

/* ===== BOTÕES ===== */

button,
input[type="submit"]{

    background:linear-gradient(#ffc4de,#ff9fc8);

    color:white;

    border:none;

    border-radius:20px;

    padding:10px 18px;

    font-family:'Quicksand',sans-serif;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}

button:hover,
input[type="submit"]:hover{

    transform:translateY(-2px);

    box-shadow:0 5px 12px rgba(255,111,174,.35);

}

/* ===== SCROLLBAR ===== */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#ffeaf3;

}

::-webkit-scrollbar-thumb{

    background:#ff9fc8;

    border-radius:20px;

    border:2px solid #ffeaf3;

}

::-webkit-scrollbar-thumb:hover{

    background:#ff6fae;

}

/* ===== SELEÇÃO ===== */

::selection{

    background:#ff9fc8;

    color:white;

}

/* ===== TRANSIÇÕES ===== */

.box,
aside,
main,
#header,
#topBar{

    transition:.3s;

}

.box:hover{

    transform:translateY(-3px);

}

/* ===== RESPONSIVO ===== */

@media (max-width:800px){

#flex{

    flex-direction:column;

}

aside{

    width:100%;

}

#header{

    height:140px;

}

#header h1{

    font-size:30px;

}

#navbar ul{

    flex-direction:column;

    gap:8px;

    align-items:center;

}

main{

    padding:18px;

}

.perfil img{

    width:120px;

    height:120px;

}
.box{

background:white;
border-radius:20px;
border:3px dotted #ffafd0;
padding:15px;
margin-bottom:15px;
box-shadow:0 5px 10px #ffcce0;

}