@font-face {
  font-family: "AWSerifDisplay";
  src: url(/assets/AWSansRegular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

#logo {
  display: inline-block;
  height: 5vi;
  min-height: 35px;
  max-height: 75px;
  max-width: auto;
}

body {
  background-color: #fc5f1a;
  font-family: "AWSerifDisplay", serif;
}

h1,
p {
  color: whitesmoke;
}

.header {
  margin: 5% 10% 5%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

.content {
  flex-direction: vertical;
  justify-content: center;
  flex-wrap: wrap;
}

.image-content {
  justify-content: center;
  max-width: 200px;
}

.fade-out {
  opacity: 0;
  display: none;
  transition: all 1s ease-in-out; /* Smooth transition over 0.5 seconds */
}

.fade-in { /* added a fade-in class */
  opacity: 1;
  display: inherit;
  transition: opacity 1s ease-in-out;
}

.buttons-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  a{
    margin:1rem;
    text-decoration: none;
    div{
      display: flex;
      
      justify-content: space-around;
      background-color: whitesmoke;
      width: 200px;
      height: 70px;
      border-radius: 10px;
      padding: 10px;
      align-items: center;
      p{
        text-decoration: none;
        min-width: 60%;
        text-align: center;
        color:black;
      }
      img{
        min-width: 20%;
        max-height: 50px
      };
    }
  }
}

.app-btn {
  img {
    max-width: 200px;
  }
}