html {
    width: 100%;
    height: auto;
    background-color: black;
    background-position-x: center;
    background-position-y: center;
    font-family: 'Courier New', Courier, monospace;
}

#home_background {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    z-index: 0;
}

#background_img_1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 41.5%;
    height: auto;
    cursor: pointer;
}

#background_img_2 {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: -1;
}

#gif_container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
}

#left_arrow {
    position: absolute;
    top: 90%;
    left: 6%;
    transform: translate(-10%, -94%);
    color: #fff;
    cursor: pointer;
    font-size: 32px;
    z-index: 2;
    text-decoration: none;
    transition: color 0.20s;
}

#right_arrow {
    position: absolute;
    top: 85%;
    left: 92%;
    transform: translate(-15%, -8%);
    color: #fff;
    cursor: pointer;
    font-size: 32px;
    z-index: 2;
    text-decoration: none;
    transition: color 0.20s;
}

#right_arrow:hover,
#left_arrow:hover {
    color: black;
}

/*********************************************
                    Login 
*********************************************/

a {
    color: #fff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #fff;
    font-weight: bold;
    position: relative;
    text-align: center;
    padding: 10px;
}

#img {
    position: absolute;
    top: 15%;
    left: 29%;
    transform: translateY(-85%);
    transform: translateX(-71%);
}

button {
    background-color: #fff;
    color: #193300;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #4CAF50;
    color: #fff;
}

input {
    background-color: #fff;
    color: #193300;
    padding: 12px;
    border: none;
    border-radius: 4px;
    box-shadow: inset 0 0 0 2px #193300;
    transition: box-shadow 0.3s;
}

input:focus {
    outline: none;
}

.form-container {
    position: absolute;
    left: 6%;
    transform: translateX(-94%);
    top: 55%;
    transform: translateY(-45%);
    width: 40%;
    height: auto;
}

.error-message {
    color: #ff0000;
    font-size: 14px;
    margin-bottom: 16px;
}
.success-message {
    color: #119100;
    font-size: 14px;
    margin-bottom: 16px;
}

#login {
    background-color: #fff;
    color: #4D3319;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

#login:hover {
    background-color: #4CAF50;
    color: #fff;
}


/*********************************************
                    Register
*********************************************/

#register {
    position: absolute;
    left: 2%;
    top: 2%;
}

#register {
    background-color: #fff;
    color: #4D3319;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

#register:hover {
    background-color: #4CAF50;
    color: #fff;
}

.form-container_1 {
    position: absolute;
    right: 6%;
    transform: translateX(94%);
    top: 55%;
    transform: translateY(-45%);
    width: 40%;
    height: auto;
}

#img1 {
    position: absolute;
    top: 15%;
    right: 29%;
    transform: translateY(-85%);
    transform: translateX(71%);
}

#email_all {
    text-align: center;
    position: relative;
    padding: 15px;
    left: 0px;
}

#password_all {
    text-align: center;
    position: relative;
    padding: 15px;
    left: 0px;
}

#email_1 {
    text-align: center;
    position: relative;
    padding: 15px;
    left: 0px;
}

#password_1 {
    text-align: center;
    position: relative;
    padding: 15px;
    left: 0px;
}

#login_all {
    text-align: center;
    position: relative;
    padding: 15px;
}

#reset_password {
    text-align: center;
    position: relative;
    padding: 15px;
}

#reset_password button:hover {
    background-color: rgb(76, 15, 245);
}

#username_all {
    text-align: center;
    position: relative;
    padding: 15px;
    left: 0px;
}

#register_all {
    text-align: center;
    position: relative;
    padding: 15px;
}

#invitedby_all {
    text-align: center;
    position: relative;
    left: -32px;
    padding: 15px;
}

#email_all input:focus ~ label, #email_all input:valid ~ label, #email_1 input:focus ~ label,
#email_1 input:valid ~ label, #password_all input:focus ~ label,
#password_all input:valid ~ label, #password_1 input:focus ~ label,
#password_1 input:valid ~ label, #username_all input:focus ~ label,
#username_all input:valid ~ label {
    transform: translateY(-45px);
    font-size: 15px;
    bottom: 15px;
}

#email_all label, #email_1 label, #password_all label, #password_1 label, #username_all label {
    position: absolute;
    bottom: 25px;
    left: 38%;
    color: #666;
    transition: all 0.3s;
}

#email_all input:focus ~ .underline:before, #email_all input:valid ~ .underline:before, #email_1 input:focus ~ .underline:before, #email_1 input:valid ~ .underline:before, 
#password_1 input:focus ~ .underline:before, #password_1 input:valid ~ .underline:before, #password_all input:focus ~ .underline:before,
#password_all input:valid ~ .underline:before, #username_all input:focus ~ .underline:before,
#username_all input:valid ~ .underline:before {
    transform: scaleX(1);
}

#login_1 {
    display: none;
}

#register_1 {
    display: none;
}

@media(max-width: 768px) and (orientation: portrait) {

    #home_background {
        display: none;
    }

    #background_img_2 {
        display: block;
    }

    #img {
        top: 12%;
        width: 60px;
        left: 50%;
        transform: translateX(-50%);
    }

    .form-container {
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        font-size: 14px;
        height: auto;
        top: 20%;
    }

    #email_all {
        position: relative;
        left: -25%;
    }

    #password_all {
        position: relative;
        left: -25%;
    }

    #email_all label, #email_1 label, #password_all label, #password_1 label, #username_all label {
        left: 20%;
    }

    #img1 {
        top: 12%;
        width: 60px;
        left: 50%;
        transform: translateX(-50%);
        display: none;
    }

    .form-container_1 {
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        font-size: 14px;
        height: auto;
        top: 10%;
    }

    #username_all {
        position: relative;
        top: -25px;
        left: -25%;
    }

    #email_1 {
        position: relative;
        top: -25px;
        left: -25%;
    }

    #password_1 {
        position: relative;
        top: -25px;
        left: -25%;
    }

    #register_all {
        top: -25px;
    }

    #login_1 {
        display: block;
        position: absolute;
        top: -5%;
        left: -50%;
    }

    #register_1 {
        display: block;
        position: absolute;
        top: -22.5%;
        left: -50%;
    }

}

@media(max-width: 1024px) and (orientation: landscape) {

    .form-container {
        height: auto;
        top: 84%;
    }
}