* {
  margin: 0px;
}

body,
html {
  width: 100%;

  height: 100%;

  background-color: black;

  background-image: url(./Pics/bg6.jpg);

  background-size: 1200px 1200px;

  background-position: center;

  background-repeat: no-repeat;
}

.cont {
  width: 100%;

  max-width: 1200px;

  margin-left: auto;

  margin-right: auto;
}

h1,
h2 {
  font-weight: bold;

  text-align: center;

  font-family: Gabriola, Arial;
}

h1 {
  color: yellow;

  font-size: 50px;
}

h2 {
  color: orange;

  font-size: 40px;
}

p {
  color: orangered;

  margin-top: 20px;

  font-weight: bold;

  font-size: calc(12px + 1vw);
}

li {
  list-style-type: none;
}

.box1 {
  width: 100%;

  height: 85px;

  text-align: center;
}

.box2 {
  width: 100%;

  height: 600px;

  float: left;
}

.box-a {
  width: 296px;

  text-align: center;

  background-image: url(./Pics/reading.jpg);

  background-repeat: no-repeat;

  background-size: cover;

  text-align: center;

  border: 2px solid orangered;
}

.box-b {
  width: 600px;

  text-align: center;

  background-repeat: no-repeat;

  background-size: cover;

  text-align: center;
}

.box-c {
  width: 296px;

  text-align: center;

  background-image: url(./Pics/sp6.jpg);

  background-repeat: no-repeat;

  background-size: cover;

  text-align: center;

  border: 2px solid orangered;
}

.box3 {
  width: 100%;

  height: 50px;

  float: left;

  text-align: center;
}

.clearfix {
  clear: both;
}

.btn {
  background-color: green;

  border: 0;

  color: white;

  padding: 4px;

  font-size: 12px;

  margin: 4px 15px;

  cursor: pointer;

  border-radius: 10px;

  transition-duration: 0.4s;

  margin-top: 22px;
}

.btn:hover {
  background-color: blue;
}

.btn2 {
  background-color: green;

  border: 0;

  color: white;

  padding: 5px;

  font-size: 10px;

  cursor: pointer;

  border-radius: 10px;

  transition-duration: 0.4s;

  margin-top: 10px;
}

.btn2:hover {
  background-color: blue;
}

.btn1 {
  background: none;

  border: 2px solid black;

  color: darkred;

  font-weight: bold;

  padding: 14px;

  font-size: 20px;

  margin: 20px 20px;

  cursor: pointer;

  border-radius: 10px;

  transition-duration: 0.4s;
}

.btn1:hover {
  background-color: lightblue;
}

.btn3 {
  background: none;

  border: 2px solid black;

  color: darkred;

  font-weight: bold;

  padding: 5px;

  font-size: 15px;

  margin: 10px 10px;

  cursor: pointer;

  border-radius: 10px;

  transition-duration: 0.4s;
}

.btn3:hover {
  background-color: lightblue;
}

@media screen and (max-width: 900px) {
  .box1 {
    width: 100%;
  }

  .box-a {
    width: 100%;
  }

  .box-b {
    width: 100%;
  }

  .box-c {
    width: 100%;
  }

  .box3 {
    width: 100%;
  }
}

@media screen and (max-width: 700px) {
  .box1 {
    width: 100%;
  }

  .box2 {
    width: 100%;
  }

  .box3 {
    width: 100%;
  }
}