html{
    font-size: 16px;
    --headers:#3badca;
    --text:#dce3e6;
    --dark:#0D0208;
    --light:#faeb14;
}

@media only screen and (max-width: 500px){
    html{
        font-size: 16px;
    }
}

.bordered, .gpt_container{
    border: var(--text) 0.01em solid;
    background-color: var(--dark);
    padding: .5em;
}

.divWrapper {
  margin: 0px auto;
  max-width: 50rem; 
  /* margin-top: 3rem; */
  background: rgba(0,0,0,.75);
    padding:1rem;
}

.sentence {
    color:var(--light);
    font-family: 'Orbitron', sans-serif;
}

.wrapper_container{
    display:flex;
    flex-wrap: wrap;
}

.btnContainer{
    display:flex;
    flex-wrap: wrap;
    border: var(--text) 0.01em solid;
    padding-top: .5em;
    /*padding: .5em;
    padding: .5em; */

}

.wrapper_mask {
  /*  width: 100%; */
    height: 3rem; /*should be same as .list-item height */
    overflow: hidden; 
    position: relative;
   /* display: inline-block;
    margin-bottom: -2.5rem; 
    border-top: 0.01em solid;
    border-bottom: 0.01em solid; */
    flex-basis: 15rem;
}


.list_item {
    min-height: 3rem;
    max-height: 3rem;
    margin: 0rem;
    padding: 0rem;
    background-size: contain;
    text-align: center;
    color:var(--light);
    font-family: 'Orbitron', sans-serif;;
    
}

/* Typography */

body {
  /*font-family: Helvetica, Arial, sans serif;*/
  font-family: 'Anton', sans-serif;;
  font-size: 1rem;
  /* background-color: #080205;
   color:var(--headers); */
   background: url("sharktank.jpeg") no-repeat; 
   background-size: cover;
  color: var(--text);;
}

h1 {
    background-image: linear-gradient(to right,var(--headers), var(--text));
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

h3 {
    font-family: 'Orbitron', monospace;
    color:var(--headers);
}

p,ul {
    font-family: 'Nova Mono', monospace;
    color: var(--text);
    margin-top:0px;
    margin-bottom:0px;
    padding-bottom:.5rem;
}

.recipe_if, .recipe_then {
    font-weight: bold;
    font-size: 1.2rem;
    top:0px;
    color:var(--light);
}

.tagline {
  font-weight: normal;
  font-size: 1.5rem;
}

a {
 font-weight: bold;
 text-decoration: none;
 color:var(--text);
}

.container {
    position: absolute;
    width:15rem;
}
/*
.tblSlot {
    width: 100%;
    height:100%;
} 
*/
.btnGen {
   /* clear: both;
    max-width: 40%; */
  /*  height: 4rem; */
    background-color: var(--headers);
    color:var(--dark);;
    margin:0 auto;
    font-size:1.5rem;
    text-align:center;
    box-shadow: .5rem .5rem 1rem #08071b;
    cursor: pointer;
    transition-duration: 250ms;
    flex-basis: 20rem;
    margin-bottom: .5em;
}

.btnGen:active{
    background-color: var(--light);
    box-shadow: .25rem .25rem .5rem #080205;
    transform:translateY(.5rem);
}

#btnGenBS{
    border-radius: 1rem 0 0 1rem;
   
}
#btnGenGPT{
    border-radius: 0 1rem 1rem 0;
}

.footer{
    font-family: 'Nova Mono', monospace;
  /*  padding-top: 3rem; */
    font-size: .75rem;
    text-align: center;
    color:var(--headers);
}