@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --base-color: rgb(246, 247, 188);
    --text-color:rgb(50, 2, 9);
    --primary-color:rgb(239, 125, 38);
    --secondary-color:rgb(150, 33, 150);
    --color-1: rgb(250, 166, 143);
    --color-2: rgb(243, 213, 168);
    --color-3: green;
}
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
html{
    font-family: Merryweather, Poppins, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: aquamarine;
   
    
}
body{
    padding: 1em;
    background: linear-gradient(-90deg, rgba(0,0,0,0), rgba(0,0,0,0.01), rgba(0,0,255,1));
   animation: gradient 35s ease infinite;
   background-size: 400%;
   content: '';
   
    
}
h1, h2, h3 {
    font-family: Merriweather, Poppins, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header, section{
    margin: 2em auto;
    width: 100%;
    border-radius: 1em;
    background-color: var(--color-1);
   padding: 1vw;
    border-radius: 1em;
    border-top: white 0.2em solid;
    border-bottom: white 0.2em solid;
}
header:hover, section:hover{
    border-top:none;
    border-bottom:none;
    box-shadow: 3vw 5vw 10vw 0 white inset;

}

section{
    padding: 3em min(2em, 15%);
    background-color: var(--color-2);
    text-align: center;
}
h2{
    font-size: 1.5vw;
}
section p{
    margin-top: 1em;
    font-size: 1.25em;
}
@media(min-width:640px){

.text-container-center{
    width: 100%;
}
/*labo-grid*/
.mobile-laboratory{
    display: none;
}
.box{
    display: flex;
    align-items: self-start;
    border-radius: 10px;
    border-top: white 0.2em solid;
    border-bottom: white 0.2em solid;
    cursor: pointer;
}
#box01:hover, #box02:hover, #box03:hover, #box04:hover, #box05:hover, #box06:hover, #box07:hover, #box08:hover, #box09:hover, #box10:hover, #box11:hover{
    scale:1.1;
    transition: 500ms ease;
    border-bottom:none;
    border-top:none;
    box-shadow: 1px 1px 20px 8px rgb(198, 241, 241) inset;
   
}
.labo{
    display: grid;
    grid-template-columns:repeat(4,1fr) ;
    grid-template-rows:repeat(4,1fr);
    grid-template-areas:
    "box-1 box-2 box-3 box-4"
    "box-1 box-5 box-5 box-4"
    "box-7 box-8 box-8 box-10"
    "box-6 box-11 box-9 box-10";
    gap:1em;
    height: 70vw;
}
.box a{
    border-radius: 10px 10px 0 0;
    font-size: 1.5vw;
    background-image: linear-gradient(to right, #24ed06, #12ef53, #1eef7b, #3bef9a, #5bedb3, #6eecc0, #81ebcb, #95e9d3, #a0e9d9, #abe9dd, #b6e9e1, #c2e9e4);
    padding: 2%;
    width: 100%;
    color: white;
    text-shadow: 10px 8px 8px black;
    text-decoration: none;
}
}
#box01{
    background:url(/public/images/grid-img/artistico.png)no-repeat center;
   background-size:100% 100%; 
}
#box02{
    background-image:url(/public/images/grid-img/informatica.png);
   background-size:cover; 
}
#box03{
        background-image:url(/public/images/grid-img/passeggiata.jpg);
   background-size:cover; 
}
#box04{
    background-image:url(/public/images/grid-img/ginnastica.png);
   background-size:cover; 
}
#box05{
   background-image:url(/public/images/grid-img/cucina.jpg);
   background-size:100% 100%;
}
#box06{
   background-image:url(/public/images/grid-img/lettura.jpg);
   background-size:cover; 
}
#box07{
    background-image:url(/public/images/grid-img/cineforum.jpeg);
   background-size:cover; 
  
}
#box08{
    background:url(/public/images/grid-img/musica.jpg) no-repeat center;
   background-size:100% 100%; 
}
#box09{
    background-image:url(/public/images/grid-img/piscina.jpg);
   background-size:cover; 
  
}
#box10{
    background:url(/public/images/grid-img/scrittura.jpg) no-repeat;
   background-size:cover; 
  
}
#box11{


       background:url(/public/images/grid-img/musicapassiva.jpg)no-repeat center;
   background-size:100% 100%; 
  
}
 .tailcentro{
    background-color:black;
    background:url(/public/images/deviltailnoback.png)top right no-repeat ;
    background-size: 15vw;
    width: 61.8vw;
    height: 5vw;
    display: flex;
    justify-content: center;
    z-index: 10;
    position: relative;
    bottom: 6.8vw;
}