@font-face {
    font-family: 'Thin';
    src: url('../../fonts/SpartanMB-Thin.otf')
    format(opentype);
}@font-face {
    font-family: 'Semi-Bold';
    src: url('../../fonts/SpartanMB-SemiBold.otf')
    format(opentype);
}@font-face {
    font-family: 'Regular';
    src: url('../../fonts/SpartanMB-Regular.otf')
    format(opentype);
}@font-face {
    font-family: 'Medium';
    src: url('../../fonts/SpartanMB-Medium.otf')
    format(opentype);
}@font-face {
    font-family: 'Light';
    src: url('../../fonts/SpartanMB-Light.otf')
    format(opentype);
}@font-face {
    font-family: 'Extra-Light';
    src: url('../../fonts/SpartanMB-ExtraLight.otf')
    format(opentype);
}@font-face {
    font-family: 'Extra-Bold';
    src: url('../../fonts/SpartanMB-ExtraBold.otf')
    format(opentype);
}@font-face {
    font-family: 'Bold';
    src: url('../../fonts/SpartanMB-Bold.otf')
    format(opentype);
}@font-face {
    font-family: 'Black';
    src: url('../../fonts/SpartanMB-Black.otf')
    format(opentype);
}

:root{
    --verde-oficial: #00a859;
    --verde-escuro: #047741;
    --verde-alternativo: #00924e;
    --branco: #ffffff;
    --cor3: #5e45f8;
    --cor4: #ffffff;

    --fonte-thin: 'Thin';
    --fonte-semibold: 'Semi-Bold';
    --fonte-regular: 'Regular';
    --fonte-medium: 'Medium';  
    --fonte-light: 'Light';
    --fonte-extralight: 'Extra-Light';
    --fonte-extrabold: 'Extra-Bold';
    --fonte-bold: 'Bold';
    --fonte-black: 'Black';
}
        
#container{
    width: 70%;
    height: max-content;
    margin: 0 auto 2% auto;
    padding: 0%;
    background-color: rgb(3, 63, 63, 0);
    }.title-v{
        display: flex;
        flex-direction: row;
        align-items: end;
        justify-content: space-between;
        height: 2%;
        margin: 0 0 2% 0;
        text-align: center;
        border-bottom: solid 0.2em var(--verde-escuro);
        }.title-v > h1{
            font-family: var(--fonte-bold);
            color: var(--verde-escuro);
            font-size: 2,5em;
            margin: 0;
        }.title-v > h3{
            font-size: 1.2em;
            color: var(--verde-escuro);
    }.vereadores{
        display: flex;
        width: 70%;
        padding: 8px;
        border-radius: 0.6em;
        margin-bottom: 2%;
        box-shadow: 0px 0px 8px rgb(0, 0, 0, 25%);
        }.card-vereador{
            justify-items: center;
            width: 32%;
            height: 100%;
            padding: 0%;
            }.card-vereador> img{
                width: 100%;
                height: 100%;
                max-width: auto;
                max-height: auto;
                border-top-left-radius: 0.6em;
                border-bottom-left-radius: 0.6em;
        }.vereador-info{
            justify-items: start;
            width: 68%;
            color: var(--branco);
            padding: 3% 1% 1% 1%;
            border-top-right-radius: 0.6em;
            border-bottom-right-radius: 0.6em;
            background-color: var(--verde-escuro);
        }.v-info-ul{
            width: 100%;
            margin: 0;
            }.v-info-ul > h2{
                font-family: var(--fonte-extrabold);
                font-size: 2.4em;
                margin: 0;
            }.v-info-ul-li{
                font-size: 1.2em;
                font-family: var(--fonte-semibold);
                margin-bottom: 2%;
                }.v-info-ul-li > strong{
                    margin-right: 3px;
                    font-family: var(--fonte-bold);
                }.v-info-ul-li > a {
                    color: var(--branco);
                    font-family: var(--fonte-semibold);
                    text-decoration: none;
                    transition-duration: 0.5s;
                    font-style: italic;
                    }.v-info-ul-li > a:hover{
                        opacity: 60%;
                        text-decoration: underline;
                    }

/*------------------------------------- Media Query ---------------------------------------*/

@media (min-width: 0px) and (max-width: 576px) {

    #container{
        width: 100%;
        }.title-v{
            display: block;
            margin: 8% 0 5% 0;
            border-bottom: solid 0.1em var(--verde-escuro);
            }.title-v > h1{
                font-size: 2em;
                margin: 0;
            }.title-v > h3{
                font-size: 1em;
    
        }.vereadores{
            width: 100%;
            display: block;
            margin-bottom: 10%;
            }.card-vereador{
                width: 100%;
                display: flex;
                justify-content: center;
                height: auto;
                padding: 2%;
                }.card-vereador > img{
                    padding: 10%;
                    width: 150px;
                    height: 150px;
                    object-fit: cover;
                    object-position: 100% 25%;
                    border-radius: 50%;
                    border: solid 3px var(--verde-oficial);
                    padding: 1%;
            }.vereador-info{
                width: 100%;
                padding: 3% 1% 1% 1%;
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
                background-color: var(--verde-oficial);
                color: var(--branco);
                }.v-info-ul > h2{
                    font-size: 2em;
                }.v-info-ul-li{
                    font-size: 1em;
                    font-family: var(--fonte-semibold);
                    margin-bottom: 2%;
                }.v-info-ul-li > a:hover{
                    opacity: 100%;
                    text-decoration: none;
                }.v-info-ul-li > a:active{
                    text-decoration: underline;
            }
}