@import url('https://fonts.googleapis.com/css2?family=Bitcount+Prop+Single:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
      background-color: #121212;
      color: #f8f9fa;
      font-family: Bitcount Prop Single, Roboto, sans-serif;
    }

    .banner {
      top: 0;
      left: 0;
      width: 100%;
      height: 38px;
      background-color: #8f4af6;
      color: #121212;
    }

    .ban {
        margin-top: 100px;
        margin-bottom: 60px;
    }
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .hero h1 {
      font-size: 3rem;
    }
    .hero p {
      font-size: 1.25rem;
      color: #ccc;
    }


    /** Text Gradient Example */ 
.text-gradient {
 color: #8E49F5; 
 background-image: linear-gradient(45deg, #8E49F5 45%, #6EE6B4 , #e0c7b9 ); 
 -webkit-background-clip: text; 
 background-clip: text; 
 -webkit-text-fill-color: transparent; 
}

.bg-brown {
    background-color: #181818;
}

.button {
    background-color: #b9fdbe;
    color: #000;

}

.button:hover {
    background-color: #b9fdbe;
    color: #000;

}

.bg-btn {
    background: #8551EF;
    background: linear-gradient(50deg,rgba(133, 81, 239, 1) 0%, rgba(87, 199, 133, 1) 74%, rgba(111, 230, 178, 1) 100%);
}

.main {
    margin-top: 100px;
}

.text {
  color: #b9fdbe;
}


.nav-link .active {
  background: transparent;
}


    .converter {
      background: #1e1e1e;
      border-radius: 12px;
      padding: 20px;
      width: 360px;
      box-shadow: 0 0 15px rgba(0,0,0,0.3);
    }


    h2 {
      color: #c9a2ff;
      margin-bottom: 20px;
    }

      .field {
      background: #121212;
      border: 1px solid #444;
      border-radius: 10px;
      padding: 10px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

        select, input {
      background: transparent;
      color: white;
      border: none;
      font-size: 16px;
      width: 70%;
    }

        input:focus {
      outline: none;
    }

      button {
      background-color: #c9a2ff;
      color: #121212;
      border: none;
      padding: 12px;
      font-size: 16px;
      font-weight: bold;
      border-radius: 10px;
      cursor: pointer;
    }

        .rate {
      font-size: 14px;
      color: #aaa;
      text-align: center;
      margin-top: 10px;
    }

    .arrows {
      text-align: center;
      font-size: 24px;
      margin: -10px 0 10px;
      color: #c9a2ff;
    }