html {
  font-size: 14px;
  scrollbar-color: rgb(87, 145, 75) rgb(157, 179, 209);  /*Green, Blue*/
}

::-webkit-scrollbar {
    background-color: rgb(87, 145, 75);
}
::-webkit-scrollbar-button {
    background: rgb(157, 179, 209);
}
::-webkit-scrollbar-thumb {
    background: rgb(157, 179, 209);
}


@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}


header, footer {
    background: linear-gradient(120deg, #0b9100 5.21%, rgb(144, 169, 203) 57.29%, #F9F9F9 110.00%);
    height: 4rem;
}


header h1, footer h2 {
    margin: 0;
    z-index: 100;
    position: absolute;
    box-shadow: 0 0 1rem 0.25rem #EEE;
    height: 4rem;
    width: 100%;

    box-sizing: border-box;
    border-width: 0;
    border-image: linear-gradient(45deg, #aabdd6 5.21%, #F9F9F9 110.00%);
    border-image-slice: 100%;
    border-image-slice: 1;

    font-style: italic;
    color: #FFF;
    text-shadow: 0.1rem 0.1rem 0.1rem #004700;
    /*padding: 0.6rem 0 0 1.0rem;*/


}
header h1 {
   border-bottom: 0.25rem solid transparent;
   padding: 0.25rem 0 0 0.6rem;
   padding: 0.6rem 0 0 1.0rem;
   font-size: 2rem;
}

footer h2 {
    border-top: 0.25rem solid transparent;
    padding: 0.8rem 0 0 1.0rem;
    font-size: 1.5rem;
}

main div.index-body {
    /*background: linear-gradient(120deg, #0b9100 5.21%, rgb(144, 169, 203) 57.29%, #F9F9F9 130.00%);*/
    padding: 0rem 0 3rem 0;
    background-color: #4d8f4d;
}

.flex {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: baseline;
}

/*Enter Scene Number:*/
main div.flex p {
    width: 100%;
    padding: 2rem 0 2rem 3rem;
    color: #FFF;
    text-shadow: 0.1rem 0.1rem 0.1rem #004700;
    font-style: italic;
    font-size: 2rem;
    font-weight: 900;
}

main div.flex p label input {
    font-size: 1.5rem;
    text-shadow: 0.1rem 0.1rem 0.1rem #004700;
    font-style: italic;
    font-size: 2rem;
    font-weight: 900;
    color: white;
    background-color: transparent;
}


/*Scene Items*/
main div.flex a, main div.flex p label input {
    border-width: 0.2rem;
    border-style: none;
    border-color: #FFF;
    border-radius: 0.5rem;
    box-shadow: 0px 0px 1rem white;
}

main div.flex a {
    width: 31%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 1rem 0;
    margin: 1rem 0;
    text-decoration: none;
}

main div.flex a img {
    width: 90%;
}

main div.flex a span {
    color: #FFF;
    text-shadow: 0.1rem 0.1rem 0.1rem #004700;
    font-style: italic;
    font-size: 2rem;
    font-weight: 900;
    text-decoration: none;
}