/* import custom font */
@font-face {
    font-family: "Norse";
    font-weight: bold;
    font-style: normal;
    src: url("../fonts/Norse-Bold.otf");
}

/* remove margins & add box-sizing
    for all elements */
* {
    margin: 0;
    box-sizing: border-box;
}



/* main page container with Horizontal display
    via Display: Flex for Left & Right ids */
#page-container {
    display: flex;
    height: 100vh;
}



/* LEFT SECTION */
/* split display area with Flex & add background image to div */
#left-container {
    flex: 0.75;
    display: flex;
    flex-direction: column;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../images/controller-photo.jpg");
}

/* split left container into Top & Bottom section */
#left-container .top {
    flex: 1;
}

/* split left container into Top & Bottom section */
#left-container .bottom {
    flex: .73;
}

/* add flex, size & align children */
#left-container .top,
#left-container .bottom {
    width: 100%;
    display: flex;
    align-items: flex-end;
}

/* add banner to top left-container */
#left-container .top .banner {
    width: 100%;
    height: 130px;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* size container for icon mage */
#left-container .banner .icon-container {
    width: 75px;
    height: 100px;
}

/* stretch image to fill container */
#left-container .banner img {
    width: 100%;
    height: 100%;
}

/*add custom font & sizing to banner text*/
#left-container .banner .text {
    color: white;
    font-size: 75px;
    font-family: "Norse", 'Courier New', Courier, monospace;
}

/* position & align attribution text */
#left-container .attribution {
    width: 100%;
    color: white;
    font-size: 18px;
    text-align: center;
    margin-bottom: 55px;
    font-family: "Norse", 'Courier New', Courier, monospace;
}

/* attribution link default look */
#left-container .attribution a:link {
    color: gold;
    background-color: transparent;
    text-decoration: none;
}

/* attribution link visited look */
#left-container .attribution a:visited {
    color: greenyellow;
    background-color: transparent;
    text-decoration: none;
}

/* attribution link hover look */
#left-container .attribution a:hover {
    color: pink;
    background-color: transparent;
    text-decoration: underline;
}

/* attribution link active look */
#left-container .attribution a:active {
    color: greenyellow;
    background-color: transparent;
    text-decoration: underline;
}



/* RIGHT-TOP SECTION */
/* Split display area with Flex */
#right-container {
    display: flex;
    flex-direction: column;
    flex: 1
}

/* align children to bottom-left */
#right-container .top {
    height: 100%;
    background-color: #f8f8f7;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}

/* text font style */
#right-container .top .text-1, 
#right-container .top .text-2 {
    margin-inline: 4%;
    color: #1D2523;
    font-size: x-large;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* text 1 size & margin */
#right-container .top .text-1 {
    width: 80%;
    margin-block-end: 3%;
}

/* text 2 margin */
#right-container .top .text-2 {
    margin-block-end: 5%;
}



/* RIGHT-MIDDLE SECTION */
/* size middle section */
#right-container .middle {
    height: 100%;
    position: relative;
    background-color: white;
    box-shadow: 2px 8px 15px 0px rgba(0, 0, 0, 0.5);
    flex: 0.95;
}

/* add margins to middle text and form elements */
#right-container .middle .text,
#right-container .middle form {
    color: #1D2523;
    margin-inline: 4%;
    margin-block: 3%;
}

/* middle text font style */
#right-container .middle .text {
    font-size: x-large;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* make form elements stack as a 2x3 grid */
#right-container .middle form {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(2, 1fr);
    row-gap: 15px;
    width: 76%;
    align-items: flex-end;
}

/* make each input container occupy the same space */
#right-container .middle .input-container {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* label font style */
#right-container .middle label {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* length & size of input elements */
#right-container .middle input {
    width: 80%;
    font-size: 14px;
    border-radius: 4px;
    padding-inline: 2%;
}

/* input hover color */
#right-container .middle input:hover {
    border: 2px solid #1690A9;
}

/* input focus style */
#right-container .middle input:focus {
    outline: none;
    box-shadow: 2px 8px 15px 0px rgba(0, 0, 0, 0.15);
}

/* input valid color */
#right-container .middle input:focus:valid {
    border: 2px solid #16a92f;
}

/* input invalid color */
#right-container .middle input:focus:invalid {
    border: 2px solid #a33721;
}



/* RIGHT-BOTTOM SECTION */
/* right bottom section of screen */
#right-container .bottom  {
    height: 100%;
    background-color: #f8f8f7;
    flex: 1;
}

/* button & text font & style */
#right-container .bottom button,
#right-container .bottom .text {
    margin-inline: 4%;
    font-size: large;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* button attributes */
#right-container .bottom button {
    margin-block: 5%;
    color: white;
    font-weight: bolder;
    width: 255px;
    padding-block: 15px;
    border-radius: 10px;
    border: none;
    background-color: #1690A9;
}

/* button color on hover */
#right-container .bottom button:hover {
    background-color: #137d92;
}

/* button style on click */
#right-container .bottom button:active {
    padding-block: 13px;
    border: 2px solid #1D2523;
    box-shadow: 2px 5px 16px 0px rgba(0, 0, 0, 0.2);
}

/* text color */
#right-container .bottom .text {
    color: #1D2523;
}

/* main link look */
#right-container .bottom a:link {
    color: #1690A9;
    background-color: transparent;
    text-decoration: none;
}

/* link visited look */
#right-container .bottom a:visited {
    color: #16a979;
    background-color: transparent;
    text-decoration: none;
}

/* link hover look */
#right-container .bottom a:hover {
    color: #a91690;
    background-color: transparent;
    text-decoration: underline;
}

/* link active look */
#right-container .bottom a:active {
    color: #16a979;
    background-color: transparent;
    text-decoration: underline;
}