:root {
    --red: rgb(191 43 17);
    --yellow: rgba(255,255,94,0.8);
    --gray: rgba(185,185,184,0.7);
    }
/*As of this version, I've moved the background image to this position from the bottom of the CSS. But I still 
need to figure out how to make some of the elements transparent*/

html {
    background-image: url("GitPics/farmscape.JPG");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* background-position: center; */
}

header>:not(nav) {
    background-color: var(--red);
    border-radius: 45px 45px 0 0;
    margin-bottom: 0;
}

/* This transparent background should remove the white space around the 
rounded borders below the footer */
body {
    background-color: transparent !important;
}

.showline {
    background-color: rgb(185, 185, 184);
}

/* div> */
.container.showline {
    max-width: 100% !important;
    /* margin-left: 0 !important;
    margin-right: 0 !important; */
}

.row.pt-5.text-center {
    padding: 0 0 0 0 !important;
    margin: 0 0 0 0 !important;
}

/* div.query {
    
} */

/* Can this properly align the button container? */
div.row.pt-3.justify-content-center.showline {
   display: flex;
   flex-direction: row;
   justify-content: center;
   width: 100%;
   min-width: 500px;
}

/* styling for Upload button */
.custom-file-label {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #fff;
    background-color:#0F6EFD;
    border-radius: 0.35rem;
    display: flex;
    align-items: center;
    }
    
    /* .custom-file-label::after {
    content: "Upload"
    } */
    
    .custom-file-input:valid+.custom-file-label::after {
    content: "File uploaded!";
    }
    
    .custom-file {
    position: relative;
    display: inline-block;
    }

    .custom-file-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    }

    .custom-file-input:focus+.custom-file-label, .custom-file-input.has-focus+.custom-file label {
    border-color: red;
    box-shadow: 0 0 0 0.2rem rgba(0. 123, 255, 0.25);
    }

    .custom-file>label:hover {
        cursor: pointer;
        background-color:#0c3a80;
        
    }

#plantidspace {
    background-color: transparent !important;
}

.rounded.magsnap {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 99%;
    min-width: 150px;
    max-width: 400px;
}

div>.row.justify-content-center.pt-5 {
    background-color: transparent;
}

.accordion-button.collapsed{
    background-color: var(--gray);
}

p {
    background-color: var(--red);
    text-align: center;
    font-family: "Futura";
    font-size: 1.2rem;
}

/* .container {
    background-color: var(--red);
    font-family: "Pixelify Sans";
    font-size: 1.5rem;
}
.container>h1 {
    font-weight: bold;
} */

.accordion-body:first-of-type {
    background-color: var(--yellow);
}

/* How can I style only the second accordion interior to be yellow?
.accordion-body:last-of-type {
    background-color: var(--gray);
} */

h5 {
    font-family: "Pixelify Sans";
    font-weight: bold;
    font-size: 2rem;
}

/* body>nav {
    background-color: var(--red);
} */

#pagename {
    text-align:center;
    font-family: "Pixelify Sans";
    font-weight: bold;
}

.flex-container {
    display: flex;
    justify-content:space-around;
}

input {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

footer {
    background-color: var(--gray);
    border-radius: 0 0 45px 45px;
    margin-top: 0;
    background-clip: content-box;
}
footer>h3 {
    padding-left: 10px;
}
footer>ul {
    text-align: left;
    padding-left: 50px;
}

/*Color variable example-- background-color: var(--red) */

/*#ambience {
    background-image: url("GitPics/farmscape.JPG");
}
.flex-container {
    display:flex;
    justify-content:space-around;
}    
*/

/* My colors
--red: rgb(191 43 17);
--yellow: rgba(255,255,94,0.8);
--gray: rgba(185,185,184,0.7); */

/*test css for upload button, from Pammi, to test for the chat */
/* .custom-file-label {
 position: relative;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 padding-top: 7px;
 padding-bottom: 7px;
 padding-left: 1rem;
 padding-right: 1rem;
 font-size: 1rem;
 line-height: 1.5;
 color: #fff;
 background-color: #0F6EFD;
 border-radius: 0.35rem;
 display: flex;
 align-items: center;
}
.custom-file-label::after {
 content: "Upload";
}
.custom-file-input:valid+.custom-file-label::after {
 content: "File uploaded!";
} */