/*  Developer: Aryan Kora
	  University ID: 230059030
	  Function: This is just a lazy copy of the log in CSS to reduce time implementing the register page 
                Just ignore the fact that I kept all the names the same 😭
                If it works, it works.
*/

#login-position {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10%;
    bottom: -25;
    float: right;
    z-index: 0;
}

/* I flip the register page by floating the image to the right instead */

.login-img {
    position: relative;
    display: flex;
    width: 50%;
    height: 100%;
    flex-wrap: wrap;
    float: right;
    object-fit: cover;
    transition: var(--transition-speed);
}

/* This adds the gradient of the background from the form over the image */

.login-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--bg-primary),
        rgba(255, 255, 255, 0)
    );
    transition: var(--transition-speed);
    z-index: 1;
}

/* The background image */

.login-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-speed);
}

/* The contents of the form */

.login-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    float: left;
    transition: var(--transition-speed);
    overflow: scroll;
    overflow-x: hidden;
}

/*  This hides the scroll bar for the form

    This is because, if the screen is too small, you have to scroll to see the entire form.
    This gives it a ugly scroll bar that appears on the side and messes with the look 🤮

*/

.login-content::-webkit-scrollbar {
    display: none;
}

/*  Rest is pretty self explanitory (I'm just lazy and cba to explain everything)
    Just mess around with it to test it if you're curious (Don't ask me to fix it if you break it tho 💀)
*/

.form {
    width: 60%;
    transition: var(--transition-speed);
}

.HomeIcon {
    width: 100%;
}

.home {
    color: var(--lighter);
    position: relative;
    width: 65px;
    top: 10px;
    float: right;
    text-decoration: none;
    list-style: none;
    transition: var(--transition-speed);
    opacity: 0.7;
}

.home:hover {
    transform: scale(1.05);
    opacity: 1;
}
.img-con {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    top: 0;
    transition: var(--transition-speed);
}

.login-logo {
    position: relative;
    border-radius: 50%;
    width: 250px;
    transition: var(--transition-speed);
}

.form h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-primary);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 2em;
    margin-bottom: 20px;
    letter-spacing: 1px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--text-secondary);
    border-bottom-width: 1px;
    transition: var(--transition-speed);
}

.form h3 {
    color: var(--text-primary);
    text-align: center;
    margin: 50px 0 10px;
    font-size: 1rem;
    font-weight: 400;
    padding-bottom: 25px;
    transition: var(--transition-speed);
}

.form h3::after {
    content: "";
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: -15px;
    border-radius: 50px;
    width: 100%;
    height: 1px;
    margin-top: 5px;
    background-color: var(--text-secondary);
    transition: var(--transition-speed);
}

.remember {
    padding-bottom: 20px;
    color: var(--text-primary);
    font-weight: 300;
    font-size: 0.9rem;
    transition: var(--transition-speed);
}

.input {
    margin-bottom: 20px;
    transition: var(--transition-speed);
}

.input span {
    font-size: 1rem;
    margin-top: 7px;
    display: inline-block;
    color: rgb(255, 33, 33);
    font-weight: 600;
    letter-spacing: 1px;
    transition: var(--transition-speed);
}

.input input {
    width: 100%;
    padding: 10px 20px;
    outline: none;
    font-weight: 400;
    border: 1px solid var(--mint);
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--text-primary);
    background: transparent;
    border-radius: 30px;
    transition: var(--transition-speed);
}

.input button {
    width: 100%;
    padding: 10px 20px;
    outline: none;
    font-weight: 400;
    border: 0px;
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--text-primary);
    background-color: var(--darker);
    border-radius: 30px;
    transition: var(--transition-speed);
    cursor: var(--pointer);
}

.input button:hover {
    transform: scale(1.02);
    background-color: var(--mint);
}

.input p {
    font-weight: 500;
    font-size: 1rem;
    color: var(--text-primary);
    transition: var(--transition-speed);
}

.input p a {
    color: var(--mint);
    transition: var(--transition-speed);
    text-decoration: none;
}

.login-socials {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition-speed);
    padding: 0;
}

li {
    list-style: none;
    transition: var(--transition-speed);
}

.login-socials li {
    list-style: none;
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: 0 15px;
    cursor: var(--pointer);
    transition: 0.4s;
    transition: var(--transition-speed);
}

.login-socials li:hover {
    transform: scale(1.2);
    margin: -10px 15px;
}

.login-socials li img {
    width: 60px;
}

/*  Okay, if you haven't worked with this before, I can breifly explain what kinda voodoo shit is going on here.
    Esentailly, we have to make the website interactive for all devices, and therefore, all screen types.
    What happens below is pretty simple. It just checks the screen size of the device being used and does stuff.
    If its <= 768px, then it executes the code in the section.
    You can test this by pressing F12 and toggling the device toolbar (CONTROL + SHIFT + M)
*/

@media only screen and (max-width: 768px) {
    .login-img {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        transition: var(--transition-speed);
    }

    .login-img:before {
        background: linear-gradient(
            90deg,
            var(--bg-primary),
            rgba(255, 255, 255, 0.1)
        );
    }

    .login-content {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        float: none;
        top: 0;
        z-index: 100;
        width: 100%;
        height: 100%;
        transition: var(--transition-speed);
    }

    .form {
        position: relative;
        width: 100%;
        padding: 40px;
        background: var(--bg-primary);
        margin: 50px;
        transition: var(--transition-speed);
    }
}