#container {
  width: 100vw;
  height: 325vh;
}

/* --- Banner --- */
#banner {
  background-color: #008BC7;

  width: 100%;
  height: 100vh;
}

#banner-image {
  position: absolute;

  margin-top: 6.125%;
  height: 87.5%;
  width: 100%;
  object-fit: cover;

  opacity: 60%;
}

#title {
  position: absolute;

  font-size: 128px;
  font-family: "Jaro";
  width: 50%;
  text-align: center;
  vertical-align: middle;
  color: white;
  opacity: 70%;

  margin-left: 25%;
  margin-top: 16%;
}

#for-students {
  background-color: #8fc6dd;


  position: absolute;
  margin-left: 65%;
  margin-top: 7.5%;

  z-index: 2;

  height: 0;
  width: 10%;

  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;

  border: none;

  transition: height 0.15s;
}

.for-student-link {
  text-decoration: none;

  transition: background-color 0.25s;
}

.for-student-link:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.for-student-p {
  margin-top: 10%;

  color: black;
  font-size: 0;
  text-align: center; 
  font-family: "Jaro";
}

/* --- Program --- */

#program {
  background-color: rgb(30, 67, 99);

  width: 100%;
  height: 100vh;
}

#program-container {
  margin-top: 1%;
  width: 100%;
  
  position: absolute;
  display: grid;
  grid-template-columns: 10% 80% 10%;
  grid-row: auto;
}
.template-box{
  grid-column: 2/3;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: 90%;
}

.program-template {
  border: rgb(255, 255, 255) solid 3px;
  height: 30%;
  width: 25%;
  
}

.program-template-image {
  height: 75%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.program-template-title {
  text-align: center;

  font-family: "Jersey 10";
  font-size: 22px;
  letter-spacing: 4px;
  color: #3ac2fc;
  text-shadow: 2px 0 #00425e,
    -2px 0 #00425e, 
    0 2px #00425e, 
    0 -2px #00425e,

    1px 1px #00425e,
    -1px 1px #00425e,
    -1px -1px #00425e,
    1px -1px #00425e;
}

/* --- About --- */

#about {
  width: 100%;
  height: 100vh;

  background: linear-gradient(140deg, rgb(151, 179, 204) 0%, rgb(162, 187, 209) 20%, rgb(83, 101, 117) 90%);
}
.about-box{
  width: 100%;
  height: 90%;
  display: flex;
  flex-wrap: wrap;
}

.about-subbox-left {
  display: grid;
  grid-template-columns: 1fr 1fr 40%;
  grid-template-rows: 100%;

  height: 33%;
}

.about-subbox-right{
  display: grid;
  grid-template-columns: 40% 1fr 1fr;
  grid-template-rows: 100%;

  height: 33%;
}

.about-subbox-p {
  margin: 2%;

  color: rgb(0, 0, 0);
  font-size: 20px;
  font-family: "Jersey 10";
  letter-spacing: 3px;
}

.about-subbox-img-container {
  height: 80%;
  width: 70%;
}

.about-subbox-img {
  width: 100%;
  height: 100%;
  border-style: solid;
  border-color: white;
  border-width: 3px;
}

/* --- Contacts --- */

#contacts {
  width: 100%;
  height: 25vh;

  background-color: rgb(94, 104, 114);
}
.contacts-box{
  height: 60%;

  margin-left: 25%;
  margin-right: 25%;

  display: flex;
}
.contact{
  flex: 1;
  height: 100%;
}
.contact-img{
  margin-top: 10%;

  height: 65%;
  width: 100%;
  object-fit: contain;
}