/* =================
  WRITE YOUR CSS HERE.
  Check the ⌄ for help with formatting and validating your code.
  You must write some CSS to complete this challenge.
   ===================
*/
html,
body {
  margin: 0;
  height: 100%;
}

header{
   background-color: yellow;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 10px;
  margin: 10px;
}

h1{
 text-align: center;
 align-self: center;
 margin-top: -15px;
 font-family: 'Permanent Marker', cursive; 
}

h2{
 margin: 15px 20px ;
 background-color: #416cc0;
 padding: 5px;
 border-radius: 20px;
 width: 120px;
 text-align: center;

}

nav {
  background-color: #48cae4;
  border-radius: 20px;
  margin:10px;
  padding: 10px;
  text-align: center;

}

a {
  margin: 15px 10px 15px 10px;
  padding: 5px 10px 5px 10px;
  font-size: 12px;
  color: #FAEDCD;
  background-color: #023eba;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  border-radius: 20px; 
  text-decoration: none;
}

a:hover {
  background-color: #808080;
}

.image-container {
   display: flex;
  text-align: center;
  justify-content: space-around;
}
.text{
background-color: #FAEDCD;
margin: 15px;
padding: 10px;
border-radius: 10px;
}
.about-section ,.image-section , .video-section {
  background-color: #023eba;
  padding: 10px;
  padding-bottom: 30px;
  border-radius: 17px;
  margin: 10px;
  text-align: justify;
  }
.jaydog {
  text-align: center;
  padding: 10px;
  background-color: orange;
  width: 320px;
  height: 100px;
  margin:20px;
}
.image1 {
width: 300px;
height: 300px;

}

.text1 , .text2 {
  background-color: #FAEDCD;
  width: 400px;
  height: 200px;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  text-align: justify;
  font-size: 14px;
}

iframe {
  width: 400px;
  height: 230px;
}

footer {
  background-color: purple;
  color: azure;
  display: flex;
  padding:5px;
  border-radius: 20px;
  margin: 10px;
}

.c-site-footer{

  padding-left: 20px;
}

/* =================
 @media below
   ===================
*/

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }

  .text1, .text2 , .text {
font-size: 12px ;

  }

h1 {
  font-size: 20px;
}

h2 {
  margin: 7px 15px;
  padding: 2px;
  border-radius: 20px;
  width: 100px;
  font-size: 14px ;
}

.jaydog {
  
  width: 250px;
  height: 75px;
}

.image1  {
  width:  200px;
  height: 200px;
  }
iframe {
width: 70%;
height: 80%;
}