@media only screen and (min-device-width: 340px) and (max-device-width: 1080px) {
    body,
    html {
      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;
    }
  
    #btn-connect {
      background-color: var(--dark-yellow);
      color: var(--yellow);
      border-color: var(--yellow);
      border-width: 2px;
    }
  
    .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: var(--black-dark) !important;
    }
    
    #wallet-connect-container:hover {
      background-color: #1b1b1b !important;
    }
  
    /* Input */
    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;
    }
  
    #section-stake {
      margin: 0;
    }
  
    .title {
      font-size: 6rem;
      color: #fff;
    }
  
    .home-description {
      text-align: justify;
      font-size: 1.4rem;
      color: #fff;
    }
  
    .comfy-price-container {
      column-count: 3;
      display: flex;
      column-gap: 0.5rem;
    }
  
    .comfy-logo {
      max-width: 20%;
      margin-right: 1rem;
    }

    .comfy-price-dollar {
        color: var(--yellow);
        font-size: 2rem;
        text-shadow: 1px 0px rgba(255, 255, 255, 0), 0px rgba(255, 255, 255, 0);
      }
    .comfy-price-value {
      font-size: 2rem;
      color: #fff;
      text-shadow: 1px 0px rgba(255, 255, 255, 0), 0px 1px rgba(255, 255, 255, 0);
    }
  
    /* RIGHT SIDE */
    
    .control > input {
      border-style: hidden;
      border-radius: 12px;
      font-size: 1rem;
    }
  
    .control > a {
      border-style: hidden;
      font-size: 1rem;
      border-radius: 12px;
    }
  
    .button {
      transition: 0.3s;
      background-size: 200% auto;
      font-family: Aristotelica-Pro-Display-Condensed-ExtraLight;
      font-weight: bold;
    }
  
    .button:hover {
      color: var(--yellow);
    }
  
    .button:focus {
      color: var(--yellow);
      outline: none !important;
      box-shadow: none !important;
    }
  
    .button.is-warning {
      transition: 0.3s;
      background-image: linear-gradient(
        to right,
        var(--yellow) 0%,
        rgb(241, 228, 36) 51%,
        var(--yellow) 100%
      );
      background-size: 200% auto;
    }
  
    .button.is-warning:hover {
      background-position: 99% center;
    }
  
    .input {
      outline: none !important;
      box-shadow: none !important;
    }
  
    label {
      color: rgb(241, 241, 241);
    }
  
    footer {
      font-size: 1rem;
    }
  
    .footer {
      position: fixed;
      bottom: 0;
      padding: 0;
      width: 100%;
      background-color: var(--black-dark);
    }
  
    /* HELPERS */
    .yellow-text {
      color: var(--yellow);
    }
  }