@font-face {
  font-family: 'Vollkorn Regular';
  src: url('fonts/Vollkorn-Regular.ttf');
}

@font-face {
  font-family: 'Vollkorn Bold';
  src: url('fonts/Vollkorn-Bold.ttf');
}

html {
  /* Change the background color to your desired color */
  background-color: #000d87;
}

* {
  /* Change the text color to your desired color */
  color: white;
}

h1 {
  margin: 0px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
}

.icon-link {
  display: inline-block;
  height: 3.5vh;
  text-decoration: none;
}

.container {
  text-align: center;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.avatar {
  filter: drop-shadow(2.5vh 2.5vh 2.5vh rgba(0, 0, 0, .3));
}

.icon {
  width: 3.5vh;
  height: 3.5vh;
  filter: opacity(25%);
  transition: transform 0.1s ease-in-out;
  margin: 0;
}

.icon:hover {
  transform: scale(1.25);
  filter: opacity(100%);
}

.bold {
  font-family: 'Vollkorn Bold';
  font-size: 3.5vh;
}

.regular {
  font-family: 'Vollkorn Regular';
  font-size: 1.75vh;
  filter: opacity(25%);
}

.footer {
  position: fixed;
  text-align: center;
  left: 0;
  bottom: 0;
  width: 100%;
  margin-bottom: 1vh;
}

.triangle {
  position: fixed;
  left: 0;
  top: 0;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 100vh 100vw 0 0;
  border-color: #0021a4 transparent transparent transparent;
  transform: rotate(0deg);
  filter: drop-shadow(2.5vh 2.5vh 2.5vh rgba(0, 0, 0, .3));
}