/*

Author: Thomas Turnasella
Project: CST 161 Final - Fall 2022
Due Date: 12/20/22
File: joinStyles.css

CSS Stylesheet exclusively for the Join Us page

*/

#joinMain

{
    display: flex;
    justify-content: center;
    width: 60%;
    margin: 2em auto;
    padding: 0.25em 1em;
    background-color: navajowhite;
    color: black;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

#joinForm

{
    display: flex;
    align-items: flex-start;
}

#personalInfo, #memberType

{
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    margin: 1em;
    background-color: burlywood;
    border: 3px solid chocolate;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

legend

{
    border: 3px solid chocolate;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    padding: 0.25em 0.5em;
    background-color: chocolate;
    color: cornsilk;
}

#submitButton, #resetButton

{
    width: 35%;
    text-align: center;
    border: 3px solid sienna;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    font-family: titleFont;
    font-size: 18px;
    letter-spacing: 3px;
    color: cornsilk;
    background-color: chocolate;
    padding: 0.5em;
    margin-bottom: 0.5em;
    cursor: pointer;

    transition: color 0.5s, border 0.5s, background-color 0.5s;
}

/* Button Hover Animation */

#submitButton:hover, #resetButton:hover

{
    color: gold;
    background-color: darkgoldenrod;
    border: 3px solid gold;
}

/* Personal Info Styles */

#leftForm

{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#leftForm p

{
    font-size: smaller;
    margin-top: -15px;
}

.req

{
    color: red;
}

#personalInfo

{
    width: 25%;
    padding: 2em 1em;
}

#personalInfo label

{
    margin-top: 5px;
}

#personalInfo input

{
    width: 250px;
    margin-top: 2px;
    margin-bottom: 5px;
}

/* Input Field Conditionals */

#personalInfo input:focus

{
    background-color: bisque;
}

#personalInfo input:invalid:focus

{
    background-color: lightpink;
    border: 2px solid red;
}

#state

{
    max-width: 65px;
}

#zip

{
    max-width: 100px;
}

#middle

{
    max-width: 25px;
}


/* Membership Info Styles */

#memberType

{
    width: 75%;
}

#memberOption

{
    display: flex;
    flex-direction: column;
    border: none;
}

#memberOption input

{
    transform: scale(2);
    margin: 10px;
}

#choose

{
    margin-top: 1em;
}

#basic, #silver, #gold

{
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    padding: 1em;
    margin: 5px;
}

#basic

{
    background-color: lightblue;
    border: 3px solid cadetblue;
}

#silver 

{
    background-image: -moz-linear-gradient( 30deg, lightsteelblue 0%, lightslategray 30%, lightsteelblue 50%, lightslategray 80%, lightsteelblue 100%);
    background-image: -o-linear-gradient( 30deg, lightsteelblue 0%, lightslategray 30%, lightsteelblue 50%, lightslategray 80%, lightsteelblue 100%);
    background-image: -webkit-linear-gradient( 30deg, lightsteelblue 0%, lightslategray 30%, lightsteelblue 50%, lightslategray 80%, lightsteelblue 100%);
    background-image: linear-gradient( 30deg, lightsteelblue 0%, lightslategray 30%, lightsteelblue 50%, lightslategray 80%, lightsteelblue 100%);
    border: 3px solid lightslategray;
}

#gold 

{
    background-image: -moz-linear-gradient( 30deg, gold 0%, goldenrod 30%, gold 50%, goldenrod 80%, gold 100%);
    background-image: -o-linear-gradient( 30deg, gold 0%, goldenrod 30%, gold 50%, goldenrod 80%, gold 100%);
    background-image: -webkit-linear-gradient( 30deg, gold 0%, goldenrod 30%, gold 50%, goldenrod 80%, gold 100%);
    background-image: linear-gradient( 30deg, gold 0%, goldenrod 30%, gold 50%, goldenrod 80%, gold 100%);
    border: 3px solid goldenrod;
}