mhw1.css

/* .carlito-regular {
    font-family: "Carlito", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .carlito-bold {
    font-family: "Carlito", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .carlito-regular-italic {
    font-family: "Carlito", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .carlito-bold-italic {
    font-family: "Carlito", sans-serif;
    font-weight: 700;
    font-style: italic;
  } */

/* official
 *      Primary A    : #908149; 
 *      Primary B    : #625832
 *      Secondary A  : #786B3D
 *      Secondary B  : #484025
 *      Light A      : #FFFCF2
 *      Light B      : #D3C8BA
 *      Text A       : #D8D4D0
 *      Text B       : #ECE9E4
 *      Text C       : #FFFFFF
*/

/* text
rgb(51, 51, 51)
rgb(144, 129, 73)
rgb(255, 255, 255)
rgb(85, 85, 85)
rgb(236, 233, 228)
rgb(216, 212, 208)
rgba(51, 51, 51, 0)
rgb(153, 153, 153)
rgb(136, 136, 136)
rgb(255, 230, 140)
*/

/* background
rgba(0, 0, 0, 0)
rgb(38, 38, 36)
rgb(255, 255, 255)
rgb(120, 107, 61)
rgb(144, 129, 73)
rgba(216, 212, 208, 0)
rgb(255, 230, 140)
rgb(255, 252, 242)
rgba(20, 20, 20, 0.95)
*/

@media (max-width: 480px){
    body{
        margin: 0 5px;
        font-size: calc(2rem+5%);
    } 
    .linkbar{
        flex-direction: column;
    }
    .sezione_desktop{
        flex-direction: column;
        /* background-color: red;     */

    }
    /* .sezione_dx{
        background-color: blue;    
    } */
}


@media(max-width: 768px) and (min-width:481px){
    body{
        margin: 0 5px;
    }
}



#font{
    font-family: "Carlito", sans-serif;
    font-weight: 400;
    font-style: auto;

    font-size: calc(1em+1%);
}

.collegamento:link, .collegamento:visited{
    color: rgb(144, 129, 73);

    text-decoration: none;
}

.collegamento:hover, .collegamento:active{
    color: rgb(144, 129, 73);

    text-decoration: underline;
}


.titolo{
    color: rgb(236, 233, 228);
    font-size: 2rem;
}

.sottotitolo{
    color: rgb(216, 212, 208);
    font-size: 1rem;

    margin-bottom: 5%;
}

.desc{
    font-size: 2rem;
}

.marrone{
    background-color: rgb(120, 107, 61);
}

.giallo{
    background-color:rgb(255, 230, 140);
}

.bianco{
    background-color: rgb(255, 252, 242);
}

#header{
    display: flex;
    flex-direction: column;
}

#intestazione_sopra{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;

    height: 50%;
    width: 100%;
}

#intestazione_sotto{
    height: 50%;
    width: 100%;

    text-align: center;
}



#subheadersx{
    /* display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center; */

    height: 100%;
    width: 50%;
    text-align: center;
}



#subheaderdx{
    height: 100%;
    width: 50%;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-end;
}

#subheaderdx .collegamento .immagine{
    height: 30px;
    width: 30px;
}

#subheaderdx .collegamento:link, #subheaderdx .collegamento:visited{
    border: 1px transparent white;
    border-radius: 10px;
    margin-top: 3%;
    margin-bottom: 3%;
    margin-right: 3%;

    padding: 6px;

    background-color: rgb(144, 129, 73);

    color: rgb(236, 233, 228);
    text-decoration: none;
}
#subheaderdx .collegamento:hover, #subheaderdx .collegamento:active{
    background-color: rgb(120, 107, 61);

    color: rgb(236, 233, 228);
    text-decoration: none;
}





#flex_footer{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    text-align: center;

    background-color: rgb(255, 252, 242);
}


.immagine{
    height: 15%;
    width: 15%;
}


.linkbar{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 50%;
    width: 100%;
}

.linkbar .immagine{
    height: 25%;
    width: 25%;
}

.icona_con_testo{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    text-align: center;

    margin: 5px;
}

.vuoto{
    background-color: rgb(255, 255, 255);
    height: 50px;
}


.sezione_desktop{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
/* 
    height: auto;
    width: 100%; */

}

.sezione_sx{ /*dove ci vanno le immagini*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    
    width: 50%;
    height: 100%;
/* 
    margin-top: 60px; */
}

.sezione_dx{ /*dove ci vanno titolo, testo e sottoliste*/
    display: flex;
    flex-direction: column;

    width: 50%;
    height: 100%;
}

.sezione_dx_top{/*dove ci vanno titolo e testo*/
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 50%;
}

.sezione_dx_bottom{/*dove ci vanno le sottoliste*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* flex:200px; */

    width: 100%;
    height: 50%;

    margin: 1%;
}



.lista{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    padding: 3%;
}

.sottolista{
    list-style-type:circle;
    
}



.marrone .sezione_desktop .sezione_dx .collegamento:link,
.marrone .sezione_desktop .sezione_dx .collegamento:visited{
    border: 1px transparent white;
    border-radius: 10px;
    margin-top: 3%;
    margin-bottom: 3%;
    margin-right: 3%;

    padding: 6px;

    background-color: rgb(144, 129, 73);

    color: rgb(236, 233, 228);
    
    text-decoration: none;
    text-align: center;
    
}

.marrone .sezione_desktop .sezione_dx .collegamento:hover,
.marrone .sezione_desktop .sezione_dx .collegamento:active{
    background-color: rgb(120, 107, 61);

    color: rgb(236, 233, 228);
    text-decoration: none;
    /* text-align: center; */ /*anche se non lo metto rimangono così, ???*/
}

/*vorrei un bordo per l'immagine della bacchetta e per i link più attaccato, come fare?*/

#testo-su-immagine{
    height: 100%;
    width: 100%;
    background-image: url(immagini/EPIKO!!1!.png);
    background-size: contain;
    background-position:center;
    background-repeat: no-repeat;
}