@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
        *{
            margin: 0;
            padding: 0;
            font-family: inter;
            list-style-position: inside;
        }
        body{
            height: 100vh;
            width: 100%;
            background-color: #F5F5F5;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        main{
            box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
            width: 70%;
            height: 780px;
            background-color: rgb(170, 131, 131);
            display: flex;
        }
        .right{
            background-color: rgb(255, 255, 255);
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        form{
            width: 75%;
            display: flex;
            flex-direction: column;
            gap: 2.5rem;
        }
        form div{
            width: 100%;
        }
        .top-form{
            display: flex;
            flex-direction: column;
            gap: 0.7rem;
        }
        .top-form p:nth-child(1){
            font-size: 3.5rem;
            font-weight: 400;
        }
        .top-form p:nth-child(2){
            font-size: 1.26rem;
            font-weight: 400;
            color: #5B5B5B;
        }
        .middle-form{
            display: flex;
            flex-direction: column;
            gap: 1.3rem;
        }
        .middle-form div{
            width: 100%;
        }
        .input-div{
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .special{
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
        input{
            border: 1px solid #4F4F4F;
            border-radius: 5px;
            height: 50px;
            padding: 0 10px;
        }
        input:focus{
            outline: none;
        }
        label{
            font-size: 1.15rem;
            color: #5B5B5B;
        }
        .bottom-form{
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
        }
        .bottom-form button{
            border: none;
            background-color: #3E3E3E;
            color: white;
            font-size: 1.5rem;
            font-weight: 400;
            width: 100%;
            height: 50px;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.25s;
        }
        .bottom-form button:hover{
            background-color: #2d2727;
        }
        .bottom-links{
            display: flex;
            justify-content: space-between;
        }
        a{
            color: #2d2727;
            transition: 0.25s;
        }
        a:hover{
            color: #3E3E3E;
        }
        .left{
            background-image: url('/images/download.jpg');
            background-size: cover;
            width: 50%;
            height: 100%;
        }
        .left div{
            width: 100%;
        }
        .top-left{
            height: 10%;
            display: flex;
            align-items: center;
            padding-left: 20px;
        }
        .bottom-left{
            height: 90%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
        }
        .top-left p{
            font-size: 2rem;
            font-weight: 500;
            color: white;
        }
        .bottom-left h1{
            font-size: 4rem;
            font-weight: 900;
            text-shadow: 5px 5px 30px rgba(0, 0, 0, 0.7);
        }
        @media (max-width: 1700px){
            html{
                font-size: 14px;
            }
            .bottom-left h1{
                font-size: 3.7rem;
            }
        }
        @media (max-width: 1500px){
            html{
                font-size: 13px;
            }
            .bottom-left h1{
                font-size: 3.2rem;
            }
        }
        @media (max-width: 1200px){
            html{
                font-size: 13px;
            }
            .bottom-left h1{
                font-size: 3rem;
            }
            body{
                height: 900px;
            }
            main{
                width: 80%;
                height: 800px;
                flex-direction: column;
            }
            .right{
                width: 100%;
                height: 70%;
            }
            .top-left{
                height: 20%;
            }
            .bottom-left{
                height: 80%;
            }
            .left{
                width: 100%;
                height: 30%;
                background-position: center;
            }
            .bottom-left{
                display: flex;
            }
            .top-left{
                display: flex;
            }
        }
        @media (max-width: 550px){
            body{
                height: 800px;
            }
            .left{
                justify-content: center;
                align-items: center;
            }
            main{
                height: 700px;
            }
            .left{
                height: 30%;
            }
            .right{
                height: 70%;
            }
            html{
                font-size: 12px;
            }
            form{
                width: 90%;
            }
            .top-form p:nth-child(1){
                font-size: 3rem;
                font-weight: 400;
            }
            .left h1{
                font-size: 2.6rem;
            }
        }
        @media (max-width: 400px){
            body{
                height: 100vh;
            }
            html{
                font-size: 10px;
            }
            input{
                height: 40px;
            }
            main{
                height: 600px;
            }
            button{
                height: 40px;
            }
        }