/*
--space-cadet: #283044ff;
--air-superiority-blue: #78a1bbff;
--mint-cream: #ebf5eeff;
--silver-pink: #bfa89eff;
--cinereous: #8b786dff;
*/

/*Index Page Styling*/
#enter{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100vh;
    background: #ebf5ee;
}

#enter_link{
    display: flex;
    justify-content: center;
}

#enter_link a{
    color: #ebf5ee;
    background: #8b786d;
    text-align: center;
    text-decoration: none;
    width: 75px;
    padding: 10px 30px;
    font-size: 1.2rem;
    transition: border-radius 1s, box-shadow 1s;
}

#enter_link a:hover{
    border-radius: 50%;
    box-shadow: 10px 10px 10px black;
}

.enter_box{
    width: 50px;
    height: 50px;
    background: #bfa89e;
    margin-bottom: 50px;
    transition: margin-left 4s, background-color 4s;
}

#enter:hover .enter_box{
    margin-left: 95%;
    background: #78a1bb;
}

.enter_box:nth-of-type(1){
    transition-timing-function: ease-in;
}

.enter_box:nth-of-type(2){
    transition-timing-function: ease-out;
}

.enter_box:nth-of-type(3){
    transition-timing-function: linear;
}

.enter_box:nth-of-type(4){
    transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
}
#btn_wrapper{
    display: flex;
    justify-content: space-evenly;
    margin: 20px;
}
/*---------------------------------------------------------------------------*/
/*Home Page Styling*/
.small_img{
    width:20%;
}

.medium_img{
    width:35%;
}

.large_img{
    width:50%;
}

.xlarge_img{
    width:65%;
}

header{
    display: flex;
    justify-content: center;
    background: #78a1bb;
    text-align: center;
    font-size: 1.5rem;
    font-family: 'Merriweather', serif;
}

header img{
    margin: 0px 45px;
}

#home{
    background: #ebf5ee;
    display:grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-auto-rows: auto;
}

#home nav{
    grid-column: span 4;
}

#home #new_products{
    grid-row: span 2;
}

#home #news{
    grid-column: span 3;
}

#home #community{
    grid-column: span 3;
}

nav{
    background: #bfa89e;
    border-radius: 0px 0px 10px 10px;
    text-align: center;
    margin-bottom: 10px;
}

nav a{
    display: inline-block;
    color: #ebf5ee;
    text-align: center;
    text-decoration: none;
    border: 2px solid #ebf5ee;
    width:75px;
    margin: 7px 0px;
    padding: 10px 30px;
    font-size: 1.0rem;
    transition: box-shadow 0.5s, transform 0.5s;
}

nav a:hover{
    box-shadow: 0px 10px 10px -5px #8b786d;
    transform: translateY(-5px);
    text-decoration: underline;
    cursor: pointer;
}

#new_products{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    background: #8b786d;
    margin-right: 10px;
    padding: 5px;
    border-radius: 10px;
}

.content_item{
    display: flex;
    justify-content: center;
    padding: 10px;
}

footer{
    text-align: center;
    font-weight: bolder;
}
/*-----------------------------------------------------------------------------------*/
/*Tool Page Styling*/
#tool{
    background: #ebf5ee;
}

#tool_div{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#tool_calc{
    background: #bfa89e;
    width:500px;
    border: 2px solid #8b786d;
    border-radius: 10px;
    box-sizing: border-box;
}

#tool_calc div, #tool_calc form{
    width: 500px;
    display: flex;
    justify-content: center;
    margin:25px 0px;
}

#tool_calc label{
    display: inline-block;
    width:250px;
    text-align: left;
}

#tool_calc input{
    display: inline-block;
    width:50px;
}

#tool_btn{
    width: 150px;
}

#tool_values{
    background: #bfa89e;
    width:500px;
    border: 2px solid #8b786d;
    border-radius: 10px;
    margin:50px 0px;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
}
/*---------------------------------------------------------------------------------------*/
/*data Page Styling*/
#data{
    background: #ebf5ee;
}

#data_div{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#data_div div{
    display: flex;
    justify-content: space-between;
}

#data_div label{
    display: inline-block;
    width:220px;
}

#btn_wrapper{
    display: flex;
    justify-content: space-evenly;
    margin: 20px;
}
@media only screen and (max-width: 768px) {
#data_div div {
  flex: 1;
  flex-direction: column;
}
#data_div label {
    display: block;
    width: 100%;
    margin-bottom: 12px;
}
input, select, textarea, optgroup {
    padding: 4px 15px;
}
button, [type="button"], [type="reset"], [type="submit"] {
    background: #009DBA;
    border-color: #009DBA;
    color: white;
}
#data {
padding: 0 20px;
}
.w3-container {
    padding: 0;
}
}