/* 
These variables within root change the general theme of the site.
Some colors need to be manually edited since they are offset a bit in the rgb values but this will
change most of them to get a feel for how the site will look with different colors.
*/

:root {
    --primary-color: #62352A;
    --secondary-color: #FFFFFF;
}

body {
    margin: 0px;
    height: 100%;
    font-family: Marcellus SC;
    text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.50);
}

.welcomeContainer {
    position: absolute;
    height: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* This section involves the screen divider properties */
#left, #right {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: -1;
}

#left {
    background: linear-gradient(70deg, var(--primary-color) 50%, transparent 50%);
}

#right {
    background: linear-gradient(70deg, transparent 50%, var(--secondary-color) 50%);
}

/* Main content property section */
.welcomeContent {
    position: relative;
    text-align: center;
    align-content: center;
    height: 100%;
    width: 50%;
    color: white;
}

    .welcomeContent h1 {
        font-size: 40px;
        margin: 0;
    }

    .welcomeContent p {
        font-size: 20px;
    }

/* This section involves the create account/log in buttons properties. */
.welcomeButtons {
    position: fixed;
    align-content: center;
    text-align: right;
    height: 20%;
    width: 50%;
    top: 0%;
    right: 5%;
    z-index: +1;
}

    .welcomeButtons button {
        border: 2px solid var(--primary-color);
        padding: 10px 50px;
        margin: 10px;
        border-radius: 20px;
        cursor: pointer;
        font-size: 16px;
        text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.50);
        box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.50);
    }

#logInBtn {
    background-color: var(--primary-color);
    color: white;
}

    #logInBtn:hover {
        background-color: #d1aa90;
    }

/* This section involves the two circles and penguin logo properties */
.logo {
    position: absolute;
    top: 20%;
    left: 50%;
    height: 80%;
    width: 50%;
}

.circle {
    position: relative;
    border-radius: 50%;
}

.circle1 {
    width: 40%;
    height: 50%;
    top: 40%;
    background: rgba(236, 236, 236, 0.4);
}

.circle2 {
    width: 50%;
    height: 60%;
    left: 20%;
    bottom: 35%;
    z-index: -1;
    background: rgb(138, 67, 49, 0.6);
}

.penguin {
    position: relative;
    width: 40%;
    height: 30%;
    bottom: 60%;
    right: 1%;
    background: url('PamiltonTransparentBG.png') no-repeat center;
    background-size: contain;
}