@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: sans-serif; height: 100vh; margin: 0px; padding: 0px; box-sizing: border-box; color: white; background-color: black; scroll-behavior: smooth; transition: 1s; display: flex; align-items: center; justify-content: center; }


#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%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 50px;



}

#container div {

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

  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;


}


#container div img {

  width: 100%;
  display: block;
  margin: 20px auto 60px 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 {

  text-align: center;
  font-size: 20px;
  color: white;
  margin: 20px 20px 50px 20px;



}

#container div a {

  display: block;
  position: relative;
  text-decoration: none;
  padding: 20px;
  border-radius: 20px;
  font-size: 20px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: white;
  border: 1px solid #efbf51;
  width: 80%;
  margin: 0px auto;



}

#container div a:after {

  content: "\f054";
  position: relative;
  display: block;
  font-family: "FontAwesome";
  font-size: 30px;
  color: white;
  margin: 10px auto;

}



#container div:hover {

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


}

#separator  {

  display: block;
  position: relative;
  flex: 0 0 1px;
  background-color: #efbf51;

}

#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.25);

}

#slon:hover {

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

}



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

hr {

  display: block;
  position: relative;
  width: 50%;
  margin: 50px auto 20px auto;
  height: 1px;
  background-color: #726a45;
  border: none;
  overflow: visible;

}

hr:after {

  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: black;
  z-index: 1;
  background-image: url("/images/flower.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

}



h1 {

  font-size: 25px;
  color: white;
  text-align: center;
  font-weight: normal;


}

p {

  font-size: 18px;
  color: #efbf51;
  text-align: center;

}


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

  #container {

    gap: 10px;

  }

  #container div {

    padding: 0px;

    flex: 1 1 50%;

  }

  #container div p {

    font-size: 15px;


  }
  #container div a {

    font-size: 15px;
    padding: 10px;

  }


}

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

  #container div p {

   font-size: 14px;

  }

  #container div a {

    min-height: 125px;

  }


}



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

  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; display: block; }

  #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;

  }


  #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;
    }

  }





}