@charset "utf-8";

#aboutBackButton {
  background: radial-gradient(#53c9c1, #20948c);
  border-radius: 5px;
  border: none;
  color: white;
  float: right;
  padding: 1% 2%;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.308);
  text-shadow: 0 2px 2px #00000054;
}

#aboutBackButton:hover {
  background: radial-gradient(#3fa8a1, #19857d);
  cursor: pointer;
}

.appletBackground {
  /* Several components get set to the same background colour to hide things. */
  background-color: white;
}

.darkMode.appletBackground {
  background-color: #212121;
}

.darkMode .appletBackground {
  background-color: #303030;
}

#appletContainer {
  box-shadow: none;
}

#bottomSectionContainer {
  background-color: #e7f0f3;
  border-top-left-radius: 50% 20%;
  border-top-right-radius: 50% 20%;
  padding: 2%;
}

.buttonDescription {
  text-align: center;
}

.buttonGrid {
  display: flex;
  /* flex-direction: row; */
  flex-direction: column;
  /* flex-wrap: wrap; */
  float: right;
  align-items: center;
  justify-content: center;
}

.darkMode .buttonGrid {
  color: #212121;
}

.buttonContents {
  width: 100%;
  height: 100%;
}

.buttonContents > h2 {
  /* font-size: 1.8rem; */
  /* padding-left: 0.5rem; */
  /* padding-bottom: 0.5rem; */
  text-align: center;
}

#buttonDOCS {
  background-image: linear-gradient(#fbfbc3, white, white, white);
  box-shadow: 1px 1px 3px grey;
}

#buttonDOCS-AB {
  background-image: linear-gradient(#ccefe0, white, white);
  box-shadow: 1px 1px 3px grey;
}

#buttonDOCS:hover,
#buttonDOCS-AB:hover,
#teachingResources:hover {
  filter: brightness(95%);
  box-shadow: 1px 1px 6px grey;
  transform: scale(1.05);
  transition: 0.5s;
}

#buttonDOCSImage,
#buttonDOCS-ABImage {
  box-shadow: 1px 1px 3px grey;
  padding: 2px;
  padding-bottom: 0;
  /* margin-left: 50px;
    margin-right: 50px; */
  width: 100%;
}

#footerContainer {
  box-shadow: none;
}

.gridButton > a > p {
  text-align: center;
}

h2 {
  margin: 0;
}

hr {
  margin: 0;
}

.hugeButton {
  cursor: pointer;
  position: relative;
  min-width: 350px;
  max-width: 350px;
  min-height: 350px;
  max-height: 500px;
  margin-bottom: 10px;
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 15px;
  border: 1px solid rgb(182, 182, 182);
  text-align: center;
}

.button {
  cursor: pointer;
  position: relative;
  /* width: 350px; */
  /* height: 50px; */
  margin-bottom: 10px;
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 15px;
  border: 1px solid rgb(182, 182, 182);
  text-align: center;
  background-image: radial-gradient(white, #fbfbc3);
  box-shadow: 1px 1px 3px grey;
}

.button:hover {
  filter: brightness(95%);
  box-shadow: 1px 1px 6px grey;
}

.contentContainer {
  width: 100%;
}

#headerContainer {
  background: linear-gradient(180deg, #dddddd77, #a3c7d4);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-top: 10px;
  padding: 2%;
  letter-spacing: 5px;
  text-shadow: 2px 2px 6px #ffffffa8;
  font-style: oblique;
}

.imageContainer {
  /* max-width: 250px; */
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.imgFive {
  width: 30%;
  align-items: center;
  margin: auto;
}

.intro {
  text-align: center;
  padding: 10px;
}

.left {
  float: left;
}

#mainContent {
  padding-top: 22px;
}

/* .menu {
  background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#DDDDDD77));
    background-image: -webkit-linear-gradient(white, #DDDDDD77);
    background-image: -moz-linear-gradient(white, #DDDDDD77);
    background-image: -o-linear-gradient(white, #DDDDDD77);
    background-image: linear-gradient(white, #DDDDDD77)
} */

/* .menuTopLogoContainer {
  margin-right: 4%;
  display: flex;
  padding-top: 2px;
  padding-bottom: 2px;
} */

.paragraphBg {
  background: #a7c9d647;
  margin: 0;
  padding: 2%;
  border-radius: 5px;
}

.partner1 {
  /* margin-right: 50px; */
  margin-right: 25px;
}

.partner6 {
  /* margin-left: 50px; */
  margin-left: 25px;
}

.partner2,
.partner3,
.partner4,
.partner5 {
  padding: 8px;
}

.referencesList {
  text-align: left;
}

.referencesList > li + li {
  margin-top: 0.5rem;
}

.right {
  float: right;
}
.feedback {
  /* background-image: linear-gradient(#01635b0e, white); */
  border-radius: 5px;
  color: #03b9ab;
  margin-top: 10px;
  padding: 10px;
  font-size: 1.5em;
}

#teachingResources {
  max-width: 350px;
  width: 350px;
  margin: 0 auto;
}

.title {
  /* background-image: linear-gradient(#01635b0e, white); */
  /* border-radius: 5px; */
  color: #fff;
  margin-top: 10px;
  padding: 10px;
  font-size: 2em;
  text-shadow: 1px 1px 2px #000000;
  letter-spacing: 3px;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #a3c7d4;
  margin: 0 auto;
}

.intro table {
  background-color: #a3c7d4;
  border-radius: 5px;
}

.intro td {
  border-radius: 5px;
  background-color: #fff;
}

ul {
  text-align: left;
}

/*             MEDIA QUERIES             */
@media screen and (max-width: 640px) {
  .buttonGrid {
    float: none;
  }

  .imgFive {
    flex-direction: row;
    margin: auto;
    width: 55%;
  }

  p {
    padding: 2%;
  }
}