@media(max-width: 767px){
    body{
        overflow-x: hidden;
    }
    header{
        padding: 0.5rem 1rem;
    }

    header a{
        font-size: 12px;
    }

    .home-main{
        position: relative; top: 5vh;
        padding-bottom: 5vh; 
    }

    .home-info p{
        max-width: 50vw;
    }

    .home-info{
        padding: 4rem 2.5rem;
    } 

    .home-info h1{
        font-size: 2rem;
    }

    .home-crypto-info{
        display: grid; 
    }

    .info-top-text{
        padding: 10px; padding-top: 1.5rem;
    }

    .info-top-text h1{font-size: 30px;}
    .info-top-text p{font-size: 15px;}

    .info-boxes{
        max-width: 500px; padding: 1rem;
    }

    .info-states{
        display: grid; place-items: center;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
    }

    .info-state{
        width: 170px;
    }

    .info-field{
        max-width: 350px;
    }

    .info-field p{font-size: 14px;}
    .info-field h1{font-size: 24px;}

    .shop-search-box{
        max-width: 350px; padding: 1rem;
        margin-top: 3rem;
    }

    .shop-search-box input{
        width: 50%;
    }

    .shop-crypto-boxes{
        display: grid; place-items: center;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        max-width: 900px; gap: 1rem;
        justify-content: center;
        width: 100%; 
    }

    .shop-crypto-box{
        min-width: 200px;
    }

    .shop-login{
        padding: 1rem 2rem;
    }

    .login-buttons button:nth-child(2){
        padding: 1rem 2rem;
    }

    .footer-info{
        display: grid; 
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        max-width: 100%; place-items: stretch;
        padding: 0.5rem 1.5rem; gap: 2rem;
        padding-bottom: 2rem; 
    }

    .footer-info-el{max-width: none; width: 100%;}

    .footer-info-el.right{align-items: flex-end;}
    .footer-info-el.left{align-items: flex-start;}
}