header {
    background-color:#fff;
    padding:20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body{
    margin:auto;
}
.gridcontainer {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 10px;
    padding: 10px;
    width: 100%;
}
.gridcontainer > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    font-size: 30px;
}  

.logo{
    text-decoration: none;
    text-align: left;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    font-size: 35pt;
    color: rgba(75, 104, 254, 1);
}

.navigazione{
    justify-self: right;   
}
nav ul{
    display: flex;
    list-style-type:none;
}
nav a:hover {
    color: rgba(143, 161, 255, 1);
}
a.sinistra, a.destra {
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12pt;
    color: rgba(75, 104, 254, 1);
    text-decoration: none;
}
a.sinistra {
    border-right: 1px solid #000;
    padding-right: 10px;
}
a.destra {  
    padding-left: 10px;   
}

/*fine header*/

.gridcontainer2 {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 30% 70%;
    gap: 2%;
    row-gap: 1%;
    max-width: 100%;
    
}
.gridcontainer2 > div {
    text-align: center;
    font-size: 30px;
}  
.gridcontainer2io {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 17% 50%;
    gap: 2%;
    row-gap: 1%;
    max-width: 100%;
    
}
.gridcontainer2io > div {
    text-align: center;
    font-size: 30px;
}  
.gridcontainer2boca {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    gap: 2%;
    row-gap: 1%;
    max-width: 100%;
    
}
.gridcontainer2estate {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 42% 50%;
    gap: 2%;
    row-gap: 1%;
    max-width: 100%;
    
}
.gridcontainer2magia {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 41% 50%;
    gap: 2%;
    row-gap: 1%;
    max-width: 100%;
    
}
.gridcontainer2abisso {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 42% 50%;
    gap: 2%;
    row-gap: 1%;
    max-width: 100%;
    
}
.gridcontainer2kaguya {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 53% 50%;
    gap: 2%;
    row-gap: 1%;
    max-width: 100%;
    
}
.gridcontainer2boca > div {
    text-align: center;
    font-size: 30px;
} 
.testowwh {
    font-family: 'Hepta Slab', serif;
    font-weight: normal;
    font-size: 3.5vw;
    color: rgb(229, 168, 27);
    margin-top: 3%;
    margin-bottom: 2%;
    text-align: right;
    white-space: nowrap;
    list-style-type: none;
    line-height: 100%;
}

.nomeartista :visited {
    color: rgba(75, 104, 254, 1);
    text-decoration: none;
   }
.nomeartista :hover {
    color: rgba(75, 104, 254, 1);
  }
a{
    text-decoration: none;
    color: rgba(75, 104, 254, 1);
}
.nomeartista {
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: medium;
    font-size: 23pt;
    color:rgba(3, 33, 188, 1);
    margin: 0;
    line-height: 38px;
    margin-bottom: 3%;
}
.nomeartistamagia {
    text-align: right;
    font-family: 'Hepta Slab', serif;
    font-weight: bold;
    font-size: 67pt;
    color:rgba(3, 33, 188, 1);
    margin: 0;
    line-height: 85px;
    margin-bottom: 3%;
}
.nomeartistaabisso {
    text-align: right;
    font-family: 'Hepta Slab', serif;
    font-weight: bold;
    font-size: 67pt;
    color:rgba(3, 33, 188, 1);
    margin: 0;
    line-height: 85px;
    margin-bottom: 3%;
}
.indiceartisti :hover {
    color: rgba(143, 161, 255, 1);
}

.contenitoretestoartista{
width: 40vw;
padding-left: 10vw;
text-align: right;
align-self: right;
}

.testoartista{
    font-family: Helvetica, sans-serif;
    font-weight: medium;
    font-size: 2vw;
    color: #000;
    text-align: right;
    align-self: right;
    
}  

.contenitoreimmagini{
    display: grid;
    flex-direction: column;
    gap: 1%;
    justify-content: left;
    margin-top: 1.5vw;
}

img{
    max-height: 75vh;
    max-width: 65vw;
}

.contenitoreimmagini{
    max-height: 80%;
}

.immaginelinn{
    max-height: 45vh;
    max-width: 45vw;
}

.contenitoreimmaginilinn{
    display: grid;
    flex-direction: column;
    gap: 1%;
    justify-content: left;
    margin-top: 9vw;
}

/*fine main*/
/*inizio footer*/
.gridcontainer3 {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 2.5%;
    padding: 10px;
}
.gridcontainer3 > div {
    text-align: center;
    font-size: 30px;
}  

.logofooter{
    text-decoration: none;
    text-align: left;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    font-size: 35pt;
    color: white;
}

.nomifooter{
    padding-top: 3.5%;
    margin: auto;
    text-align: right;
    width: 35vw;
}
.contenitorefooter{
    text-align: right;
    justify-items: right; 
    width: 40vw;
}
#fine{
    padding-left: 2%; 
    text-decoration: none;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    font-size: 2.0vw;
    color: white;
}
footer{
    background-color: rgba(168, 181, 250, 1);
    height: 100%;
    width: 100%;
    margin-top: 0%;
}

@media (max-width: 1000px) { /*responsive pc*/
    /*header*/
    header{
        padding: 2vh;
        height: 2vh;
    }
    .gridcontainer{
        align-items: center;
    }
    .logo{
        font-size: 4.5vw;
    }
    a.sinistra, a.destra {
        font-family: Helvetica, sans-serif;
        font-weight: bold;
        font-size: 2vw;
        color: rgba(75, 104, 254, 1);
        text-decoration: none;
    }
    a.sinistra {
        border-right: 1px solid #000;
        padding-right: 10px;
    }
    a.destra {  
        padding-left: 10px;   
    }
    /*main*/
    .gridcontainer2 {
        display: grid;
        grid-template-columns: 40%;
        grid-template-rows: 22vw 1fr;
        justify-content: center;
        gap: 0.5%;
        max-width: 100%;
    }
    .gridcontainer2io {
        display: grid;
        grid-template-columns: 40%;
        grid-template-rows: 22vw 1fr;
        justify-content: center;
        gap: 0.5%;
        max-width: 100%;
    }  
    .gridcontainer2io > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        font-size: 30px;
        max-width:100%;
    } 
    .gridcontainer2boca {
        display: grid;
        grid-template-columns: 40%;
        grid-template-rows: 49vw 1fr;
        justify-content: center;
        gap: 0.5%;
        max-width: 100%;
    }
    .gridcontainer2estate {
        display: grid;
        grid-template-columns: 40%;
        grid-template-rows: 30vw 1fr;
        justify-content: center;
        gap: 0.5%;
        max-width: 100%;
    }
    .gridcontainer2magia {
        display: grid;
        grid-template-columns: 40%;
        grid-template-rows: 49vw 1fr;
        justify-content: center;
        gap: 0.5%;
        max-width: 100%;
    }
    .gridcontainer2abisso {
        display: grid;
        grid-template-columns: 40%;
        grid-template-rows: 40vw 1fr;
        justify-content: center;
        gap: 0.5%;
        max-width: 100%;
    }
    .gridcontainer2kaguya {
        display: grid;
        grid-template-columns: 40%;
        grid-template-rows: 48vw 1fr;
        justify-content: center;
        gap: 0.5%;
        max-width: 100%;
    }
    .contenitoretestowwh{
        max-height: 70%;
    }
    .indiceartisti {
        font-size: 10vw;
        line-height: 10vw;
    } 
    .nomeartista {
        text-align: right;
        font-size: 10vw;
        line-height: 90%;
        margin-top: 4%;
        margin-bottom: 4%;
    }
    .nomeartistamagia {
        text-align: right;
        font-size: 10vw;
        line-height: 90%;
        margin-top: 4%;
        margin-bottom: 4%;
    }
    .contenitoretestoartista{
        padding-left: 0;
    }
    .testoartista{
        text-align: right;
        font-size: 3vw;
    }

    img {
     max-height: 50vh;
     max-width: 40vw;
        
    }
    .logofooter{
        text-decoration: none;
        text-align: left;
        font-family: Helvetica, sans-serif;
        font-weight: bold;
        font-size: 4.5vw;
        color: white;
    }
    footer{
        margin-top: 15vh;
    }
}

@media (max-width: 420px) { /*responsive smartphone*/
    /*header*/
    header{
        padding: 2vh;
        height: 2vh;
    }
    .gridcontainer{
        align-items: center;
    }
    .logo{
        font-size: 4.5vw;
    }
    a.sinistra, a.destra {
        font-family: Helvetica, sans-serif;
        font-weight: bold;
        font-size: 2vw;
        color: rgba(75, 104, 254, 1);
        text-decoration: none;
        white-space: nowrap;
    }
    a.sinistra {
        border-right: 1px solid #000;
        padding-right: 10px;
    }
    a.destra {  
        padding-left: 10px;   
    }
    /*main*/
    .gridcontainer2io {
        display: grid;
        grid-template-columns: 40%;
        grid-template-rows: 21vw 35%;
        justify-content: center;
        gap: 0.5%;
        max-width: 100%;
    }
      
    .gridcontainer2io > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        font-size: 30px;
        max-width:100%;
    } 
    .gridcontainer2boca {
        display: grid;
        grid-template-columns: 40%;
        grid-template-rows: 40vw 1fr;
        justify-content: center;
        gap: 0.5%;
        max-width: 100%;
    }
    .gridcontainer2magia {
        display: grid;
        grid-template-columns: 40%;
        grid-template-rows: 27vw 1fr;
        justify-content: center;
        gap: 0.5%;
        max-width: 100%;
    }
    .gridcontainer2abisso {
        display: grid;
        grid-template-columns: 40%;
        grid-template-rows: 37vw 1fr;
        justify-content: center;
        gap: 0.5%;
        max-width: 100%;
    }
    .gridcontainer2kaguya {
        display: grid;
        grid-template-columns: 40%;
        grid-template-rows: 45vw 1fr;
        justify-content: center;
        gap: 0.5%;
        max-width: 100%;
    }


    .contenitoretestowwh{
        max-height: 70%;
    }
    .indiceartisti {
        font-size: 10vw;
        line-height: 10vw;
    } 
    .nomeartista {
        text-align: right;
        font-size: 3.7vw;
        line-height: 126%;
        margin-top: 4%;
        margin-bottom: 4%;
    }
    .nomeartistamagia {
        text-align: right;
        font-size: 7vw;
        line-height: 90%;
        margin-top: 4%;
        margin-bottom: 4%;
    }
    .nomeartistaabisso {
        text-align: right;
        font-size: 7vw;
        line-height: 90%;
        margin-top: 4%;
        margin-bottom: 4%;
    }
    

    .testoartista{
        text-align: right;
        font-size: 3vw;
    }

    img {
     max-height: 45vh;
     max-width: 35vw;
        
    }
    .immagine{
        max-height: 27vh;
        max-width: 37vw;
        align-content: right;
    }
    .contenitoreimmagini{
        justify-self: right;
    }

    /*footer*/
    .logofooter{
        text-decoration: none;
        text-align: left;
        font-family: Helvetica, sans-serif;
        font-weight: bold;
        font-size: 4.5vw;
        color: white;
    }
    #fine{
        padding-left: 2%; 
        text-decoration: none;
        font-family: Helvetica, sans-serif;
        font-weight: bold;
        font-size: 2.5vw;
        color: white;
    }  
    footer{
        margin-top: 3vh;
    }       
}