*{
    margin: 0;
    padding: 0;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}
body{
    background-color: #d0f5f5;
    font-family: 'Courier New';
    font-family: 'Noto Sans Myanmar', sans-serif;
    overflow-y: auto;   
    scroll-behavior: smooth;

}
.HomeSection h1{
    font-size: 2rem;
}
.headerForMindFul{
    font: 2em 'Courier New';
    justify-self: center;
    padding: 20px;
    margin: 10px;
    background-color: #5fe8b2;
    border-radius: 10px 40px;
}
.mmbtn{
    justify-self: end;
    margin-right: 40px;
}
.btnInHome{
    padding: 10px;
    border-radius: 40px;
    background-color: #9edbc3;
    font: 1em  monospace;
    justify-items: center;
}
.HomeSection{
    line-height: 2.5rem;
    justify-self: center;
    padding: 20px;
    margin: 20px;
}
.BoxForQuickExercise{
    justify-self: center;
    background-color: aliceblue;
    padding: 30px;
    margin: 20px;
    border-radius: 20px 60px;
    border: 3px solid #9edbc3;
    line-height: 1.3rem;
}
.cardsExercise{
    display: flex;
}
@media (max-width:600px) {
   .cardsExercise{
    display: block;
   }
   .cardsExercise div{
    padding-left: 100px;
    padding-right: 100px;
    font-size: small;
   }
   .modal{
     width:100%;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:10px;
   }
   .modal .modal-content {
      width:100%;
      max-width:400px;
      max-height:200vh;
      overflow-y:auto;
      margin:20px auto;
      font-size:14px;
      padding:20px;
      align-items:center;
      padding-top:60px;
   }
   .box1 .imageForbox{
    width: 70px;
    height: 70px;
   }
   .box1 h1{
    font-size: x-small;
   }
   .BigBox img{
    width: 230px;
    height: 280px ;
   }
  

}
.exercise1{
    width: 30%;
    background-color: #9edbc3;
    padding: 20px;
    margin: 10px;
    border-radius: 0px 50px 0px 0px;
    border-bottom: 10px solid #0d2d21;
}

footer{
   text-align: center;
   padding: 20px;
   background-color: #9edbc3;
}
/* Modal background */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); 
}

/* Modal box */
.modal-content {
    display:flex;
    flex-direction:column;
    background-color: #d0f5f5;
    margin: 5% auto;
    line-height: 2rem;
    padding: 20px;
    width: 600px;
    border-radius: 15px;
    text-align: center;
    position: relative;
    align-items:center;
    justify-content:center;
    max-width: 600px;
    max-height: 80vh;   
    overflow-y: auto;   
    scroll-behavior: smooth;
}

/* Close button */
.close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 22px;
    cursor: pointer;
}

.backbtn a::after, a::before , a:visited{
    color: black;
}
.backbtn{
    margin: 20px;
}

.EOHomepage{
    justify-self: center;
    text-align: center;
    background-color: #97d9d9;
    margin: 20px;
    padding: 20px;
    border-radius: 10px 60px;
    border: 3px solid green;
}
.SOScontacts li{
    padding: 20px;
    margin: 20px;

}

#EmergencyModal .red{
  border: 2px solid red;
  border-radius: 20px;
  padding: 5px;
}
.categoriesForEx{
    padding: 20px;
    margin: 40px;
}
.boxForActivity{
    border: 3px outset green;
}
.categoriesForEx .boxForActivity{
    padding: 30px;
    margin: 10px;
    border-radius: 20px;
}
.boxForActivity p{
  font-family: "Times New Roman", Times, serif;
  padding-top: 10px;
  padding-bottom: 10px;
}
.boxForActivity h2{
    border: 2px double black;
    width: 250px;
    border-radius: 20px;
}
.modal-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.buttons{
    margin-bottom:15px;
    margin: 5px;
}

button{
    padding:8px 15px;
    margin:5px;
    font-size:16px;
    cursor:pointer;
}

.brcircle1{
    width:220px;
    height:220px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.brcircle{
    width:80px;
    height:80px;
    border-radius:50%;
    background-color:rgb(141,208,156);

    display:flex;
    justify-content:center;
    align-items:center;

    transition:all 4s ease-in-out;
}

.text{
    font-size:20px;
    color:blueviolet;
}
.Bbuttons, .Ibuttons{
    color: black;
    padding: 3px;
    background-color: #46a57f;
    border: 2px outset green;
    border-radius: 20px;
}

#resetQModal li{
    background-color: #bde1a1;
    padding: 5px;
    margin: 1px;
    border-radius: 7px;
    border-left: 3px solid  rgb(35, 105, 29);
}
.PrecisionFooter{
    margin: 0;
    text-align: center;
    border-radius: 20px;
    border: 3px outset rgb(35, 105, 29);
    background-color: #6d9054;
}

/*
physical page
*/

.boxForAnxiety{
    padding: 20px;
    margin: 20px;
    justify-self: center;
    border-radius: 20px;
    display: flex;
}
.imageForbox{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px double brown;
    margin: 5px;
    background-color: #9edbc3;
}
.imageForbox:hover{
    background-color: #395822;
    cursor: pointer;
}
.BigBox{
    border: 2px outset darkslategrey;
    border-radius: 20px;
    background-color: #a5df7b;
}
.boxOdd{
   background-color: #719c52;
}
.boxEven{
   background-color: #28c177;
}
/* writting */
.notefirstone{
    text-align: center;
}
.notefirstone div{
    background-color: #a5df7b;
    padding: 15px;
    margin: 5px;
    border-radius: 10px 30px;
    border-top: 4px solid #132619;
    width: 500px;
    text-align: center;
    justify-self: center;
}
.feelingboxparent{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap; 

}
.feelingbox{
    width:260px;
    border-radius:20px;
    overflow:hidden; /* important for rounded corners */
    margin: 20px;
}
.feelingbox h1, .feelingbox span{
    margin:0;
    padding:15px;
    background-color:#0f5438; /* dark green */
    color:white;
    font-size:18px;
    text-align:center;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.insideboxsmall{
    background-color:#77b977; /* light green */
    padding:15px;
    border-top:2px solid #0d2d21;
    border-radius: 0px 0px 20px 20px;
}
.insideboxsmall p{
    margin:8px 0;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.reflectionSection {
    background-color: #b8eb93;
    padding: 40px;
    margin: 20px;
    justify-self: center;
    border-radius: 20px 60px;
    border: 2px outset green;
    line-height: 2rem;
    
}
.reflectionSection  li{
    list-style-type: circle;
    padding-left: 10px;
    color: #1b452d;
}
.reflectionSection h1{
    font-size: large;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Music */

.Musicblocks{
    border-radius: 10px;
}

.Musicblocks h1{
    background-color: #1b452d;
    padding: 10px;
    margin: 5px;
    border-radius: 20px;
    width: 200px;
    text-align: center;
}
.Musicblocks p{
    padding-bottom: 10px;
}

/* Mindful */
.imgformindfulcover{
    border-radius: 10px;
}
.parentforboxes{
    display: flex;
     border-radius: 30px;
}
.childbox{
    display: inline;
    width: 40%;
    margin: 7px;
    padding: 10px;
    border-radius: 30px;
    border: 2px outset darkcyan;
    box-shadow: #46a57f;
}
.parentforboxes li{
    list-style-type:square;
    list-style-position: inside;
    padding-left: 20px;

}
.boxoverwhelmed{
    border-radius: 20px;
    border: 2px outset darkcyan;
    box-shadow: #46a57f;
    padding: 20px  100px;
    margin: 20px 100px;
    font: 1.5em sans-serif;
}
.insideboxoverwhelmed{
    padding: 30px;
    margin: 30px;
    line-height: 3rem;
    border-radius: 30px;
    border: 4px double darkgreen;
    width: 800px;
}
.Step-by-Stepbox{
    padding: 20px;
    margin: 30px 120px;
    background-color: #46a57f;
    border-radius: 30px;
    border: 3px outset darkgreen;

}
.Step-by-StepboxTitle{
    font-size: larger;
    padding: 20px;
    margin: 20px;
    background-color: beige;
    border-radius: 30px;
    text-align: center;
}
.Step-by-Stepbox div{
    padding: 5px 20px;
    margin: 20px;

}
.Step-by-Stepbox div h2 {
    font-family:'Gill Sans';
    font-size: medium;
    padding: 10px;
    margin: 10px;
    background-color: bisque;
    border-radius: 10px;
    text-align: center;
    font-weight: 400;

}
.Step-by-Stepbox div h3{
    font-family: 'Gill Sans';
    font-size: medium;
    padding-left: 30px;
}
.Step-by-Stepbox div p{
    padding: 5px;
    font-size: medium;
    color: rgb(42, 34, 34);
    font-family:'Gill Sans';
}
.Step-by-Stepbox div li{
    list-style-type: disc;
    padding-left: 70px;
    list-style: inside;
    font-size: medium;
    font-family: 'Gill Sans';
}
.insideboxoverwhelmed li{
    list-style-type: disc;
    padding-left: 70px;
    list-style: inside;
}
.parentforboxes button{
    padding: 5px 20px;
    margin: 20px;
    background-color: burlywood;
    color: black;
    border-radius: 20px;
    border: 2px outset sienna;
}
/*Art*/
.btncontainersForArt{
    display: flex;
    gap: 2px;
    padding: 10px;
    margin: 10px;
}
.btncontainersForArt button{
    padding: 10px;
    margin: 10px;
    background-color: #1b452d;
    border: 2px inset green;
    border-radius: 20px;
    color: white;
}