@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gafata&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root{
    --font-primary: "DM Serif Text", serif;
    --font-weight: 400;
    --font-style: normal;
    --color1: #fff;
    --color2: #000;
    --color3: #dcdcdc;
    --color4: #acacac;
    --color5: #1E90FF;
    --color6: #4169E1;
}

.body-index{
    background-image: url('seascape-4844697_1280\ 1.png');
    background-size: cover;
    background-repeat: no-repeat;
    max-height: 100vw;
    height: 100vh;
    /* overflow-y: hidden; */
}

/* css pagina index */
.header_container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: min-content;

}

.main_container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding-block: 20px 50px;
    color: var(--color1);

    &>ul{
        list-style: none;
        display: flex;
        justify-content: space-around;
        color: var(--color1);
        column-gap: 10px;
        font-family: var(--font-primary);
        font-size: 20px;

        &>li{
            &>a{
                text-decoration: none;
                color: var(--color1);
            }
        }
    }

    &>div{
        &.title{
            display: flex;
            flex-direction: column;
            align-items: center;
            &>h1{
                font-size: 100px;
                font-family: var(--font-primary);
                letter-spacing: 10px;
            }
            &>h2{
                font-size: 30px;
                font-family: var(--font-primary);
                font-weight: 200;
            }
        }
        &:last-child{
            display: flex;
            flex-direction: column;
            align-items: center;

            &>p{
                font-size: 30px ;
                font-family: var(--font-primary);
                letter-spacing: 5px;
            }

            &>a{
                &>button{
                    padding: 10px 30px;
                    font-family: "Gafata", sans-serif;
                    font-weight: 400;
                    font-size: 18px;
                    letter-spacing: 2px;
                    cursor: pointer;
                    color: var(--color1);
                    transition: all .4s ease-in-out;
                    border: 2px solid var(--color1);
                    background-color: transparent;

                    &:hover{
                        background-color: var(--color1);
                        color: black;
                    }
                }
            }
        }
    }
}

/* css pagina repertorio */
.body-repertorio{
    background-color: var(--color3);
}

header{
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--color1);
    &>ul{
        width: 50%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        &>li{
            list-style: none;
            &>a{
                color: var(--color2);
            }
        }
    }
}

section{
    &>div.testos{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 20px 0;
        &>h1,h3{
            padding: 0 0 10px 0;
        }
        &>h1{
            color: var(--color5);
            font-size: 45px;
        }
    }
    &>div.team{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &>div.linha{
            width: 100%;
            display: inherit;
            justify-content: space-around;
            align-items: center;
            margin: 30px 0;
            &>div{
                height: 525px;
                width: 25%;
                display: inherit;
                flex-direction: column;
                align-items: start;
                padding: 24px;
                background-color: var(--color1);
                border-radius: 25px;
                &>img{
                    height: 55%;
                    width: 100%;
                    border-radius: 10px;
                    margin: 0 0 10px 0;
                    object-fit: cover;
                }
                &>h2, h4{
                    padding: 0px 0px 10px 0px;
                }
                &>h2{
                    color: var(--color6);
                }
                &>h4{
                    color: var(--color4);
                }
                &>h4.text{
                    color: var(--color2);
                }
                &>ul{
                    width: 100%;
                    display: inherit;
                    justify-content: space-around;
                    align-items: start;
                    &>li{
                        list-style: none;
                        &>a{
                            font-size: 20px;
                            font-weight: 500;
                            color: var(--color6);
                        }
                    }
                }
            }
        }
    }
}

/* media das paginas */

@media (max-width: 640px) {
    div.testos{
        &>h1{
            font-size: 43px !important;
        }
        &>h3{
            font-size: 12.5px;
        }
    }

    div.team{
        &>div.linha{
            flex-direction: column;
            &>div{
                height: 550px !important;
                width: 350px !important;
                margin: 10px 0;
            }
        }
    }
}

/* @media(max-width: 430px){
    body{
        background-image: url(https://wallpaper.forfun.com/fetch/1e/1e2594cd743aaaffffbbfc3318b0717f.jpeg);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .main_container{
        & > div{
            position: relative;
            top: -40px;
            &.title{
                & > h1{
                    font-size: 80px;
                }
                & > h2{
                    font-size: 25px;
                }
            }
            &:last-child{
                position: relative;
                top: -50px;
            }
        }
    }
} */