/* 
    QuickQR App Home Page

    Author: Josiah Riley
    Date: Spring 2022

    Decription: This is the CSS for the home page of the QuickQR 
    application. This page links to all the pages which contain the 
    main functions of the app, and allows the user to open the 
    spreadsheet which the QR codes link to. 
*/

/* CSS styling for HTML elements */


body {
    background-color: rgb(54, 57, 58);
} * {box-sizing: border-box;}


/* CSS styling for main div */
#mainDiv {
    height: 700px
}

.vertical-flex-container {
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: lightgray;
}

/* CSS styling for buttons in main div */
.button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(32, 42, 68);
    border-radius: 25px;
    width: 80%;
    height: 12%;
}

#button1 {
    position: relative;
    /* top: 40px; */
    top: 10%;
}

#button2 {
    position: relative;
    /* top: 80px; */
    top: 20%;
}

#button3 {
    position: relative;
    /* top: 120px; */
    top: 30%;
}

#button4 {
    position: relative;
    /* top: 120px; */
    top: 40%;
}


/* ***********************************************************************/
/* CSS styling for popup form */

/* The popup form - hidden by default */
.form-popup {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 9;
}

/* Add styles to the form container */
.form-container {
    position: relative;
    border-radius: 25px;
    padding: 10px;
    background-color: rgb(82, 85, 86);
}
  
/* Full-width input fields */
.form-container input[type=text], select {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: white;
}


/* When the inputs get focus, do something */
.form-container input[type=text]:focus{
    background-color: #ddd;
    outline: none;
}


/* Set a style for the submit button */
.form-container .btn {
    background-color: rgb(32, 42, 68);
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom:10px;
    opacity: 0.8;
    border-radius: 25px;
}

/* Set a style for the close form button */
.form-container .btn2 {
    background-color: lightgray;
    color: black;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom:10px;
    opacity: 0.8;
    border-radius: 25px;
}

/* Sizing and positioning for x-button that closes guide popup */
#closeGuideButton {
    width: 50px;
    position: absolute;
    top: 0px;
    right: 0px;
}

/* ***********************************************************************/