@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+Symbols+2&display=swap");

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: large;
  color: black;
  margin: 0px;
  --background-mask: #f4f7f3c2;
  background: linear-gradient(var(--background-mask), var(--background-mask)),
    url("/background_photo");
  background-size: cover; /* or 'contain' */
  background-repeat: no-repeat;
  background-position: center center;
}

/*---------------NAVIGATION---------------*/
#navbar {
  width: 100%;
  height: 10%;
  margin: 0px;
  color: black;
  /* background-color: #b3c8a7; */
}

ul {
  width: 70%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  margin-inline: auto;
  list-style-type: none;
}

li {
  width: 25%;
  height: 100%;
  float: left;
}

.nav-button-text {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: large;
}

.custom-button {
  width: 100%;
  height: 100%;
  margin: 0px;
  border: none;
  color: black;
  background-color: #f4f7f300;
  transition: background-color 0.5s;
}

.custom-button:hover {
  background-color: #b3c8a7;
}
/*---------------NAVIGATION---------------*/

/*---------------CONTENT---------------*/
main {
  width: 100%;
  height: 70%;
  --main-bg-color: #d4e0cd;
  background-color: transparent;
}

#display-div-wrapper {
  width: 100%;
  height: 100%;
  margin-inline: auto;
  display: flex;
}

.display-bg-class {
  width: 15%;
  --bg-shadow-color: #0000002b;
}

#display-bg-left {
  background-image: linear-gradient(
    to left,
    var(--bg-shadow-color),
    transparent
  );
}

#display-bg-right {
  background-image: linear-gradient(
    to right,
    var(--bg-shadow-color),
    transparent
  );
}

#display-div {
  height: 100%;
  width: 70%;
  color: black;
  text-align: justify;
  --cert-width-max: 0;
  background-color: var(--main-bg-color);
}

.signature-photo-class {
  margin-inline: auto;
  width: min(35vh, 50vw);
  margin-bottom: 2vh;
  display: block;
  box-shadow: 5px 5px 5px #0000008c;
}

#welcome-info {
  text-align: center;
  padding: 2vh;
  margin: auto;
}

#welcome-sig-photo {
  width: min(40vh, 55vw);
}

#welcome-text {
  display: block;
  width: 55vw;
  margin: auto;
  font-size: larger;
}

#about-me-info {
  height: inherit;
  margin: 2vh;
  height: calc(100% - 2vh);
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body::-webkit-scrollbar,
body::-webkit-scrollbar-button {
  display: none;
}

#about-me-text {
  letter-spacing: 1px;
  word-spacing: 5px;
  hyphens: auto;
  font-size: max(1.2vw, 20px);
}

#certificates-info {
  display: flex;
}

.cert-nav-button-class {
  width: max(5%, (100% - var(--cert-width-max)));
  margin: 0px;
  border: none;
  color: black;
  background-color: transparent;
  transition: background-color 0.5s;
}

.cert-nav-button-class:hover {
  background-color: #b3c8a7;
}

.cert-nav-button-icon-class {
  width: min(50%, 100px);
}

.certificates-photo-class {
  width: min(var(--cert-width-max), 90%);
  transition: transform 0.5s, box-shadow 0.5s, border-radius 0.5s;
}

.certificates-photo-class:hover {
  box-shadow: 0 0 100px 10px #333a;
  transform: scale(1.3) translate(0px, 5%);
  border-radius: min(0.5vh, 0.5vw);
}

#courses-info {
  overflow-y: auto;
  height: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  --courses-row-height: 0;
}

body::-webkit-scrollbar,
body::-webkit-scrollbar-button {
  display: none;
}

.courses-table-class {
  border-collapse: collapse;
  text-align: center;
}

.courses-row-class:hover {
  background-color: #b3c8a7;
}

.courses-cell-class {
  border-block: 2px solid hsl(98, 23%, 50%);
  border-inline: 2px solid hsl(98, 23%, 50%);
  padding: 0.5vw;
  height: var(--courses-row-height);
}

.courses-cell-class:first-child {
  border-left: none;
}

.courses-cell-class:last-child {
  border-right: none;
}

.courses-cell-wrapper-class {
  text-align: left;
}
.courses-cell-content-class {
  font-size: max(1.2vw, 20px);
}

#contact-info {
  text-align: center;
  margin-block: 10vh;
}

#contact-header-wrapper {
  padding-block: 1vh;
}

#contact-header {
  font-size: x-large;
  font-weight: bold;
}

.contact-info-wrapper-class {
  padding: 2vh;
}

.contact-text-key {
  font-weight: bold;
}
/*---------------CONTENT---------------*/