/*
  ____                _ 
 / ___| ___ _ __ __ _| |
| |  _ / _ \ '__/ _` | |
| |_| |  __/ | | (_| | |
\____|\___|_|  \__,_|_|
*/

html, body, ul, #Space, p, h2, h1 {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
    width: 100%;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

body { /* Background fixo da imagem*/
      background-image: url("images/stars.gif");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
}

a { /* Cor dos links*/
    color: white;
}

#Space { /* O espaço maior; Onde todas as sections tem que se encaixar, usado para margens gerais do site*/
    color: white;
    margin-top: 1%;
    margin-left: 5%; 
    margin-right: 5%; 
    text-align: center;
}

.box {
    max-width: 100%;
}

.box > * {
    border: thick double #7320ba;
    color: #ab81cf;
    border-radius: 5px;
}

.box:hover > * {
    border: thick double #b51431;
    color: #ff4040;
}

.box > *:has(img) {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    padding: 0 20px;
    box-sizing:border-box;
}

.container:has(img) {
    aspect-ratio: 1/1;
    overflow: hidden;
    max-width: 250px;
    animation-name: mexe;
    animation-duration: 1s;
    animation-timing-function: steps(2, end);
    animation-iteration-count: infinite;
}

.container:nth-child(2n) {
    animation-delay: -.5s;
}

.container img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.info { /* Configuração dos "títulos" das sections*/
    display: flex;
    justify-content: center;
    padding-left: 20px;
    max-width: 100%;
}

.row {
    display: flex;
    justify-content: left;
    width: 100%;
}

.row .container:has(img) {
    border: thick solid #7320ba;
    margin: 0 5px;
    height: 100%;
    min-width: 250px;
}
    
@keyframes mexe {
  0% { transform: rotate(5deg); }
  100% { transform: rotate(-10deg); }
}

/*
 _   _                _           
| | | | ___  __ _  __| | ___ _ __ 
| |_| |/ _ \/ _` |/ _` |/ _ \ '__|
|  _  |  __/ (_| | (_| |  __/ |   
|_| |_|\___|\__,_|\__,_|\___|_|    
*/

#navbar {
    display: flex;
    justify-content: center;
    align-items: center;
}

nav ul li { /* Navbar horizontal*/
    display: inline;
    padding: 0 10px;
}

#banner {
    padding: 5px 5px 0 5px;
    margin-top: 20px;
    overflow: hidden;
    text-align: center;
}

#banner img {
    object-fit: cover;
    margin: 0 auto;
    height: 100%;
    width: 100%;
}

/*
  ____                       
 / ___|___  _ __ _ __   ___  
| |   / _ \| '__| '_ \ / _ \ 
| |__| (_) | |  | |_) | (_) |
 \____\___/|_|  | .__/ \___/ 
                |_|     
*/


.intro { /* Mostrar o card de titulo (info) e depois o content em colunas*/
    display: flex;
    flex-direction: column;
    min-height: 300px;
    margin-top: 20px;
}

.intro .content { /*Configurações de cada card de informação*/
    display: flex;
    border-radius: 5px;
    padding: 5px 5px 0 5px;
    align-items:start;
    height: 100%;
    flex-wrap: wrap;
}

.superior { /*Nossa foto + nome e quote*/
    display: flex;
    align-items:start;
}

.inferior { /*gif + pontos em bullet*/
    display: flex;
    flex-wrap: wrap;
    align-items:start;
    justify-content: left;
    padding: 10px 0 10px 10px;
}

.inferior img {
    aspect-ratio: 1/1;
    object-fit: cover;
}

.inferior ul {
    margin-left: 20px;
    text-align: left;
    font-size: large;
    font-weight: bold;
}

.intro .container { /*nossas fotos de "perfil"*/
    aspect-ratio: 1 / 1;
    overflow: hidden;
    max-height: 225px;
    min-height: 100px;
}

#Shia .container {
    border: thick solid #b51431;
}

#Vini .container {
    border: thick solid #a1122c;
}

.intro .imagem img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.texto { /* nossos nomes + quotes*/
    height: fit-content;
    padding: 0 10px;
    text-align: left;
    vertical-align: top;
    padding: 20px;
    padding-right: 5px;
    word-break: break-word;
}

#fotos .content {
    padding: 20px;
}

.box .container:nth-child(2n) {
    border: thick solid #b51431;
}

#musica .container {
    height: 352px;
}

iframe {
    width: 100%;
    height: 100%;
}

#desenhos .content, #interesses .content {
    padding: 0;
    aspect-ratio: 1/1;
    overflow: hidden;
    max-width: 100%;
}

#desenhos img, #interesses img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}


/*
 __  __       _     _ _      
|  \/  | ___ | |__ (_) | ___ 
| |\/| |/ _ \| '_ \| | |/ _ \
| |  | | (_) | |_) | | |  __/
|_|  |_|\___/|_.__/|_|_|\___|
*/

@media (max-width: 1519px) { /*Estilo pra tablet*/
    .texto {
        width: 100%;
    }
    #banner {
        aspect-ratio: 3 / 1;
    }
}
@media (min-width: 1519px) { /*Estilo pra pc*/
    #Space {
        margin-left: 20%; 
        margin-right: 20%;
    }
    #banner {
        aspect-ratio: 5 / 1;
    }
    
}
@media (max-width: 1000px) { /*Estilo pra celular*/
    #banner img {
        transform: scale(3);
    }
    .superior {
        flex-wrap: wrap;
    }
    .inferior img{
        max-width: 100px;
    }
    .intros {
        flex-direction: column;
    }
    .row {
        flex-wrap: wrap;
    }
    .intro {
        width: 100%;
    }
    #musica {
        width: 100%;
    }
    #desenhos, #interesses {
        width: 50%;
    }
}
@media (min-width: 1000px) { /* Estilo pra não celular*/
    .superior {
        flex-wrap: nowrap;
    }
    .inferior img{
        max-width: 150px;
    }
    .intro {
        width: 50%;
    }
    #desenhos, #interesses {
        width: 25%;
    }
    #musica {
        width: 50%;
    }
    #desenhos .content, #interesses .content {
        min-height: 360px;
    }
}