@media only screen and (min-device-width: 340px) and (max-device-width: 1080px){
    body,
    html {
      position: relative;
      margin: 0;
      background-color: var(--primary-color);
      font-family: Aristotelica-Pro-Display-Condensed-ExtraLight;
      background-image: linear-gradient(
        to bottom right,
        var(--yellow-gradient-top),
        #000
      );
    }
  
    /* NAVBAR */
    .navbar {
      background-color: initial;
      margin: 20px;
    }
  
    .navbar-burger {
        align-self: center;
    }
  
    .navbar-logo {
      width: 120px;
    }
  
    .navbar-item {
      margin: 5px;
      font-size: 1.2rem;
    }
  
    .section-trade {
      margin: 0;
    }
  
    .button {
      transition: 0.3s;
      background-size: 200% auto;
      font-family: Aristotelica-Pro-Display-Condensed-ExtraLight;
      font-weight: bold;
    }
  
    .modal-card-head {
      background-color: var(--black-dark);
    }
    
    .modal-card-body {
      background-color: rgb(17, 17, 17);
    }
    .modal-card-title {
      color: white;
    }
    .wallet-provider-name {
      color: white;
      font-size: 2rem;
    }
    
    .wallet-provider-detail {
      color: var(--yellow);
    }
    
    .wallet-address {
      color: white;
      font-size: 1.5rem;
    }
  
    #metamask-container:hover {
      background-color: #1b1b1b !important;
    }
    
    #wallet-connect-container:hover {
      background-color: #1b1b1b !important;
    }
  
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      display: none;
    }
    
    input {
      background-color: var(--black-dark) !important;
      color: white !important;
    }
    
    input::placeholder {
      color: var(--grey-placeholder) !important;
      font-family: Aristotelica-Pro-Display-Condensed-ExtraLight;
    }

    #trade-btn {
        width: 45%;
      }
  
    label {
      color: rgb(241, 241, 241);
    }
  
    footer {
      font-size: 1rem;
    }
  
    .footer {
      position: fixed;
      bottom: 0;
      padding: 0rem;
      width: 100%;
      background-color: var(--black-dark);
    }
  }