/* css externo */
/* google fonts */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&family=The+Girl+Next+Door&display=swap');


/* definir as cores tema dark */
/* raiz */
:root,
:root[data-theme='dark'] {
    --cor-fundo: rgb(70, 78, 139);
    --cor-texto: rgb(248, 225, 233);
    --cor-borda: rgb(204, 198, 255);
    --menu-link: rgb(247, 205, 238);
    --cor-cabecalho: rgb(138, 147, 230);
    --cor-decricao: rgb(156, 156, 242);
    --cor-hover-icone: rgb(166, 146, 240);
    --cor-hover-icone2: rgb(247, 197, 247);
    --cor-hover-icone3: rgb(246, 172, 191);
    --cor-hover-icone4: rgb(157, 203, 244);
    --cor-hover-icone5: rgb(157, 236, 240);
}

:root[data-theme='light'] {
    --cor-fundo: rgb(245, 233, 237);
    --cor-texto: rgb(87, 87, 177);
    --cor-borda: rgb(149, 141, 223);
    --menu-link: rgb(53, 45, 75);
    --cor-cabecalho: rgb(195, 195, 234);
    --cor-decricao: rgb(255, 202, 255);
    --cor-hover-icone: rgb(244, 106, 244);
    --cor-hover-icone2: rgb(189, 78, 189);
    --cor-hover-icone3: rgb(200, 96, 122);
    --cor-hover-icone4: rgb(44, 112, 172);
    --cor-hover-icone5: rgb(58, 129, 133);
}

/* reset css = padronizar */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* rolagem */
html {
    scroll-behavior: smooth;
}

/*inverter cor logo = filtro  */
html[data-theme='light'] .logo {
    filter: invert(0);
}

body {
    /* hexadecimal */
    background: var(--cor-fundo);
    /* cor de fundo */
    color: var(--cor-texto);
    /* cor de texto  */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

a {
    color: var(--menu-link);
    text-decoration: none;
    font-family: "Sour Gummy", sans-serif;
}

ul {
    list-style: none;
    /* estilo de lista */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: var(--cor-cabecalho);
    border-bottom: 10px solid var(--cor-borda);
    position: fixed;
    z-index: 9999;
}

.menu-desktop {
    background-color: var(--cor-cabecalho);
    display: none;
    /* esconde o menu desktop */
}

/* nav ou ul */
.menu {
    display: flex;
    /* em linha */
    /* horizontal */
    gap: 1rem;
    /* 16px */
    align-items: center;
}

.menu-item {
    width: 100%;
}

.menu-link {
    display: flex;
    align-items: center;
}

.menu-text {
    color: var(--cor-texto);
    font-size: 0.9rem;
}

/* menu hamburger */

#menuHamburger {
    margin-left: 1rem;
}

.btn-menu-mobile {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--cor-texto);
    display: flex;
    font-size: 1rem;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.menu-mobile {
    /* NAV */
    position: fixed;
    top: 0;
    right: 0;
    background: var(--cor-fundo);
    width: 75%;
    height: 100vh;
    /* viewPort Altura */
    border-left: 1px solid var(--cor-borda);
    max-width: 320px;
    display: flex;
    flex-direction: column;
    padding-top: 4rem;
    transition: .3s ease-in-out;
    transform: translateX(100%);
}

/* ativar menu mobile  */
.menu-mobile.active {
    transform: translateX(0%);
}

.menu-mobile

/* nav */
.menu-list {
    /* ul */
    display: flex;
    flex-direction: column;
    /* eixo Y = vertical */
    gap: 1rem;
    width: 100%;
    padding: 1rem 1rem 2rem;
}

.menu-mobile .menu-item {
    width: 100%;
    text-align: center;
}

.menu-mobile .menu-link {
    padding: 0.5rem 0;
    display: inline-block;
    font-size: 1rem;
}

.logo {
    width: 3.25rem;
    /* comprimento */
    height: 1.90rem;
    /* altura */

}

.header-toggle {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#home {
    padding: 2.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

}

.main-content {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.video iframe {
    aspect-ratio: 16/9;
}

#home,
.albuns,
.sobre,
.contato {
    padding: 2.5rem 1rem;
}

.descricao-video {
    display: flex;
    flex-direction: column;
    background: var(--cor-decricao);
    padding: 6.25rem 1rem 2rem;
    align-items: center;
    justify-content: flex-start;
    margin-top: -8.5rem;
}

h1 {

    font-family: "Sour Gummy", sans-serif;

}

h2 {
    font-family: "The Girl Next Door", cursive;
    text-align: justify;
    margin-top: -2rem;
    letter-spacing: normal;
    color: var(--cor-texto);
}

h3 {

    font-family: "Sour Gummy", sans-serif;
    text-align: justify;
    margin-top: -2rem;
    letter-spacing: normal;
    color: var(--cor-texto);

}

.albuns {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.projetos-container {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.album-card {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.img-card1 {
    width: 100%;
    border-radius: 0.5rem;
}

.img-card2 {
    width: 100%;
    border-radius: 0.5rem;
}

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

.card-title {
    color: rgb(241, 168, 241);
    font-family: "Pacifico", cursive;
}

.card-descricao {
    color: var(--cor-texto);

    font-family: "Sour Gummy", sans-serif;
}



.card-lista .card-item {
    color: var(--cor-texto);
    margin-bottom: 1rem;
    font-family: "Sour Gummy", sans-serif;
}

.card-item i {
    margin-right: 8px;
}

.card-item i:hover {
    color: var(--cor-hover-icone);
    transition: 0.1s ease-in-out;
}

.redes-sociais {
    font-size: 1.3rem;

}

.redes-sociais i:hover {
    color: var(--cor-hover-icone);
    transition: 0.1s;
}

.redes-sociais .instagram {
    color: rgb(70, 162, 241);
}

.redes-sociais .instagram:hover {
    color: var(--cor-hover-icone2);
}

.redes-sociais .switch {
    color: rgb(157, 157, 244);
}

.redes-sociais .switch:hover {
    color: var(--cor-hover-icone3);
}

.redes-sociais .secret {
    color: rgb(248, 160, 173);
}

.redes-sociais .secret:hover {
    color: var(--cor-hover-icone4);
}

.redes-sociais .empathy {
    color: rgb(242, 152, 242);
}

.redes-sociais .empathy:hover {
    color: var( --cor-hover-icone5);
}


.col6{
    background-color: rgb(171, 203, 231);
}

.col5{
background: rgb(237, 173, 195);
}

.col7{
background: rgb(240, 144, 240);
}

.col8{
    background: rgb(148, 148, 239);
}

/* medidas responsivas */

@media(max-width: 768px) {
    #home {
        padding-top: 5rem;
    }
}

/* fim max 768px */

@media(min-width: 768px) {
    .menu-desktop {
        display: flex;
        min-width: 30%;
    }

    .btn-menu-mobile {
        display: none;
    }

    .header-toggle {
        min-width: 30%;
    }

    header {
        padding: 1rem 6rem;
    }

    h1 {
        font-size: 4.5rem;

    }

    h2 {
        font-size: 3.5rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    #home,
    .albuns,
    .sobre {
        padding: 8rem 6rem 4rem 6rem;
    }

    .main-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }



}

/* FIM min 768px */

@media(min-width: 992px) {
    .album-card {
        flex-direction: row;
    }

    .img-card1 {
        width: 55%;
        height: 15%;
    }

    .img-card2 {
        width: 55%;
        height: 15%;
    }

    .reverse-card {
        /* espelhar */
        flex-direction: row-reverse;

    }
}

@media(min-width:1200px) {

    h2 {
        font-size: 4rem;
    }

}



@media(min-width: 1400px) {
    h1 {
        font-size: 3.5rem;
    }

    h2 {
        font-size: 2.5rem;
    }

    h3 {
        font-size: 1.25;
    }



    .descricao-video,
    .albuns,
    .sobre {
        padding: 10rem 15rem 4rem;
    }





}