:root {
    --TitleMargin: 100px;
    --TitlePadding: 180px;
    --Color1: #00365b;
}

body {
    color: white;
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    font-family: 'Jost', sans-serif;
    background-color: black;
}


/* ----------------------------------- */

.title h1 {
    /* height: 300px; */
    /* padding-inline: var(--TitlePadding); */
    /* padding-top: var(--TitlePadding); */
    /* margin-bottom: var(--TitleMargin); */
    font-size: 3rem;
    /* max(2vw, 80px);*/
    text-align: center;
}


/* ----------------------------------- */

.mainSL {
    display: flex;
    /* height: var(--height-550); */
    margin: 1rem;
    margin-top: 4rem;
}

.mainSignLog {
    position: relative;
    height: 32rem;
    width: fit-content;
    /*max-content;*/
    z-index: 1;
    margin: auto;
    align-self: center;
    border: solid 1px var(--Color1);
    overflow: hidden;
    border-radius: 2rem;
    background-color: rgb(29, 29, 29);
    box-shadow: 5px 20px 50px #000;
}

.showMdpLogin {
    text-decoration: none;
    cursor: default;
    pointer-events: none;
    color: white;
}

.showMdpSignin {
    font-size: var(--font-size-18);
    text-decoration: none;
    cursor: default;
    pointer-events: none;
    color: black;
}

.showMdp {
    margin: var(--margin-30);
    letter-spacing: 1px;
}

#chk {
    display: none;
}

.signup {
    margin: auto;
    padding: 0.5rem;
    /* width: 100%; */
    /*max-content;
    height: 100%;*/
    height: var(--height-600);
    background: #eee;
    border-radius: 60% / 10%;
    transform: translateY(0rem);
    transition: 0.8s ease-in-out;
}

.lowerForm {
    padding-top: var(--padding-10);
}

label {
    color: #fff;
    /* padding-top: 30px; */
    font-size: 2.3em;
    letter-spacing: 2px;
    justify-content: center;
    display: flex;
    margin: 1rem 2rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s ease-in-out;
}

.inputDataForm {
    width: 70%;
    height: var(--height-40);
    background: #e0dede;
    justify-content: center;
    display: flex;
    margin: 40px auto;
    padding: var(--padding-10);
    border: none;
    outline: none;
    border-radius: 5px;
}

.mainSignLog button {
    width: 60%;
    height: var(--height-40);
    margin: 10px auto;
    justify-content: center;
    display: block;
    color: #fff;
    background: var(--Color1);
    font-size: var(--font-size-20);
    font-weight: normal;
    margin-top: var(--margin-20);
    outline: none;
    border: none;
    letter-spacing: 2px;
    border-radius: 5px;
    transition: 0.2s ease-in;
    cursor: pointer;
}

button:hover {
    background: var(--Color5);
}

.signup label {
    color: var(--Color0);
    transform: scale(0.6);
}

#chk:checked~.signup {
    transform: translateY(-350px);
}

#chk:checked~.signup label {
    transform: scale(1);
}

#chk:checked~.login label {
    transform: scale(0.6);
}