style.css

/* Style the entirety of the page */
.entire-screen {
    height: 131.5%;
}


/* Style the right side of the page */



.right-side{
    border:none;
    width: 500px;
    height:750px;
    margin:0px 750px;
}

/* Style the webflow image */
#webflow-image {
    display: inline-flex;
    position:absolute;
    justify-content: center;
    top:140px;
    left:850px;
    width: 70px;
    height: 70px;
}

/* Style the webflow title */
#webflow-title {
    display: inline-flex;
    justify-content: center;
    position:absolute;
    top:135px;
    left:915px;
    font-size:25px;
    font-family:outfit;
    font-weight:650;
}

/* Style the 'Log in to your account' text */
#login-text {
    display: inline-flex;
    position: absolute;
    top: 205px;
    left: 810px;
    font-family:outfit;
    font-size: 27px;
    font-weight:500;
}

/* GOOGLE */
/* Style the google button */
#google-button {
    display: inline-flex;
    position: absolute;
    background-color: white;
    border: 1px solid lightgray;
    padding: 5px 108px;
    font-size: 15px;
    top: 290px;
    cursor:pointer;
}

#google-button:hover{
    background-color:rgba(1, 166, 255, 0.066);
}

/* Google logo */
#google-logo {
    width: 25px;
    height:15px;
    background-color:transparent;
}

/* SSO */
/* Style the sso button */
#sso-button {
    display: inline-flex;
    position: absolute;
    background-color: white;
    border: 1px solid lightgray;
    padding: 5px 125.5px;
    font-size: 15px;
    top: 330px;
    cursor:pointer;
}

/* SSO logo */
#sso-logo {
    width: 15px;
    height: 15px;
}

/* Style the 'or' text between the login options */
#or-text{
    display:inline-flex;
    position: absolute;
    top: 370px;
    color: lightgray;
    font-size: 15px;
}

/* Style the username text box */
#username-textbox{
    display:inline-flex;
    position:absolute;
    justify-content: left;
    background-color: white;
    border: 1px solid #d3d3d3;
    padding: 5px 220px 5px 5px;
    border-radius:5%;
    font-size: 13px;
    top:420px; 
    width:160px;
    height:30px;
}

/* Style the password text box */
#password-textbox{
    display:inline-flex;
    position:absolute;
    justify-content:left;
    background-color:white;
    border:1px solid lightgray;
    border-radius:5%;
    padding:5px 215px 5px 5px;
    top:470px;
    width:166px;
    height:30px;
}

/* Style the 'forgot password' button. */
#forgot-password-button{
    display:inline-flex;
    position:absolute;
    justify-content:left;
    background:none;
    border:none;
    top:525px;
    color:rgb(0, 89, 255);
    cursor:pointer;
}

#forgot-password-button:hover{
    text-decoration:underline;
}

/* Style the continue button */
#continue-button{
    display:inline-flex;
    position:absolute;
    text-align: center;
    background-color: rgba(83, 126, 245, 0.45);
    border: none;
    color: white;
    top: 560px;
    font-size: 15px;
    padding: 10px 166px 10px 166px;
    cursor:not-allowed;
}

#no-account-text{
    display:inline-flex;
    position:absolute;
    top: 620px;
    left: 830px;
    font-size:15px;
    color: gray;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: 1;
}

/* Sign Up Button Styling */
#signup-button{
    display:inline-flex;
    position:absolute;
    top:635px;
    left: 1000px;
    background:none;
    border:none;
    font-size: 14px;
    color: blue;
    cursor:pointer;
}

#signup-button:hover{
    text-decoration:underline;
}

/* Sign In Button Styling */
#signin-wo-button{
    display:flex;
    position:absolute;
    top:690px;
    font-size:14.5px;
    color:blue;
    background:none;
    border:none;
    cursor:pointer;
    width: 400px; 
    line-height: 35px;
    justify-content:center;
    text-align: center;
}

#signin-wo-button:hover{
    background-color:rgb(230, 230, 230);
}



/* Style the left side of the screen */



.left-side{
    position: absolute;
    top: 0;
    left: -19.65vw;
    border: 3px solid black;
    width:623px;
    height:750px;
    margin: 0px 250px;
    background-color:black;
}

/* Style the box */
#box{
    position:absolute;
    background-color:black;
    border:1px solid rgb(55, 55, 55);
    color:white;
    width: 420px;
    height:560px;
    top:105px;
    left:100px;
}

/* Style the left webflow logo */
#left-webflow-logo{
    display:flex;
    justify-content:center;
    position:absolute;
    width:70px;
    height:70px;
    top:9px;
    left:11px;
}

/* Style the Webflow Text */
#webflow-text{
    display:flex;
    position:absolute;
    font-size:24.5px;
    top:2px;
    left:77px;
    font-family:cal sans;
}

/* Style the conf text */
#conf-text{
    display:flex;
    position:absolute;
    font-size:26px;
    top:2px;
    left:180px;
    font-family:'Franklin Gothic Book', 'Arial Narrow', Arial, sans-serif;
    font-weight:-1000;
}

/* Style the future text text */
#future-text{
    display:flex;
    position:absolute;
    font-size:59px;
    top:45px;
    left:32px;
    font-weight: 100;
    font-family: cal sans;
    line-height:1.1;
}

/* Style the 'sept.' text */
#sept-text{
    display:flex;
    position:absolute;
    font-size:25px;
    font-family:cal sans;
    font-weight:100;
    top:280px;
    left:35px;
}

/* Style the '17' circle */
#first-circle{
    display:flex;
    justify-content:center;
    align-items:center;
    position:absolute;
    border:1px solid rgb(173, 198, 230);
    color:white;
    width:35px;
    height:35px;
    top:410px;
    left:200px;
    border-radius:50%;
    background-color:rgb(0, 76, 255);
    font-family:cal sans;
    font-size: 23px;
}

/* Style the '18' circle */
#second-circle{
    display:flex;
    justify-content:center;
    align-items:center;
    position:absolute;
    border:1px solid rgb(173, 198, 230);
    color:black;
    width:35px;
    height:35px;
    top:410px;
    left:245px;
    border-radius:50%;
    background-color:orange;
    font-family:cal sans;
    font-size: 23px;
}

/* Style the register button */
#register-button{
    display:flex;
    position:absolute;
    justify-content:left; 
    align-items:center;
    border:1px solid black;
    width:330px;
    height:85px;
    top:550px;
    left:130px;
    background-color:orange;
    font-family:cal sans;
    font-size:25px;
    font-weight:100;
    padding-left:30px;
    /* Transition given by chatGPT */
    transition:0.3s ease;
}

/* Change the size of the register button when the left side is hovered over */
/* ChatGPT assistance */
.left-side:hover #register-button{
    transform: scale(1.17);
    top:575px;
}


/* Style the upright arrow */
#upright-arrow{
    display:flex;
    justify-content:center;
    align-items:center;
    position:absolute;
    width:20px;
    height:20px;
    padding-left:290px;
}



/* IPAD SCREEN */



@media (max-width: 1000px){


    /* Left side */

    /* Style the left half of the screen */
    .left-side{
        left:-30vw;
        width:510px;
    }

    /* Style the black box in the left side of the screen */
    #box{
        left:70px;
    }

    /* Style the left webflow logo */
    #left-webflow-logo{
        top:13px;
    }

    /* Style the left webflow text */
    #webflow-text{
        top:10px;
    }

    /* Style the conf text */
    #conf-text{
        top:10px;
    }

    /* Style the future text */
    #future-text{
        font-size:50px;
        top:55px;
    }

    /* Style the sept text */
    #sept-text{
        top:265px;
    }

    /* Style the first circle */
    #first-circle{
        top:395px;
        left:170px;
    }

    /* Style the second circle */
    #second-circle{
        top:395px;
        left:215px;
    }

    /* Style the register button */
    #register-button{
        top:540px;
        left:100px
    }

    .left-side:hover #register-button{
        transform: scale(1.17);
}

    /* Right side */

    .right-side{
        width:200px;
    }

    #webflow-image{
        left:630px;
        top:140px;
    }

    #webflow-title{
        left:695px;
        top:135px;
    }

    #login-text{
        top:200px;
        left:580px;
    }

    #google-button{
        top:280px;
        left:520px;
    }

    #sso-button{
        top:320px;
        left:520px;
    }

    #or-text{
        top:360px;
        left:520px;
    }

    #username-textbox{
        top:420px;
        left:520px;
    }

    #password-textbox{
        top:460px;
        left:520px;
    }

    #forgot-password-button{
        top:498px;
        left:515px;
    }

    #continue-button{
        top:535px;
        left:520px;
    }

    #no-account-text{
        font-size:14.5px;
        top:615px;
        left:615px;
    }

    #signup-button{
        top:627px;
        left:767px;
    }

    #signin-wo-button{
        top:670px;
        left:520px;
    }
}


/* Phone Version */


@media (max-width: 500px){
    .entire-screen{
        height:100%;
        width:100px;
    }
    /* Get rid of the left side of the screen */
    /* Style the left half of the screen */
    .left-side{
        left:-30vw;
        width:510px;
        display:none;
    }

    /* Style the register button */
    #register-button{
        top:520px;
        left:60px;
        display: none;

    }

     .right-side{
        width:200px;
    }

    #webflow-image{
        left:150px;
        top:40px;
    }

    #webflow-title{
        left:215px;
        top:35px;
    }

    #login-text{
        top:100px;
        left:115px;
    }

    #google-button{
        top:190px;
        left:50px;
    }

    #sso-button{
        top:230px;
        left:50px;
    }

    #or-text{
        top:280px;
        left:45px;
    }

    #username-textbox{
        top:330px;
        left:50px;
    }

    #password-textbox{
        top:370px;
        left:50px;
    }

    #forgot-password-button{
        top:420px;
        left:50px;
    }

    #continue-button{
        top:460px;
        left:45px;
    }

    #no-account-text{
        font-size:14.5px;
        top:515px;
        left:130px;
    }

    #signup-button{
        top:527px;
        left:280px;
    }

    #signin-wo-button{
        top:580px;
        left:50px;
    }
}