@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');
/* font-family: 'Architects Daughter', cursive; */
@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');
/* font-family: 'Gloria Hallelujah', cursive; */
@import url('https://fonts.googleapis.com/css2?family=Charmonman:wght@700&display=swap');
/* font-family: 'Charmonman', cursive; */

/*MOBILE FIRST*/

body {
     padding: 0;
     margin: 4%;
     background: #789681;
}

.container {
     display: grid;
     grid-gap: 20px;
     grid-template-areas:
          "header"
          "row1"
          "row2"
          "article"
          "footer";
}

/*
.img1{
     margin: 0;
     width: 90%;
     padding-right: 2em;
     position: absolute;
     top: 20px;
     right: 20px;
     bottom: 20px;
     left: 10px;
}
*/
header {
     grid-area: "header";
     display: flex;
     justify-content: space-between;
     width: 100%;
     box-shadow: 2px 2px 2px #B0B0B0, -2px -2px 2px #B0B0B0;
     background: #E3E3E3;
}

header h1 {
     font-family: 'Charmonman', cursive;
     font-size: 1.4em;
     margin-left: 3%;
}

header a {
     text-decoration: none;
     color: #000;
}

header p {
     font-family: 'Charmonman', cursive;
     margin-left: 3%;
}

.hide-mobile {
     display: none;
}

.show-desktop {
     display: none;
}

#nav {
     margin: 1.3%;
}

nav{
     margin: 7%;
}

/* .menu{
     width: 25px;
     padding-top: 1.5em;
     padding-right: 1.5em;
}
 */

ul {
     list-style-type: none;
     margin: 0;
}

nav ul {
     position: fixed;
     display: flex;
     flex-direction: column;
     width: 50%;
     top: 1%;
     right: 2%;
     text-align: left;
     background: #44827D;
     height: 40%;
     padding: 0;
     transition: .5s;
     border-radius: 5%;
}

nav ul li a {
     color: white;
     font-family: 'Architects Daughter', cursive;
     text-decoration: none;
     display: block;
     width: 100%;
     padding: 1em 2em;
}

nav ul li a:hover {
     background-color: #87cefa;
}

.exit-btn {
     text-align: right;
     padding: 10% 10% 0 5%;
}

.exit-btn:hover {
     cursor: pointer;
}

.imgHome {
     grid-area: "row1";
}

.imgHome img {
     width: 100%;
     box-shadow: 2px 2px 2px #B0B0B0, -2px -2px 2px#B0B0B0;
}

.pres {
     grid-area: "row2";
     display: flex;
     flex-direction: column;
     background: #E3E3E3;
     box-shadow: 2px 2px 2px #B0B0B0, -2px -2px 2px#B0B0B0;
}

.pres h2 {
     font-family: 'Charmonman', cursive;
     text-align: center;
     box-shadow: 2px 2px 5px #B0B0B0, -2px -2px 5px #B0B0B0;
}

.pres img {
     width: 60%;
     align-self: center;
     margin-bottom: 5%;
     box-shadow: 2px 2px 20px #B0B0B0, -2px -2px 20px #B0B0B0;
}

.pres p {
     font-family: 'Charmonman', cursive;
     text-align: center;
     line-height: 25px;
     padding: 5%;
     margin-bottom: 0;
     box-shadow: 2px 2px 10px #B0B0B0, -2px -2px 10px #B0B0B0;
}

.row2Btn {
     align-self: center;
     width: 25%;
     margin-top: 5%;
     margin-bottom: 5%;
}

#btn1{
     border-radius: 19px;
     padding: 3%;
}

footer {
     grid-area: "footer";
     display: flex;
     flex-wrap: nowrap;
     justify-content: space-evenly;
     background: #E3E3E3;
     box-shadow: 2px 2px 2px #B0B0B0, -2px -2px 2px#B0B0B0;
     font-family: 'Charmonman', cursive;
     text-align: center;
}

.social{
     width: 20%;
     padding: 5%;
}

.linkedinLogo{
     width: 35%;
     margin: 5%;
}

.facebookLogo{
     width: 35%;
     margin: 5%;
}

.footerInfos{
     display: flex;
     flex-direction: column;
     width: 80%;
}

.footerInfos button {
     width: 40%;
     align-self: center;
     border-radius: 19px;
     margin-bottom: 7%;
     padding: 2%;
}

.footerInfos p{
     margin-top: 8%;
     margin-bottom: 0;
}

.footerInfos span{
     margin-bottom: 2%;
}

.firma {
     font-family: 'Charmonman', cursive;
     font-size: .5em;
     text-align: center;
}

/* TITLE PAGE STYLE ROW 1 OF GRID ELEMENT */

.titlepag {
     grid-area: "row1";
     font-family: 'Charmonman', cursive;
     background: #E3E3E3;
     box-shadow: 2px 2px 2px #B0B0B0, -2px -2px 2px#B0B0B0;
     text-align: center;
}

/* CHISONO.HTML STYLE*/

.presentazione {
     grid-area: "row2";
     display: flex;
     flex-direction: column;
     font-family: 'Charmonman', cursive;
     background: #E3E3E3;
     box-shadow: 2px 2px 2px #B0B0B0, -2px -2px 2px#B0B0B0;
     text-align: center;
}

.chisonoimg {
     width: 70%;
     margin-top: 5%;
     box-shadow: 2px 2px 2px #B0B0B0, -2px -2px 2px#B0B0B0;
     align-self: center;
}

.presentazione p {
     font-size: .9em;
     line-height: 1.7em;
     padding: 5%;
}

.presentazione ul {
     text-align: left;
     font-size: .9em;
     line-height: 1.7em;
     padding: 2%;
     margin: 2%;
}

/* DICOSAMIOCCUPO.HTML STYLE*/

.servizi {
     grid-area: "row2";
     display: flex;
     flex-direction: column;
     font-family: 'Charmonman', cursive;
     background: #E3E3E3;
     box-shadow: 2px 2px 2px #B0B0B0, -2px -2px 2px#B0B0B0;
     text-align: center;
}

#doposcuola {
     box-shadow: 2px 2px 2px #B0B0B0, -2px -2px 2px#B0B0B0;
}

#doposcuola:hover{
     text-decoration: underline;
     text-decoration-color: #789681;
}

#doposcuolauparrow{
     margin-left: 1em;
     display: none;
}

#doposcuoladownarrow{
     margin-left: 1em;
}

#doposcuolaImg {
     display: none;
     width: 80%;
     box-shadow: 2px 2px 2px #B0B0B0, -2px -2px 2px#B0B0B0;
}

#doposcuolaP {
     display: none;
     font-size: .9em;
     line-height: 1.7em;
     margin: 2%;
     padding: 2%;
     box-shadow: inset 2px 2px 2px #B0B0B0, inset -2px -2px 2px#B0B0B0;
}

#VdG {
     box-shadow: 2px 2px 2px #B0B0B0, -2px -2px 2px#B0B0B0;
}

#VdG:hover {
     text-decoration: underline;
     text-decoration-color: #789681;
}

#VdGdownarrow{
     margin-left: 1em;
}

#VdGuparrow{
     margin-left: 1em;
     display: none;
}

#VdGImg {
     display: none;
     width: 80%;
     box-shadow: 1px 1px 2px #B0B0B0, -1px -1px 2px#B0B0B0;
}

#VdGP {
     display: none;
     font-size: .9em;
     line-height: 1.7em;
     margin: 2%;
     padding: 2%;
     box-shadow: inset 2px 2px 2px #B0B0B0, inset -2px -2px 2px#B0B0B0;
}

#CTPTitle {
     font-size: 1.7em;
     word-spacing: .2em;
     box-shadow: 2px 2px 2px #B0B0B0, -2px -2px 2px#B0B0B0;
}

#CTPTitle:hover {
     text-decoration: underline;
     text-decoration-color: #789681;
}

#CTPdownarrow{
     margin-left: 1em;
}

#CTPuparrow{
     display: none;
     margin-left: 1em;
}

#CTPImg {
     display: none;
     width: 80%;
     box-shadow: 1px 1px 2px #B0B0B0, -1px -1px 2px#B0B0B0;
}

#CTPP {
     display: none;
     font-size: .9em;
     line-height: 1.7em;
     margin: 2%;
     padding: 2%;
     box-shadow: inset 2px 2px 2px #B0B0B0, inset -2px -2px 2px#B0B0B0;
}

#mindTitle {
     box-shadow: 2px 2px 2px #B0B0B0, -2px -2px 2px#B0B0B0;
}

#mindTitle:hover {
     text-decoration: underline;
     text-decoration-color: #789681;
}

#Mindfullnessdownarrow{
     margin-left: 1em;
}

#Mindfullnessuparrow{
     margin-left: 1em;
     display: none;
}

#mindImg {
     display: none;
     width: 50%;
     box-shadow: 1px 1px 2px #B0B0B0, -1px -1px 2px#B0B0B0;
}

#mindP {
     display: none;
     font-size: .9em;
     line-height: 1.7em;
     margin: 2%;
     padding: 2%;
     box-shadow: inset 2px 2px 2px #B0B0B0, inset -2px -2px 2px#B0B0B0;
}

#SCPTitle {
     box-shadow: 2px 2px 2px #B0B0B0, -2px -2px 2px#B0B0B0;
}

#SCPTitle:hover {
     text-decoration: underline;
     text-decoration-color: #789681;
}

#scpdownarrow{
     margin-left: 1em;
}

#scpuparrow{
     display: none;
     margin-left: 1em;
}

#SCPImg {
     display: none;
     width: 65%;
     box-shadow: 1px 1px 2px #B0B0B0, -1px -1px 2px#B0B0B0;
}

#SCPP {
     display: none;
     font-size: .9em;
     line-height: 1.7em;
     margin: 2%;
     padding: 2%;
     box-shadow: inset 2px 2px 2px #B0B0B0, inset -2px -2px 2px#B0B0B0;
}

/*CONTATTAMI.HTML STYLE*/

.infoForm{
     grid-area: "row2";
     display: flex;
     flex-direction: column;
     font-family: 'Charmonman', cursive;
     background: #E3E3E3;
     box-shadow: 2px 2px 2px #B0B0B0, -2px -2px 2px#B0B0B0;
     text-align: center;
}

.formContainer{
     display: flex;
     flex-direction: column;
     margin: 2% 2%;
}

.formBtn{
     width: 25%;
     align-self: center;
     margin: 4% 0;
     border-radius: 19px;
     padding: 1%;
}

.infos{
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     margin: 3%;
}

.infos a{
     margin-bottom: 4%;
     text-decoration: none;
     color: #000;
}

/*MEDIA QUERY TABLET DEVICES*/

@media screen and (min-width: 768px){
     
     #nav{
          margin: 2.8% 1.4%;
          border-radius: 5%;
     }

     nav ul{
          height: 50%;
     }

     nav ul li{
          margin: 1%;
     }

     nav ul li a:focus {
          background-color: #87cefa;
          width: inherit;
     }

     header h1{
          font-size: 1.8em;
     }

     header p{
          font-size: 1.3em;
     }

     .pres p{
          line-height: 2em;
          letter-spacing: 1px;
     }

     .row2Btn{
          margin-left: 15%;
     }

     .linkedinLogo{
          width: 25%;
          margin: 5%;
     }

     .facebookLogo{
          width: 25%;
          margin: 5%;
     }

     .footerInfos{
          margin-left: 20%;
     }

     .titlepag{
          font-size: 1.2em;
     }

     .presentazione p{
          line-height: 2em;
          letter-spacing: 1px;
     }

     .presentazione ul{
          line-height: 2em;
          letter-spacing: 1px;
     }

     #doposcuolaP{
          line-height: 2em;
          letter-spacing: 1px;
     }

     #VdGP{
          line-height: 2em;
          letter-spacing: 1px;
     }

     #CTPP{
          line-height: 2em;
          letter-spacing: 1px;
     }

     #mindP{
          line-height: 2em;
          letter-spacing: 1px;
     }

     #SCPP{
          line-height: 2em;
          letter-spacing: 1px;
     }

     .infos{
          display: flex;
          flex-direction: row;
          justify-content: space-evenly;
     }
}

/*MEDIA QUERY FOR LAPTOP/DESKTOP*/

@media screen and (min-width: 1024px){
     
     .hide-desktop{
          display: none;
     }
     
     .show-desktop{
          display: flex;
     }

     nav ul{
          position: absolute;
          display: flex;
          flex-direction: row;
          width: 40%;
          flex-wrap: nowrap;
          justify-content: space-around;
          top: 220px;
          right: 50px;
          text-align: center;
          height: auto;
          border-radius: 0 !important;
          background: #E3E3E3;
     }

     nav ul li a{
          color: #000;
          padding: 0;
     }

     nav ul li a:hover{
          background: #E3E3E3;
          border-bottom: 2px solid #789681;
     }

     .pres img{
          width: 40%;
          height: 100%;
          margin: 20px auto;
     }

     #btn1:hover{
          background: #789681;
     }

     .footerInfos button{
          width: 20%;
          padding: 1%;
     }

     .footerInfos button:hover{
          background: #789681;
     }

     .firma{
          color: #E3E3E3;
          font-size: 10px;
          text-shadow: 1px solid #000;
     }

     .chisonoimg{
          width: 40%;
          height: 100%;
          margin: 20px auto;
     }

     .presentazione p{
          font-size: 18px;
     }

     .presentazione ul{
          text-align: center;
          font-size: 18px;
     }

     #doposcuola{
          cursor: pointer;
     }

     #VdG{
          cursor: pointer;
     }

     #CTPTitle{
          cursor: pointer;
     }

     #mindTitle{
          cursor: pointer;
     }

     #SCPTitle{
          cursor: pointer;
     }

     #doposcuolaImg {
          width: 30%;
     }

     #VdGImg {
          width: 30%;
     }

     #CTPImg {
          width: 30%;
     }

     #mindImg {
          width: 30%;
     }

     #SCPImg {
          width: 30%;
     }

     .infoForm{
          display: flex;
          flex-direction: row;
          width: 100%;
     }

     .formContainer{
          width: 60%;
          text-align: center;
     }

     .infos{
          width: 40%;
          padding: 10%;
          display: flex;
          flex-direction: column;
          text-align: center;
     }

     .formBtn:hover{
          background: #789681;
     }
}