@font-face {
    font-family: Title-Font;
    src: url("/fonts/h1.otf");
}
@font-face {
  font-family: Body-Font;
  src: url("/fonts/h2.otf");
}
@font-face {
    font-family: Footer-Font;
    src: url("/fonts/footer.otf");
}
/* BODY/FOOTER/DIV STYLES */
body {
  background-color: #054286;
  color: #FFFFFF;
  font-size: 1vh;
  height: 100vh;
  width: 100vw;
}
footer {
  align-items: center;
  background-color: #FFFFFF;
  bottom: 0;
  color: #054286;
  display: flex;
  font-family: Footer-Font;
  font-size: 1.5vh;
  height: 5vh;
  justify-content: center;
  left: 0;
  position: fixed;
  width: 100%;
}
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height:auto;
  margin: auto;
  overflow: hidden;
  width: 100vw;
}
.top-item { 
  grid-area: 1 / 1 / 2 / 5;
}
.middle-item { 
  grid-area: 2 / 1 / 3 / 5;
}
.bottom-item { 
  grid-area: 3 / 1 / 4 / 5;
}

.card {
  background-color: #054286;
  border: #FFFFFF;
  border-style: solid;
  color: #FFFFFF;
  margin: auto;
  transition: 0.3s;
}
.card:hover {
  background-color: #2e6eb7;
  transition: 0.3s;
}
.error {
  background-color: #860505;
  border: #FFFFFF;
  border-style: solid;
  color: #FFFFFF;
  margin: auto;
  transition: 0.3s;
}
.error:hover {
  background-color: #a93636;
  transition: 0.3s;
}
/* TEXT/FONT STYLES */
h1 {
  color: #FFFFFF;
  font-family: Title-Font;
  font-size: 4vw;
  text-align: center;
}
h2 {
  color: #FFFFFF;
  font-family: Body-Font;
  font-size: 0.75vw;
  text-align: center;
}
.subtitle {
  font-family: Footer-Font;
  font-size: 2vw;
}
.desription {
  font-family: Body-Font;
  font-size: 1vw;
}
/* BUTTON STYLES */
.download-button {
  border-radius: 2vw;
  cursor: pointer;
  font-family: Title-Font;
  font-size: 0.75vw;
  outline: solid 3px #FFFFFF;
  padding: 0.75vw;
  text-align: center;
  transition: 0.3s;
}
.download-button:hover {
  animation: ring-expand;
  background-color: #001555;
  color: #FFFFFF;
}
/* IMAGE STYLES */
.logo {
  aspect-ratio: 1 / 1;
  background-image: url("images/logo.png");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  height: 10vw;
  margin-left: 2vw;
  margin-right: 2vw;
  object-fit: cover; 
  transition: 0.3s;
  width: 10vw;
}
.logo:hover {
  background-image: url("images/profile.jpg");
}
.icon-large {
  height: auto;
  transition: 0.3s;
  width: 5vw;
}
.icon-large:hover {
  filter: drop-shadow(0 0 20px rgba(212, 215, 216, 0.6));
}