@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap');

/* 
    ADD MOBILE RESPONSITIVITY... IT IS NOT YET ADDED TO THIS PAGE...
*/

/* General Styles for the entire document. Mostly resetting any styles that may have been predefined. Also disabling selectability on background-image */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
}

/* Setting general font and background image for page. Affects styling of the background image too and makes it so it doesn't repeat.  */
body {
    font-family: "Solway", serif;
    font-weight: 400;
    background-image: url("../assets/AdobeStock_54218629.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
}       

/* Container for the selector area for the page. Sets the hieght, display, puts it in the center, etc. etc. */
.selectorcontainer {
    height: 100vh;
    display: grid;
    place-items: center;
    inset: 0;
    position: fixed;
    z-index: 1;
}

/* Actual selector area itself with the background. This sets its internal properities and how things will be aligned, also changes some of the styling. */
.selector {
    height: 50%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(217, 217, 217, 0.80);
    box-shadow: 0px 7.5px 20px 13px rgba(0, 0, 0, 0.233);
    text-align: center;
}

/* Font sizing for H1 tags. */
.selector h1 {
    font-size: 2.5vw;
}

/* Styling for the selector itself. Changes the color to a dark gray color and adds a transition for hovering over it. */
.selector select {
    font-size: 1.5vw;
    font-family: "Solway", serif;
    font-weight: 400;
    margin-top: 15%;
    margin-bottom: 15%;
    background-color: #515151;
    color: white;
    padding: 2.5%;
    width: 22vw;
    transition: background-color 0.3s ease-out;
}

/* Styling for when user is hoveirng over the selector. */
.selector select:hover {
    background-color: #1a1a1a;
    transition: background-color 0.3s ease-out;
}

/* New experiemental features that affect the styling of the selection box. Allows for custom styling of the box itself. */
select,
::picker(select) {
    appearance: base-select;
}

/* Hides the default drop down arrow. */
option::checkmark {
    display: none;
}

/* Styling for the submit buttoon. Changes padding and width, etc. */
.selectorvalue button {
    font-size: 1.5vw;
    padding: 2.5% 5% 2.5% 5%;
    border-radius: 30px;
    width: 50%;
    cursor: pointer;
}

/* Styling for the logo in the top left corner of the page. Makes it stand out more and look better to the user.  */
.title {
    width: 14.5vw;
    height: 9vh;
    font-size: clamp(24px, 2.25em, 48px);
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    color: black;
    background-color: rgba(217, 217, 217, 0.9);
    border-radius: 0px 30px 30px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 7.5px 20px 13px rgba(0, 0, 0, 0.233);
    position: relative;
    z-index: 2;
}

/* Hides the bullet points that come from an unordered list. */
.title ul {
    list-style: none;
}

/* Hides the link styling (underline) under default links and changes the color from the link default of purple to black.  */
.title a {
    text-decoration: none;
    color: black;
}