* {
   margin: 0;
   padding: 0;
   outline: 0;
   box-sizing: border-box;
   font-family: 'Dosis', sans-serif;
}

::-webkit-scrollbar {
   width: 0;
}

::selection {
   background-color: white;
   color: black;
}

@keyframes content {
   0% {
      top: 30%;
      opacity: 0;
   }

   100% {
      top: 40%;
      opacity: 1;
   }
}

.containerBx {
   position: relative;
   height: 100vh;
}

.content {
   position: absolute;
   top: 30%;
   left: 50%;
   transform: translate(-50%, -50%) scale(1);
   padding: 35px 40px;
   padding-bottom: 60px;
   background-color: rgba(0, 0, 0, 0.3);
   border-radius: 20px;
   box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.3);
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 25px;
   overflow: hidden;
   transition: 0.4s;
   animation: content 0.7s forwards ease-in-out;
   opacity: 0;
   user-select: none;
   width: 800px;
}

.content h1 {
   font-size: 52px;
}

.content-wrapper {
   display: flex;
   align-items: center;
   border: 2px solid rgba(255, 255, 255, 0.3);
   border-radius: 12px;
   width: 100%;
}

.content input,
.content select {
   height: 55px;
   background-color: rgba(18, 21, 23) !important;
   color: white;
   border: none;
   font-size: 26px;
   transition: 0.3s;
}

.content input {
   width: 100%;
   padding: 0 15px;
}

.content select {
   width: 90px;
   padding: 0 10px;
}

.content input:hover,
.content select:hover {
   background-color: rgba(25, 28, 30) !important;
}

.content input:focus,
.content select:focus {
   background-color: rgba(25, 28, 30) !important;
}

.content input:first-child {
   border-radius: 12px 0 0 12px;
}

.content input:last-child {
   border-radius: 0 12px 12px 0;
}

.content #firstCurrencyOption {
   border-left: 2px solid rgba(255, 255, 255, 0.25);
   border-right: 2px solid rgba(255, 255, 255, 0.25);
}

.content #secondCurrencyOption {
   border-left: 0;
   border-right: 2px solid rgba(255, 255, 255, 0.25);
}

/* TrinsyCa */

footer {
   width: 100%;
   justify-content: center;
   user-select: none;
   display: flex;
}

footer p {
   color: white;
   opacity: 1;
   position: absolute;
   bottom: 0px;
   width: 100%;
}

.trinsyca {
   position: absolute;
   text-align: center;
   padding-right: 10px;
   font-size: 20px;
   color: white;
   bottom: -60px;
   width: 100%;
   animation: trinsyca 1s forwards ease-in-out;
   animation-delay: 0.5s;
   z-index: 999999999999999;
   pointer-events: auto;
   transition: 0.7s;
   scale: 1.4;
}

@keyframes trinsyca {
   0% {
      bottom: -60px;
      scale: 1.4;
   }

   100% {
      bottom: 10px;
      scale: 1.0;
   }
}

@keyframes trinsycaDown {
   0% {
      bottom: 25px;
   }

   100% {
      bottom: -50px;
   }
}

.trinsyca g {
   opacity: 0.5;
}

.trinsyca a {
   color: #E4B063;
   font-size: 22px;
   letter-spacing: 1px;
   text-shadow: 0 0 10px #E4B063, 0 0 10px #E4B063, 0 0 10px #E4B063;
   opacity: 1;
   text-decoration: none;
   transition: all 0.2s ease-in-out;
}

.trinsyca a:hover {
   color: red;
   text-shadow: 0 0 10px red, 0 0 10px red, 0 0 10px red, 0 0 10px red;
}

.trinsyca a:active {
   text-shadow: 0 0 10px red, 0 0 10px red, 0 0 10px red, 0 0 10px red, 0 0 10px red, 0 0 10px red;
}

/* TrinsyCa */

@media (max-width:850px) {
   .content {
      width: 95%;
   }
}

@media (max-width:500px) {
   .content {
      padding: 35px 20px;
      padding-bottom: 60px;
   }

   .content select {
      width: 70px;
      padding: 0;
   }
}