/* Mobile devices (small screens)*/

@media only screen and (max-width: 320px) {

    /* Welcome page*/

    .media-small {
        margin-top: 25vw;
        background-color: white;
    }

    .welcome h2 {
        font-size: 30px;
    }

    #enter-page {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /* Navbar*/

    nav {
        width: 90vw;
    }

    #logo {
        padding-left: 0;
    }

    #menu-bar {
        list-style: none;
        padding-right: 25px;
    }

    /* Login form*/

    #h2-login {
        margin-top: 10vw;
        margin-bottom: 5vw;
    }

    #h2-login>h2 {
        font-weight: 400;
    }

    .inline-block {
        width: 100vw;
    }

    #login-form {
        margin-left: 20px;
        margin-right: 20px;

    }

    #login-form>h2 {
        line-height: 30px;
        margin-left: 25px;
    }

    .faq {
        line-height: 30px;
        font-size: 25px;
    }

    #to-left>input {
        width: 100%;
    }

    #to-left>label {
        margin-bottom: -10px;
        display: block;
        margin-top: 10px;
        color: #3498db;
    }

    #username {
        margin-top: 20px;
    }

    #username>input {
        padding: 8px 0px 8px 15px;
        width: auto;
    }

    #password {
        margin-top: 20px;
    }

    #password>input {
        padding: 8px 0px 8px 15px;
        width: auto;
        margin-left: 10px;
    }

    /* Fiat Swap page*/

    #fiat-swap {
        display: none;
        margin-top: -100px;
    }

    #fiat-swap section {
        width: auto;
        padding: 20px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .float-right {
        float: none;
    }

    .float-right>label {
        margin-top: 10px;
    }

    .float-left {
        float: none;
    }

    .block>div {
        display: inline-block;
    }

    .fa-solid, .fas {
        margin: 10px;
        padding: 10px;
    }

    #limit-fiat {
        margin-bottom: 150px;
    }


    /* Crypto Swap page*/

    #crypto-swap {
        display: none;
        margin-top: -100px;
    }

    #crypto-swap section {
        width: auto;
        padding: 20px;
        margin-left: 10px;
        margin-right: 10px;
    }

    #limit-crypto {
        margin-bottom: 150px;
    }

    /* Footer and General Styling*/
    #elevate {
        padding-bottom: 150px;
    }

    .footer {
        height: 70px;
        width: 100vw;
    }

    #crypto-widget {
        display: none;
    }

    #copyright {
        float: none;
        padding-right: 5%;
    }

    #social-media {
        float: none;
        padding-left: 0;
    }

    /*Contact Page*/

    .my-contact-form {
        margin: 0% 10% 50% 10%;
    }

}

/*Tablets (portrait orientation)*/

@media only screen and (min-width: 321px) and (max-width: 768px) {

    /* Welcome Page*/
    .welcome h2 {
        font-size: 40px;
    }

    #enter-page {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .media-small {
        margin-top: 10vw;
        background-color: white;
    }

    ul {
        text-align: center;
    }

    /*Login page*/

    #h2-login {
        margin-top: 10vw;
        margin-bottom: 5vw;
    }

    #h2-login>h2 {
        font-weight: 400;
    }

    .inline-block {
        width: 80vw;
    }

    #login-form {
        margin-left: 20px;
        margin-right: 20px;

    }

    #login-form>h2 {
        line-height: 30px;
        margin-left: 25px;
    }

    .faq {
        line-height: 30px;
        font-size: 25px;
    }

    #to-left>input {
        width: 100%;
    }

    #to-left>label {
        margin-bottom: -10px;
        display: block;
        margin-top: 10px;
        color: #3498db;

    }

    #username {
        margin-top: 20px;
    }

    #password {
        margin-top: 20px;
    }

    /* Fiat Swap page*/

    #fiat-swap {
        display: none;
        margin-top: -120px;
    }

    #fiat-swap section {
        width: 70%;
        padding: 20px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .float-right {
        float: none;
    }

    .float-right>label {
        margin-top: 10px;
    }

    .float-left {
        float: none;
    }

    .block>div {
        display: inline-block;
    }

    .fa-solid, .fas {
        margin: 10px;
        padding: 10px;
    }

    #limit-fiat {
        margin-bottom: 150px;
    }


    /* Crypto Swap page*/

    #crypto-swap {
        display: none;
        margin-top: -120px;
    }

    #crypto-swap section {
        width: 70%;
        padding: 20px;
        margin-left: 10px;
        margin-right: 10px;
    }

    #limit-crypto {
        margin-bottom: 150px;
    }

    /* Footer and General Styling*/
    #elevate {
        padding-bottom: 150px;
    }

    .footer {
        height: 70px;
        width: 100vw;
    }

    #crypto-widget {
        display: none;
    }

    #copyright {
        float: none;
        padding-right: 5%;
    }

    #social-media {
        float: none;
        padding-left: 0;
    }

    /* Footer */

    #elevate {
        padding-bottom: 150px;
    }

    .footer {
        height: 120px;
        width: 100vw;
    }

    #crypto-widget {
        display: block;
        padding-left: 20px;
        padding-right: 20px;
        width: 90vw;
    }

    #copyright {
        float: none;
        padding-right: 5%;
        display: block;
    }

    #social-media {
        float: none;
        padding-left: 0;
    }

    /*Contact Page*/

    .my-contact-form {
        margin: 5% 10% 50% 10%;
    }

}

/*Tablets (landscape orientation) and small desktops*/

@media only screen and (min-width: 769px) and (max-width: 1024px) {

    /* Welcome Page*/
    .welcome h2 {
        font-size: 70px;
    }

    #enter-page {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .media-small {
        padding-top: 0vw;
        background-color: white;
    }

    ul {
        text-align: center;
    }

    /*Login page*/

    #h2-login {
        margin-top: 2vw;
        margin-bottom: 5vw;
    }

    #h2-login>h2 {
        font-weight: 400;
    }

    .inline-block {
        width: 80vw;
    }

    #login-form {
        margin-left: 20px;
        margin-right: 20px;

    }

    #login-form>h2 {
        line-height: 30px;
        margin-left: 25px;
    }

    .faq {
        line-height: 30px;
        font-size: 25px;
    }

    #to-left>input {
        width: 100%;
    }

    #to-left>label {
        margin-bottom: -10px;
        display: block;
        margin-top: 10px;
        color: #3498db;
    }

    #username {
        margin-top: 20px;
    }

    #password {
        margin-top: 20px;
    }

    /* Fiat Swap page*/

    #fiat-swap {
        display: none;
        margin-top: -130px;
    }

    #fiat-swap section {
        width: 70%;
        padding: 20px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .float-right {
        float: none;
    }

    .float-right>label {
        margin-top: 10px;
    }

    .float-left {
        float: none;
    }

    .block>div {
        display: inline-block;
    }

    .fa-solid, .fas {
        margin: 30px;
        padding: 10px;
    }

    #limit-fiat {
        margin-bottom: 150px;
    }


    /* Crypto Swap page*/

    #crypto-swap {
        display: none;
        margin-top: -130px;
    }

    #crypto-swap section {
        width: 70%;
        padding: 20px;
        margin-left: 10px;
        margin-right: 10px;
    }

    #limit-crypto {
        margin-bottom: 150px;
    }

    /* Footer and General Styling*/
    #elevate {
        padding-bottom: 150px;
    }

    .footer {
        height: 70px;
        width: 100vw;
    }

    #crypto-widget {
        display: none;
    }

    #copyright {
        float: none;
        padding-right: 5%;
    }

    #social-media {
        float: none;
        padding-left: 0;
    }

    /* Footer */

    #elevate {
        padding-bottom: 150px;
    }

    .footer {
        height: 120px;
        width: 100vw;
    }

    #crypto-widget {
        display: block;
        padding-left: 20px;
        padding-right: 20px;
        width: 90vw;
    }

    #copyright {
        float: none;
        padding-right: 5%;
        display: block;
    }

    #social-media {
        float: none;
        padding-left: 0;
    }

    /*Contact Page*/

    .my-contact-form {
        margin: 0% 20% 20% 20%;
    }
}