body{
    font-family: "Montserrat Medium";
    margin:0;
    padding: 0;
    font-size: 35px;
    background-color: #fef9ef;
}
/*divisão*/

.split{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.split_index{
    background-color: #fef9ef;
    margin-top: -8%;
}

.split_about{
    background-color: #facfad;

}
.split_work{
    background-color: #f8bd7f;
}

.split_contact{
    background-color: #022f40;
}


/*titulos*/

h1{
    margin: 5vw 15vw;
}

#Ab{
    color: #fef9ef;
}

#Wk{
    color: #022f40;
}

#Ct{
    color: #f8bd7f;
}

/*menu*/

ul {
    list-style-type: none;
    margin-top: 10px;
    padding: 0;
    overflow: hidden;
    text-align: center;
}

li{
    display: inline-block;
}

a  {
    display: inline-block;
    color: #022f40;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
    position: sticky;
}

/*texto e imagem intro*/

.box {
    margin: 5vw 15vw;
    border: none;
    width: 70%;
}

#img_index{
    width: 404px;
    height: 508px;
    float: right;
    margin-top: 14%;

}
#intro{
    float: left;
    font-size: 50px;
    color: #022f40;
    margin-top: 15%;
}

/*imagem e texto about*/

.box2 {
    margin: 5vw 13vw;
    border: none;
    width: 72%;
}

#img_about{
    width: 488px;
    height: 688px;
    float: left;
}

#about{
    float: right;
    margin-top: 0px;
    font-size: 25px;
    color: #022f40;
}

/*imagem works*/

.box3 {
    margin: 5vw 35vw;
    border: none;
    width: 30%;
}

#img_works{
    height: 568px;
    margin-left: auto;
    margin-right: auto ;
    display: block;
    margin-top: -15%;
    margin-bottom: 25%;

}

/*imagem e texto contacts*/

.box4 {
    margin: 5vw 13vw;
    border: none;
    width: 75%;
}

#img_contact{
    float: left;
    margin-left: 100px;
}

#contact{
    color: #f8bd7f;
    float: right;
    margin-top: 10%;
    margin-right: 150px;
}
#nome_insta{
    width: 70px;
    height: 70px;
}
#nome_link{
    width: 70px;
    height: 70px;
}
#nome_beh{
    width: 70px;
    height: 70px;
}

/* Animação */


.word{
    animation: color-animation 3s linear infinite;
}

.word1{
    --color-1:#022f40;
    --color-2:#f8bd7f;
}
.word2{
    --color-1:#022f40;
    --color-2:#f8bd7f;
}
.word3{
    --color-1:#022f40;
    --color-2:#f8bd7f;
}
.A1{
    --color-1:#022f40;
    --color-2:#fef9ef;
}
.W2{
    --color-1:#022f40;
    --color-2:#fef9ef;
}
.C3{
    --color-1:#fef9ef;
    --color-2:#f8bd7f;
}

@keyframes color-animation {
    0%    {color: var(--color-1)}
    32%   {color: var(--color-1)}
    33%   {color: var(--color-2)}
    65%   {color: var(--color-2)}
    66%   {color: var(--color-2)}
    99%   {color: var(--color-1)}
    100%  {color: var(--color-1)}
}

@media only screen and (min-width: 768px) and (max-width: 992px){

    #Ab{
        margin: 10vw 10vw;
        font-size: 110px;
    }
    #Wk{
        margin: 10vw 10vw;
        font-size: 110px;
    }
    #Ct{
        margin: 10vw 10vw;
        font-size: 110px;
    }

    a  {
        font-size: 65px;
        padding: 40px 40px;
    }

    .box {
        width: 66%;
    }

    #img_index{
        width: 564px;
        height: 698px;
        margin-top: 15%;
    }
    #intro{
        font-size: 70px;
        margin-top: 27%;
    }

    .box2 {
        margin: 5vw 15vw;
        width: 67%;
    }
    #img_about{
        width: 720px;
        height: 1020px;
        margin-top: 20%;
    }
    #about {
        font-size: 40px;
    }

    .box3 {
        margin: 5vw 10vw;
        width: 80%;
    }
    #img_works{
        margin-top: -3%;
    }

    #img_contact{
        margin-left: 140px;
    }
    #contact{
        margin-top: 10%;
        margin-right: 175px;
        font-size:35px;
    }
    #nome_insta{
        width: 60px;
        height: 60px;
    }
    #nome_link{
        width: 60px;
        height: 60px;
    }
    #nome_beh{
        width: 60px;
        height: 60px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 600px){

    /*titulos*/

    #Ab{
        margin: 5vw 25vw;
    }
    #Wk{
        margin: 5vw 25vw;
    }
    #Ct{
        margin: 5vw 20vw;
    }

    /*menu*/

    ul {
        margin-top: 100px;
    }
    li{
        display:block;
    }
    a  {
        font-size: 65px;
        padding: 40px 40px;
    }

    /*intro*/

    .box {
        width: 80%;
    }
    #img_index{
        margin-top: 10%;
    }

    /*about*/

    .box2 {
        margin: 5vw 9vw;
        width: 80%;
    }
    #img_about{
        width: 420px;
        height: 620px;
    }

    /*works*/

    .box3 {
        margin: 5vw 2vw;
        width: 30%;
    }

    #img_works{
        width: 407px;
        height: 468px;
        margin-left: -15px;
        margin-top: -3%;
    }

    /*contacts*/

    .box4 {
        margin: 5vw 0vw ;
        border: none;
        width: 100%;
    }
    #img_contact{
        margin-left: 40px;
    }
    #contact{
    font-size: 22px;
    margin-left: 40px;
    }
    #nome_insta{
        width: 40px;
        height: 40px;
    }
    #nome_link{
        width: 40px;
        height: 40px;
    }
    #nome_beh{
        width: 40px;
        height: 40px;
    }


}