:root{
    --Verdfosc: #778F90;
    --Verdclar: #A6B5B6;
    --Blancbrut: #FDFDFD;
    --Negra: #232323;
    --Blancopocitat: #fdfdfd4c;
}
body{
    margin: 0px;
    font-family: 'Light', sans-serif;
    font-size: 15px;
    font-weight: 300;
    font-style: normal;
    line-height: normal;
    color: var(--Negra);
    height: 700px;
    width: 360px;
}

/**estils de text**/
h1{
    font-family: "jeanne-moderno", serif;
    font-size: 40px;
}
h2{
    font-family: "jeanne-moderno", serif;
    font-size: 36px;
}
h3{
    font-family: 'Light', sans-serif;
    font-size: 24px;
    font-weight: 300;
}
h4{
    font-family: 'Light', sans-serif;
    font-size: 20px;
    font-weight: 300;
}
h5{
    font-family: 'Light', sans-serif;
    font-size: 16px;
}
h6{
    font-family: 'Light', sans-serif;
    font-size: 12px;
}
.h7{
    font-family: 'Light', sans-serif;
    font-size: 10px;
}
.h8{
    font-family: 'Light', sans-serif;
    font-size: 8px;
}
.bold{
    font-family: 'Medium', sans-serif;
    font-weight: 500;
}
.majuscules{
    text-transform: uppercase;
}
.verdfosc{
    color: var(--Verdfosc);
}
.verdclar{
    color: var(--Verdclar);
}
.blancbrut{
    color: var(--Blancbrut);
}
.blancopacitat{
    color: var(--Blancopocitat);
}    


a{
    text-decoration: none;
}

.liniaseparadora{
    border-top: 1px solid var(--Blancbrut);
    margin: 0% 5%;
    width:290px ;
}

/**margins i paddings**/
mt42{
    margin-top: 42px;
}
mt30{
    margin-top: 30px;
}
mtb20{
    margin-top: 20px;
    margin-bottom: 20px;
}
ml30{
    margin-left: 30px;
}
.centrat{
    display: flex; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.textcentrat{
    text-align: center;
}
/**pantalla1 **/
.pantalla1{
    background-color: var(--Verdfosc);
}
div.logopantalla1{
    display: flex;
    justify-content: center;
    align-items: center;
}
img.logo1blanc{
    height: auto;
    width: 40%;
    padding-top: 80%;
    padding-bottom: 65%;
}

/**pantalla2 **/
body.pantalla2{
    background-color: var(--Verdclar);
    justify-content: center;
}
.logo2{
    width: 30%;
    height: auto;
    bottom: 5%;
    position: absolute;
    display: flex;
    left: 34%;
}

.hola{
    margin-top: 200px;
}
.input{
    background-color: var(--Verdclar);
    border: 0px solid;
    color: var(--Blancopocitat);
    
}
::placeholder{
    color: var(--Blancopocitat);
    font-family: 'Light', sans-serif;
    font-size: 15px;
}

.boto{
    border: 1px solid var(--Blancbrut);
    border-radius: 20%;
    padding: 5px  10px;
}

.botoblanc{
    background-color: var(--Blancbrut);
}
.boto2{
    position: absolute;
    top: 570px;
}
/**pantalla 5**/
.frase{
    margin: 0px 45px;
}

/**pantalla6 inici**/
.inici{
    border-top: 1px solid var(--Blancbrut);
    border-right: 1px solid var(--Blancbrut);
    border-top-right-radius: 40px;
    padding-top: 23px;
    padding-left: 24px;
    width: 344px;
}
.menuinici{
    position: absolute;
    bottom: 0%;
}
.frasedalt{
    border-bottom: 1px solid var(--Blancbrut);
    border-right: 1px solid var(--Blancbrut);
    border-left: 1px solid var(--Blancbrut);
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
    padding-bottom: 55px;
    text-align: center;
    width: 344px;
    height: 204px;
}