@import url('https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap');

:root {
  --primary-color: #262161; /* darkblue */
  --secondary-color: #26a8e0;
}


/* blue #25408f */

/* light blue: #26a8e0 */

/* dark blue: #262161 */

/* off black  rgba(0, 0, 0, 0.9) 
*/


* {
  box-sizing: border-box;
 /* margin:0; */
}

h1, h2, h3, h4, h5, h6, p {
  margin-top:0px;
}




h1 {
  font-size: 150%;
  text-transform: capitalize;
}

body {
  margin:0 ;
  font-family: 'Roboto', sans-serif;
  height: 100vh;
  overflow-x: hidden;
  background-color: whitesmoke;
  color:var(--primary-color);
}


nav, header, section, footer {
  display: flex;
  width:100vw;
}

nav {
  justify-content: space-between;
  height: 50px;
  align-items: center;
  padding: 10px 20px;
  background-color: var(--primary-color); /* rgba(0, 0, 0, 0.9);*/
}

nav a {
  color: white; 
  text-decoration: none;
  
}

nav > a {
  font-size: 22px;
}

nav > div > a {
  padding-left:5px ; 
}

header {
  position: relative;
}

header > img {
  width:100vw;
  opacity: 0.4;
}

header > div {
  position: absolute;
  top: 0; 
  left: 0;
  display: inherit; 
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width:100%;
  height:100%;
  color: black;
}

header h1 {
 
  font-size: 80px;
}

header p {
  font-size: 40px;
  width: 600px;
}

header a {
  background-color:rgba(0, 0, 0, 0.9);
  color:white;
  padding: 10px;
  border-radius: 3px;
  text-transform: capitalize;
}

section {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top:20px;
  padding: 20px 0; 
  margin-bottom: 40px;
}

.container {
  width:1000px;

  display:inherit;
 }

 .introduction {
  flex-direction: row;

 }

 .introduction .container > div{
   width: 50%;
 }

 .introduction .container > div img {
 
  margin: 0 5px 5px;
  width: 400px;
 }

.activities .container {
  margin-top: 30px;
  margin-bottom:30px; 
  flex-wrap: wrap;
  justify-content: center;
}


.video {
  height: 700px;
}

.video .container {
  flex-direction: column;
  height:100%;
  
}


.activity {
  width:300px;
  padding: 20px 0;
  background-color: white;
  border: 1px solid black; 
  margin: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  position: relative;
  padding:10px;
  height: 150px;
}

.activity > * {
 /* margin: 10px;*/
}

.activity-title {
  font-weight: bold;
}

.activity a {
  background-color:rgba(0, 0, 0, 0.9);
  color:white;
  padding: 5px;
  border-radius: 3px;
  text-transform: capitalize; 
  text-decoration: none;
  position: absolute;
  bottom: 5px;
  left: 5px;

}

.schedual h1 {
  font-size: 150%;
}


.half {
  width:50%;
  padding:10px;
}
.third {
  width: 32%;
  padding:10px;
}
.twothird {
  width: 65%;
  padding:10px;
}
.onethird {
  width: 32%;
  padding:10px;
}

input, textarea {
  width: 500px;
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.9);
  color: rgba(0, 0, 0, 0.9);
  resize: none;
} 

input[type = submit]{
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  
  margin: 0 0 30px; 
  border: none;} 



footer > .container div {
  padding:10px;
}

#dayofweek{
  text-transform: capitalize;
}

.time {
  font-size: 80%;
  color: green;
}

footer {

  background-color: var(--primary-color);
  display: flex;
  justify-content: center;
  color: white;
}


@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
 body {
 }
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
  body {
    }
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
    /* some CSS here */
  body {
    }
  /* some CSS here */
}



@media screen and (max-width: 480px) and (orientation: portrait){


  body {
  }

 header h1 {

   font-size: 40px;
 }
 
 header p {
   font-size: 20px;
   width: 100vw;
 }
 
 header a {
   padding: 5px;
   border-radius: 1px;
 }

 .featured{
   padding: 30px;
 }

 .introduction .container > div {
   width: 100%
 }


 .container {
   align-items: center;
   justify-content: center;
   width: 100vw;
   flex-direction: column;
 }
 input, textarea {
  width: 400px;
} 

input[type = submit]{

  width: 50px;
} 
}



 
@media screen and (min-width: 480px) and (max-width: 640px){

  body {
  }

 header h1 {

   font-size: 40px;
 }
 
 header p {
   font-size: 20px;
   width: 500px;
 }
 
 header a {
   padding: 5px;
   border-radius: 1px;
 }

 .featured{
   padding: 30px;
 }

 .introduction .container > div {
   width: 100%
 }


 .container {
   align-items: center;
   justify-content: center;
   width: 500px;
   flex-direction: column;
 }

 input, textarea {
  width: 400px;
} 

input[type = submit] {

  width: 50px;
} 

}

@media screen and (min-width: 641px) and (max-width: 1024px){
 
  body {
   }

  header h1 {
 
    font-size: 40px;
  }
  
  header p {
    font-size: 20px;
    width: 600px;
  }
  
  header a {
    padding: 5px;
    border-radius: 1px;
  }

  .featured{
    padding: 30px;
  }

  .introduction .container > div {
    width: 100%
  }


  .container {
    align-items: center;
    justify-content: center;
    width: 768px;
    flex-direction: column;
  }

  input, textarea {
    width: 500px;
  } 
  
  input[type = submit]{

    width: 50px;
  } 
  

}