* {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    html {
        font-size: 62.5%;
        height: 100%;
    }
    
    body {
        background-color: #1e1e1e;
        /* max-width: 960px; */
        margin: 0 auto;
        font-family: 'Inter';
        box-sizing: border-box;
    }
    
    header {
        display: flex;
        gap: 10px;
        align-items: center;
        width: 100%;
        padding: 100px 0% 150px 0%;
        justify-content: center;
    }
    
    .Principal {
        border: 1px #fff solid;
        border-radius: 20px;
        width: 500px;
        margin: 0 auto;
        align-items: center;
        text-align: center;
        position: relative;
        padding: 20px;
    }
    
    .Principal img {
        width: 164px;
        height: 150px;
        margin: 0 auto;
    }
    
    .input-single {
        width: 100%;
        margin: 30px 0px;
        position: relative;
    }
    
    .input-single label {
        font-size: 16px;
        position: absolute;
        left: 0;
        bottom: 5px;
        color: #666;
        cursor: text;
        transition: 0.3s ease-in-out;
    }
    
    .input-single .input {
        width: 100%;
        padding: 5px;
        color: #fff;
        border: 0;
        border-bottom: 1px solid rgb(211, 65, 8);
        outline: 0;
        font-size: 16px;
        background-color: #1e1e1e;
    }
    
    .input-single .input:focus,
    .input-single .input:valid {
        border-bottom: 1px solid orange;
    }
    
    .input-single .input:focus~label,
    .input-single .input:valid~label {
        transform: translateY(-24px);
        font-size: 12px;
        color: #666;
        align-items: center;
        justify-content: center;
    }
    
    #email {
        margin: 20px 0px;
    }
    
    button {
        padding: 10px 40px;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        font-size: 15px;
        font-weight: 600;
        margin: 20px 0px 60px 0px;
        transition: .5s;
    }
    
    button:hover {
        background-color: rgba(255, 255, 255, 0.849);
    }
    /* .cadastre-se {} */
    
    .cadastre-se a {
        text-decoration: none;
        color: #FFFFFF;
        cursor: default;
        align-items: flex-end;
        font-size: 1.6rem;
    }
    
    .cadastre-se a>span {
        text-decoration: underline;
        cursor: pointer;
    }
    
    #esqueceu-senha {
        color: #fff;
        font-size: 1.2rem;
        position: absolute;
        left: 20px;
        top: 340px;
    }
    
    #esqueceu-senha:hover,
    .cadastre-se a:hover {
        color: #DDD;
    }
    
    footer {
        background-color: #0E0E0E;
        margin-top: 290px;
    }
    
    footer p {
        text-align: center;
        font-style: normal;
        font-weight: 400;
        font-size: 15px;
        color: #666;
        /* margin: 5% 0% 0% 0%; */
        padding: 25px 0%;
        font-family: 'Inter', sans-serif;
    }
    
    @media (max-width:550px) {
        .Principal {
            width: 90%;
        }
        .cadastre-se a {
            font-size: 1.5rem;
        }
    }
    
    @media (max-width:450px) {
        .Principal {
            width: 90%;
            min-width: 320px;
        }
        .cadastre-se a {
            font-size: 1.4rem;
        }
    }