article 
{ 
    width: 100%; 
    height: 100%; 
}
.start 
{ 

    background-image: url(../images/mentalhealth.jpg);
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    height: 500px;
    clip-path: polygon(100% 0, 100% 90%, 69% 100%, 0 85%,0 0 );
    background-attachment: fixed;
    
}

@media screen and (max-width: 1100px)
{  
    .start {

        background-image: url(../images/mentalhealth.jpg);
        background-position: center;
        background-size:contain;
        background-repeat: no-repeat;
        height: 400px;
        width: 100%;
        clip-path: none;
        background-attachment:scroll;
        margin-top: 2%;
        
    }
}

 #title  
{ 
    
    padding:  2% 5%;
    font-size: 60px;  
    text-shadow: 10px 10px 6px #bdb5b5;  
    word-wrap:break-word; 
}

.section1 p 
{  
   font-size: 21px;
    padding-left: 5%;
    padding-right: 5%;
line-height: 30px;
}

.video-section {
    width: 60%;
    margin: 2rem auto; 
    
  }
  
  .gallery {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 5vw);
    grid-gap: 1.5rem; 
  }
  
  .gallery video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; 
  }
  
  .gallery__item--1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
  

  }
  
  .gallery__item--2 {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 3;
  
  
  }
  
  .gallery__item--3 {
    grid-column-start: 5;
    grid-column-end: 9;
    grid-row-start: 1;
    grid-row-end: 6;
  
    
  }
  
  .gallery__item--4 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 6;
  
   
  }
  
  .gallery__item--5 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 6;
    grid-row-end: 9;
  
  
  }
  
  .gallery__item--6 {
    grid-column-start: 5;
    grid-column-end: 9;
    grid-row-start: 6;
    grid-row-end: 9;
  
   
  }

.section2
{ 
    display: flex; 
    align-items: center;
    justify-content: center;
    background: rgb(139,237,218);
    background: radial-gradient(circle, rgba(139,237,218,1) 0%, rgba(162,197,236,1) 100%);
   
   
}
.player1 
{ 
    position: relative; 
    width: 40%;
    padding:4%;
 
   
}

.player1 .imgbox1 
{
    position: relative; 
    width: 100%; 
    height:380px;
}

.player1 .imgbox1 img 
{ 
    position: absolute; 
    top:0; 
    left:0; 
    width: 100%; 
    height:100%; 
    object-fit: cover;
}
.player1 audio 
{ 
    width: 100%; 
    outline: none; 
}
#righparagraph
{ 
 color: #000000; 
 font-family: "Great Vibes", cursive; 
 font-size: 35px; 
 line-height: 30px; 
 font-weight: normal; 
 margin-bottom: 0;
  text-align: center; 
  text-shadow: 0 1px 1px rgb(204, 203, 203);  
  background: rgb(139,237,218);
  background: radial-gradient(circle, rgba(139,237,218,1) 0%, rgba(162,197,236,1) 100%);
}


.section1 a:hover
{ 
 background:none; 

}
  
hr 
{ 
    border-style:ridge; 
    border-color: rgb(191, 216, 216); 
}

.quote-container
{ 
  background-color: #9bbac2;
  border: 5px solid #f5e4c3; 
  min-height: 300px; 
  width: 60%; 
  margin :3% auto; 
  text-align: center; 

}
#btn 
{ 
  margin: 5% auto; 
  padding:1.3%;  
  font-size: 20px; 
  background-color: #f5e4c3;
}

#output 
{ 
  margin: 10%;  
  font-size: 22px; 
  color: white; 
}
 
.buttons 
{ 
  padding: 0.3%;
  background-color:rgba(162,197,236,1); 
  border: 1px solid black; 
  border-radius: 10%; 
  font-weight: bold; 
} 

.buttons:hover 
{ 
  background-color:rgb(8, 74, 112); 
  color: white; 
}
#multiple-columns {
column-count: 3;
  column-gap: 40px;
  column-rule-style: solid;
  column-rule-color: lightblue;
}

.table 
{ 
    max-width: 100%; 
    height:auto; 
    margin: 2%; 
    padding: 5%;   
    font-size: 20px;  
   
}
.table a 
{ 
    text-decoration: none;
}

.table a:visited, .table  a:hover, .table a:focus {
    text-decoration: none;
    color: #000;
}
table {
    font-family: arial, sans-serif;
    width: 100%; 
    margin-top: 2%;  
    outline: #a1bda2 solid 10px; 
    outline-offset: 5px;
}
 
  th {
    border: 1px solid #000000;
    text-align: left;
    padding: 8px; 
    background-color:rgb(191, 216, 216);
  }
  td { 
    border: 1px solid #000000;
    text-align: left;
    padding: 8px; 

  }

#button1,#button2,#button3,#button4,#button5,#button6
{ 
    padding: 1%; 
    font-size: 20px;  
    margin: 2%; 
    background-color:rgb(191, 216, 216);  
    border-image:url(/images/border.png) 30% round;
    cursor: pointer;

}
   
.organize 
{ 
  animation: change 5s infinite;
}
 .relax 
 { 
  animation: changebg 5s infinite;
  }
  @keyframes changebg{
    0%{background:#6b96b9;}
    25%{background:#90b3cf;}
    50%{background:#a8bdce;}
    75%{background:#d5e3ee;}
    100%{background:#ffffff;}   
   
  }
  
.activities 
{ 
   
    animation: change 5s infinite;
}
@keyframes change{
  0%{background:#ffffff;}   
  25%{background:#d5e3ee;}
  50%{background:#a8bdce;}
  75%{background:#90b3cf;}
  100%{background:#6b96b9;}
}

#routine, #declutter, #meditate, #nature, #service, #exercise 
{ 
    font-size: 20px; 
    padding-left: 3%;
}

 #declutter a
{ 
  text-decoration: none;
  color: red; 
}

#declutter a:hover 
{ 
  color: black; 
}


#exercise img { 
    margin-bottom: 2%; 
}


#to-do
{ 
   margin-left: 10%;
   margin-top: 2%; 
   font-size: 20px; 
   background-color:red; 
   color: white; 
   border: none; 
   cursor: pointer; 
   padding: 0.3%; 
   border-radius: 5px; 
}
#to-do:hover
{ 
  background-color:#bdb5b5; 
} 
.breaths-counter 
{ 
  margin: 4%; 
  font-size:22px;
  text-align: center;
  font-family: cursive;  
}

.breaths-counter button 
{ 
  padding: 10px; 
  border-radius: 10%;
  font-size: 15px; 
  font-weight:bold; 
  color: #ffffff;
  background-color: rgb(140, 141, 141);
}

.breaths-counter button:hover 
{ 
  transform: scale(1.2);
}

#result 
{ 
  font-size: 20px;
  color:red;  
}