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

@font-face {
  font-family: FontAwesome;
  font-style: normal;
  src: url('/fonts/fontawesome.ttf');
}


html { min-height: 100%; margin:0px; padding:0px; position: relative;  }
body {font-family: Alegreya, sans-serif; height: 100vh; margin: 0px; padding: 0px; box-sizing: border-box; color: white; background-color: black; scroll-behavior: smooth; transition: 1s; }


#container:before {

  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  background-color: rgba(0, 0, 0, 0);
  background-image: url('/images/osminog-background.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
  opacity: 0.25;
  transition: 1s;

}

#container:after {

  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  background-color: rgba(0, 0, 0, 0);
  background-image: url('/images/slon-background.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right center;
  opacity: 0.25;
  transition: 1s;

}

#container:has(#osminog:hover):before {

  background-color: rgba(0, 0, 0, 1);
  opacity: 1;
  z-index: -1;

}

#container:has(#slon:hover):after {

  background-color: rgba(0, 0, 0, 1);
  opacity: 1;
  z-index: -1;

}



#container {

  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 50px;



}

#container div {

  position: relative;
  flex: 1 1 400px;
  max-width: 500px;
  min-height: 50%;
  border-radius: 40px;
  padding: 40px;
  border: 3px solid transparent;

  text-align: center;
  background-color: rgba(60, 96, 207, 0.0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);

  transition: 1s;

}


#container div::before {

  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 40px;
  border: 3px solid transparent;
  background: linear-gradient(to bottom, rgba(177, 177, 177, 1) 0%, transparent 50%) border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;

}





#container div h2 {
  text-align: center;
  font-size: 40px;
  text-transform: uppercase;
}

#container div img {

  display: block;
  margin: 20px auto;

}

#container div p {

  text-align: center;
  font-size: 20px;
  color: rgba(255, 255, 255, 0);
  transition: 1s;


}

#container div a {

  display: block;
  position: absolute;
  text-decoration: none;
  padding: 20px;
  border-radius: 40px;
  font-size: 30px;
  letter-spacing: 5px;
  text-align: left;
  background-color: #D9D9D9;
  color: black;
  width: 80%;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: 1s;

}

#container div a:after {

  content: "\f178";
  position: absolute;
  font-family: "FontAwesome";
  font-size: 40px;
  color: black;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);

}



#container div:hover {

  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);


}


#container div:hover:before {

  background: linear-gradient(to bottom, rgba(177, 177, 177, 0) 0%, transparent 50%) border-box;


}



#osminog:hover {

  background-color: rgba(60, 96, 207, 0.4);

}

#slon:hover {

  background-color: rgba(107, 29, 29, 0.4);

}



#container div:hover p {

  color: rgba(255, 255, 255, 1);

}

#container div:hover a {

  opacity: 1;

}






@media screen and (max-width: 1000px) {

  body {background-image: url("/images/background.jpg"); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; padding: 20px 20px 60px 20px; box-sizing: border-box;}

  #container:before, #container:after {

    display: none;

  }


  #container {


  flex-direction: column;
    gap: 40px;
    height: auto;

  }

  #container div {

    flex: 1 1 auto;
    min-height: unset;
    padding: 20px;
    border-radius: 20px;


  }

  #container div h2 {

    margin: 0px;
    font-size: 25px;

  }

  #container div img {

    width: 50%;
    margin: 10px auto;
    -webkit-mask: linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
    mask: linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
    animation: shimmer 2.5s infinite;

  }

  #container div p {

    color: white;
    font-size: 16px;
    line-height: 1;

    animation-duration: 10s;
    animation-name: text-animation;
    animation-iteration-count: infinite;



  }

  #container div a {

    opacity: 1;
    width: 50%;
    font-size: 20px;
    letter-spacing: 0px;
    padding: 10px 20px;

    animation-duration: 10s;
    animation-name: text-animation;
    animation-iteration-count: infinite;

  }


  #container div::before {

    display: none;

  }

  #container #osminog {

    background-color: rgba(60, 96, 207, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    animation-duration: 10s;
    animation-name: osminog-animation;
    animation-iteration-count: infinite;

  }

  #container #slon {

    background: rgba(107, 29, 29, 0.2);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);

    animation-duration: 10s;
    animation-name: slon-animation;
    animation-iteration-count: infinite;

  }

  @keyframes osminog-animation {
    0% {

      background-color: rgba(60, 96, 207, 0.4);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);

    }

    50% {

      background-color: rgba(60, 96, 207, 0.2);
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);


    }

    100% {

      background-color: rgba(60, 96, 207, 0.4);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);


    }
  }

  @keyframes slon-animation {
    0% {

      background: rgba(107, 29, 29, 0.2);
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);

    }

    50% {

      background: rgba(107, 29, 29, 0.5);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);


    }

    100% {

      background: rgba(107, 29, 29, 0.2);
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);


    }


  }

  @keyframes text-animation {
    0% {
      opacity: 1;
    }

    50% {
      opacity: 0.75;
    }

    100% {
      opacity: 1;
    }

  }


  @keyframes shimmer {
    100% {-webkit-mask-position:left}
  }



}