@charset "UTF-8";

body {
  color: #ffffff;
  font-family: "Verdana", sans-serif;
  font-size: 2em;
  line-height: 1.5em;
 
  background-image: url(background_note2.png);
  
}

main{
  width: 960px;
  margin: 0 auto;
}



h1, h2, h3, h4, h5, h6,h7, h8, h9, h10, section, p{
  margin: 0;
  padding: 0;
}

header {
  margin: 0px 0px 10px 0px;
  padding: 40px 0;
  text-align: center;
  
  color: black;
  font-family: "Verdana", sans-serif;
  background-size: cover;
  
}



html{
  scroll-behavior: smooth
}



h2{
   margin: 20px 0px 0px 40px;
}


.box1, .box2, .box3, .box4{
  width: auto;
  text-align: left;
  
}


h3 {
  width: 500px;
  margin: 
0px 0px 0px 40px;
}

youtube1{
  text-align: center;
}

#container1{
  
  width: 960px;

  
  display: grid;
  margin: 0px 40px 80px 0px;

  grid-template-rows: 250px 250px 250px;
  grid-template-columns: 570px 1fr;

 position: relative;
 
}

.front1{
  position: absolute;
  top: 30px;
  left:80px;
}

.front2{
  position: absolute;
  top: 30px;
  left:600px;
}

.front3{
  position: absolute;
  top: 290px;
  left:600px;
}

.front4{
  position: absolute;
  top: 550px;
  left:600px;
}



h7{
  margin: 0px 40px 40px 40px;
}



#container2{
  float: left;
  margin: 20px 280px 80px 40px;
  
}



.bg1{
  background-color: white;
  display: inline-block;
  padding: 80px;
  border: solid 0px;
  border-radius: 30px;
}


.box1{
  width: auto;
  padding: 80px;
  margin: 0;
  margin-top: 220px;
  color: black;
  background-color: blue;
  background-size: cover;
}

.box1 p{
  margin: 0;
  padding: 0;
}


.box1 img{
  margin-top: 40px;
}

.bg2{
  background-color: white;
  display: inline-block;
  padding: 80px;
  border: solid 0px;
  border-radius: 30px;
}


.box2{
  padding: 80px;
  margin: 0;
  color: black;
  background-color: orange;
}

.box2 p{
  margin: 0;
  padding: 0;
}



.bg3{
  background-color: white;
  display: inline-block;
  padding: 80px;
  border: solid 0px;
  border-radius: 30px;
}


.box3{
  padding: 80px;
  margin: 0;
  color: black;
  background-color: darkgreen;
}

.box3 p{
  margin: 0;
  padding: 0;
}

.box3img{
  width: 100%;
  object-fit: contain;
  
  
}


.bg4{
  background-color: white;
  display: inline-block;
  padding: 80px;
  border: solid 0px;
  border-radius: 30px;
  
}


.box4{
  padding: 80px;
  margin: 0;
  color: black;
  background-color: pink;
}

.box4 p{
  margin: 0;
  padding: 0;
}



footer {
  width: 960px;
  margin: 0 auto;
  padding: 40px 0;
  text-align: center;
  background-color: white;
  color: black;
  }


ul{
  list-style-type: none;
}