@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap');

:root {
    --black: #000;
    --white: #fff;
    --grey: rgb(202, 184, 184);
    --light-grey: rgb(233, 232, 232);

    --default-font-family: "DM Serif Text", serif;
    --default-font-size: 24px;
    --smaller-font-size: 20px;
    --smellest-font-size: 18px;

    --input-height: 40px;
    --label-height: 36px;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font: normal var(--default-font-size)/1.5 var(--default-font-family);
    width: 800px;
    height: 100vh;

    display: flex;
    align-items: center;

    margin: 0 auto;
}

/* container
------------
*/

.container {
    width: 100%;

    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: 1fr 1.5fr;
    grid-template-areas: 
        "part1 part2"
        "part1 part3";
    border: 1px solid;
    border-radius: 20px;
}

/* grid-area
------------
*/

.input-container {
    grid-area: part1;
    align-self: center;
}

.progress-container {
    grid-area: part2;

    justify-self: center;
    align-self: center;
}

.requirement-lists {
    grid-area: part3;

    justify-self: center;
    align-self: center;
}

/* input-container
------------------
*/

.input-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    height: 100%;

    gap: 45px;
    padding: 55px;
}

.form-group {
    display: flex;
    flex-direction: column;

    position: relative;

    width: 100%;
}

.form-group label {
    height: var(--label-height);
}

.form-group input {
    height: var(--input-height);
    line-height: var(--input-height);

    border-radius: 10px;
    padding-left: 10px;
}

.form-group input::placeholder {
    font: normal var(--smaller-font-size)/1.5 var(--default-font-family);
    color: var(--grey);
}

.form-group input::-webkit-input-placeholder { 
    font: normal var(--smaller-font-size)/1.5 var(--default-font-family, Arial);
    color: var(--grey);
}

.form-group .visible {
    position: absolute;
    top: calc(var(--label-height) + var(--input-height)/2);
    right: 5px;
    transform: translateY(-50%);

    width: 25px;
    height: 25px;

    border: none;

    background-image: url('images/eye.jpeg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    cursor: pointer;
}

.input-container #submit {
    width: 90%;
    height: 40px;

    background-color: var(--black);
    color: var(--white);

    font-size: var(--smaller-font-size);
    font: var(--default-font-family);

    border-radius: 10px;

    cursor: pointer;
}

.error-message {
    color: red;
    font-size: 14px;
    margin-top: 5px;
}

/* progress-container
------------------------------------------
*/

.progress-container { 
    display: flex;
    flex-direction: column;
    align-items: center;
    
    position: relative;
    width: 230px;
    height: 245px;

    padding-top: 55px;
}

.progress-circle {
    stroke: var(--black);
    stroke-width: 5;
    fill: none;
    transition: stroke-dashoffset 0.5s ease; 
}

.progress-background {
    stroke: var(--white);
    stroke-width: 10;
    fill: none; 
}

.progress-text {
    fill: var(--black);
    text-anchor: middle;
    dominant-baseline: middle;
}

.progress-container p {
    padding-top: 15px;
}

/* requirement-lists
--------------------
*/

.requirement-lists {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 85%;
    height: 90%;
    
    border: 1px solid;
    border-radius: 30px;
    padding-top: 20px;

    font-size: var(--smellest-font-size);
    line-height: 35px;

    background-color: var(--light-grey);
}

.requirement-lists ul {
    list-style-type: none;
    text-decoration: none;
}

.requirement-lists ul li {
    padding: 5px;
}

/*@media
--------
*/

@media (max-height: 675px) {
    body {
        height: auto;
    }
    .container {
        border: none;
    }
}

@media (max-width: 800px) {
    body {
        width: 600px;
    } 
    .container {
        grid-template-columns: 1.2fr 1fr;
        grid-template-rows: 1fr 1.5fr;
    }
    .input-container {
        gap: 45px;
        padding: 20px;
    }
}

@media (max-width: 600px) {
    body {
        width: auto;
        height: 100vh;
    } 
    .container {
        grid-template-columns: none;
        grid-template-rows: auto 1fr;
        grid-template-areas: 
            "part2"
            "part1"
            "part1";

        border: none;
    }
    .input-container {
        gap: 20px;
        padding: auto;
    }
    .progress-container { 
        width: 230px;
        height: 230px;
    
        padding-top: 55px;
    }
    .requirement-lists {
        display: none;
    }
}

@media (max-width: 600px) and (max-height: 700px){
    .progress-container { 
        display: none;
    }
}

@media (max-width: 600px) and (max-height: 500px){
    body {
        font-size: 20px;
    }
    
    .form-group label {
        height: 30px;
    }

    .form-group input {
        height: 30px;
        line-height: 30px;
    }
    .form-group input::placeholder {
        font-size: 18px;
    }
    .form-group input::-webkit-input-placeholder { 
        font-size: 18px;
    }
    .input-container #submit {
        font-size: 16px;
    }
    .form-group .visible {
        position: absolute;
        top: calc(30px + 30px/2);
        right: 5px;
        transform: translateY(-50%);
    
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 600px) and (max-height: 400px){
    body {
        height: auto;
    }
}