@media screen and (min-width: 300px){
    .login-page{
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 100px;
        background-color: var(--thm-base);
        overflow: auto;
        
    
        form{
            width: 100%;
            max-width: 550px;
            padding: 50px 15px;
            background-color: rgb(255,255,255);
            border-radius: 15px;
            margin-top: 200px;
    
            .logo{
                width: 100%;
                height: 100px;
    
                img{
                    width: 120px;
                    height: 50px;
                }
            }
    
            .salute{
                width: 100%;
                height: fit-content;
                margin-bottom: 40px;
            }
    
            label{
                font-size: 15px;
                font-weight: 700;
            }
    
            .email-username{
                width: 100%;
                height: 50px;
                border: 1px solid rgb(117,137,145);
                border-radius: 5px;
                margin-top: 5px;
                margin-bottom: 20px;
    
    
                input{
                    width: 100%;
                    height: 100%;
                    padding: 10px;
                    border: none;
                    border-radius: 5px;
                }
    
                input:focus{
                    outline: none;
                }
            }
    
            .password{
                width: 100%;
                height: 50px;
                display: flex;
                border: 1px solid rgb(117,137,145);
                border-radius: 5px;
                margin-top: 5px;
                margin-bottom: 20px;
    
    
                input{
                    width: 90%;
                    height: 100%;
                    padding: 10px;
                    border: none;
                    border-radius: 5px;
                }
    
                input:focus{
                    outline: none;
                }
    
                .awesome{
                    width: 10%;
                    height: 100%;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    padding-right: 10px;
                    
    
                    i{
                        font-size: 20px;
                        color: #515151;
                    }
                }
            }
    
            .remember-me{
                width: 100%;
                height: fit-content;
                display: flex;
                margin-bottom: 20px;
    
                .remember{
                    width: 50%;
                    height: fit-content;
                    display: flex;
    
                    input[type="checkbox"]{
                        width: 15px;
                    }
    
                    input[type="checkbox"]:checked {
                        accent-color: rgb(231, 54, 103);
                    }
    
                    p{
                        margin-left: 5px;
                        font-size: 15px;
                        color: rgb(117,137,145);
                        font-weight: 600;
                    }
                }
    
                .forgot-password{
                    width: 50%;
                    height: fit-content;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
    
                    a{
                        text-decoration: none;
                        color: var(--thm-black);
                        font-weight: 700;
                    }
    
                    a:hover{
                        color: rgb(231,54,103);
                    }
                }
            }
    
            .button{
                width: 100%;
                height: fit-content;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 30px;
    
                button{
                    width: 100%;
                    padding: 12px;
                    border-radius: 30px;
                    transition: background-color 0.5s ease-in-out;
                    background: linear-gradient(to right, rgb(231, 54, 103), rgb(241, 88, 70), rgb(252, 126, 25));;
                    border: none;
                    color: var(--thm-white);
                    font-weight: 700;
    
                    &:hover{
                        background: linear-gradient(to right, rgb(231, 54, 103), rgb(231, 54, 103), rgb(231, 54, 103));;
                    }
                }
            }
    
            .note{
                width: 100%;
                height: fit-content;
                display: flex;
                justify-content: center;
                align-items: center;
    
                p{
                    a{
                        text-decoration: none;
                        margin-left: 10px;
                        font-weight: 700;
                        color: rgb(231, 54, 103);
                        transition: color 0.5s ease-in-out;
    
                        &:hover{
                            color: var(--thm-black);
                        }
                    }
                }
            }
    
    
        }
    }
}

@media screen and (min-width: 750px){
    .login-page{
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 100px;
        background-color: var(--thm-base);
        overflow: auto;
        
    
        form{
            width: 100%;
            max-width: 550px;
            padding: 50px 60px;
            background-color: rgb(255,255,255);
            border-radius: 15px;
            margin-top: 100px;
    
            .logo{
                width: 100%;
                height: 100px;
    
                img{
                    width: 120px;
                    height: 50px;
                }
            }
    
            .salute{
                width: 100%;
                height: fit-content;
                margin-bottom: 40px;
            }
    
            label{
                font-size: 15px;
                font-weight: 700;
            }
    
            .email-username{
                width: 100%;
                height: 50px;
                border: 1px solid rgb(117,137,145);
                border-radius: 5px;
                margin-top: 5px;
                margin-bottom: 20px;
    
    
                input{
                    width: 100%;
                    height: 100%;
                    padding: 10px;
                    border: none;
                    border-radius: 5px;
                }
    
                input:focus{
                    outline: none;
                }
            }
    
            .password{
                width: 100%;
                height: 50px;
                display: flex;
                border: 1px solid rgb(117,137,145);
                border-radius: 5px;
                margin-top: 5px;
                margin-bottom: 20px;
    
    
                input{
                    width: 90%;
                    height: 100%;
                    padding: 10px;
                    border: none;
                    border-radius: 5px;
                }
    
                input:focus{
                    outline: none;
                }
    
                .awesome{
                    width: 10%;
                    height: 100%;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    padding-right: 10px;
                    
    
                    i{
                        font-size: 20px;
                        color: #515151;
                    }
                }
            }
    
            .remember-me{
                width: 100%;
                height: fit-content;
                display: flex;
                margin-bottom: 20px;
    
                .remember{
                    width: 50%;
                    height: fit-content;
                    display: flex;
    
                    input[type="checkbox"]{
                        width: 15px;
                    }
    
                    input[type="checkbox"]:checked {
                        accent-color: rgb(231, 54, 103);
                    }
    
                    p{
                        margin-left: 5px;
                        font-size: 15px;
                        color: rgb(117,137,145);
                        font-weight: 600;
                    }
                }
    
                .forgot-password{
                    width: 50%;
                    height: fit-content;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
    
                    a{
                        text-decoration: none;
                        color: var(--thm-black);
                        font-weight: 700;
                    }
    
                    a:hover{
                        color: rgb(231,54,103);
                    }
                }
            }
    
            .button{
                width: 100%;
                height: fit-content;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 30px;
    
                button{
                    width: 100%;
                    padding: 12px;
                    border-radius: 30px;
                    transition: background-color 0.5s ease-in-out;
                    background: linear-gradient(to right, rgb(231, 54, 103), rgb(241, 88, 70), rgb(252, 126, 25));;
                    border: none;
                    color: var(--thm-white);
                    font-weight: 700;
    
                    &:hover{
                        background: linear-gradient(to right, rgb(231, 54, 103), rgb(231, 54, 103), rgb(231, 54, 103));;
                    }
                }
            }
    
            .note{
                width: 100%;
                height: fit-content;
                display: flex;
                justify-content: center;
                align-items: center;
    
                p{
                    a{
                        text-decoration: none;
                        margin-left: 10px;
                        font-weight: 700;
                        color: rgb(231, 54, 103);
                        transition: color 0.5s ease-in-out;
    
                        &:hover{
                            color: var(--thm-black);
                        }
                    }
                }
            }
    
    
        }
    }
}

@media screen and (min-width: 1100px) {
    .login-page{
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 100px;
        background-color: var(--thm-base);
        overflow: auto;
        
    
        form{
            width: 100%;
            max-width: 550px;
            padding: 50px 60px;
            background-color: rgb(255,255,255);
            border-radius: 15px;
            margin-top: 300px;
    
            .logo{
                width: 100%;
                height: 100px;
    
                img{
                    width: 150px;
                    height: 50px;
                }
            }
    
            .salute{
                width: 100%;
                height: fit-content;
                margin-bottom: 40px;
            }
    
            label{
                font-size: 15px;
                font-weight: 700;
            }
    
            .email-username{
                width: 100%;
                height: 50px;
                border: 1px solid rgb(117,137,145);
                border-radius: 5px;
                margin-top: 5px;
                margin-bottom: 20px;
    
    
                input{
                    width: 100%;
                    height: 100%;
                    padding: 10px;
                    border: none;
                    border-radius: 5px;
                }
    
                input:focus{
                    outline: none;
                }
            }
    
            .password{
                width: 100%;
                height: 50px;
                display: flex;
                border: 1px solid rgb(117,137,145);
                border-radius: 5px;
                margin-top: 5px;
                margin-bottom: 20px;
    
    
                input{
                    width: 90%;
                    height: 100%;
                    padding: 10px;
                    border: none;
                    border-radius: 5px;
                }
    
                input:focus{
                    outline: none;
                }
    
                .awesome{
                    width: 10%;
                    height: 100%;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    padding-right: 10px;
                    
    
                    i{
                        font-size: 20px;
                        color: #515151;
                    }
                }
            }
    
            .remember-me{
                width: 100%;
                height: fit-content;
                display: flex;
                margin-bottom: 20px;
    
                .remember{
                    width: 50%;
                    height: fit-content;
                    display: flex;
    
                    input[type="checkbox"]{
                        width: 15px;
                    }
    
                    input[type="checkbox"]:checked {
                        accent-color: rgb(231, 54, 103);
                    }
    
                    p{
                        margin-left: 5px;
                        font-size: 15px;
                        color: rgb(117,137,145);
                        font-weight: 600;
                    }
                }
    
                .forgot-password{
                    width: 50%;
                    height: fit-content;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
    
                    a{
                        text-decoration: none;
                        color: var(--thm-black);
                        font-weight: 700;
                    }
    
                    a:hover{
                        color: rgb(231,54,103);
                    }
                }
            }
    
            .button{
                width: 100%;
                height: fit-content;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 30px;
    
                button{
                    width: 100%;
                    padding: 12px;
                    border-radius: 30px;
                    transition: background-color 0.5s ease-in-out;
                    background: linear-gradient(to right, rgb(231, 54, 103), rgb(241, 88, 70), rgb(252, 126, 25));;
                    border: none;
                    color: var(--thm-white);
                    font-weight: 700;
    
                    &:hover{
                        background: linear-gradient(to right, rgb(231, 54, 103), rgb(231, 54, 103), rgb(231, 54, 103));;
                    }
                }
            }
    
            .note{
                width: 100%;
                height: fit-content;
                display: flex;
                justify-content: center;
                align-items: center;
    
                p{
                    a{
                        text-decoration: none;
                        margin-left: 10px;
                        font-weight: 700;
                        color: rgb(231, 54, 103);
                        transition: color 0.5s ease-in-out;
    
                        &:hover{
                            color: var(--thm-black);
                        }
                    }
                }
            }
    
    
        }
    }
}