@import url('https://fonts.googleapis.com/css?family=Roboto:100&display=swap');
@import url('https://fonts.googleapis.com/css?family=Arizonia');
@import url('https://fonts.googleapis.com/css?family=Oswald:500&display=swap');
/*https://fonts.googleapis.com/css?family=Font+Name">*/
html {
    position: relative;
    min-height: 100%;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
}
blockquote {
    margin: 0;
    background-color: rgb(231, 228, 228);
    padding: 8px;
}
textarea {
    resize: none;
}
a:hover{
    text-decoration: none;
}
.mylogo {
    font-family: 'Arizonia', cursive;  
    font-size: 30px;
    text-shadow: 4px 4px 4px #aaa;
    color:rgb(142, 141, 141);
    padding-right: 10px;
}
main {
    font-family: 'Roboto', sans-serif;
}
p{
    font-size: 15pt;
    text-align: justify;
}
#ingr_list, #step_list{
    font-size: 15pt;
}
.not-valid{
    border: 2px solid red; 
}
.warning{
    color: rgb(145, 0, 0)
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px; /* Set the fixed height of the footer here */
    line-height: 60px; /* Vertically center the text there */
    background-color: #f8f9fa;
}
#billboard {
    display: flex;
}
#billboard>div {
    margin: 10px;
    padding: 20px;
    font-size: 30px;
}
a.skip-main {
   left:-999px;
   position:absolute;
   top:auto;
   width:1px;
   height:1px;
   overflow:hidden;
   z-index:-999;
}
a.skip-main:focus, a.skip-main:active {
   color: #fff;
   background-color:#000;
   left: auto;
   top: auto;
   width: 30%;
   height: auto;
   overflow:auto;
   margin: 10px 35%;
   padding:5px;
   border-radius: 15px;
   border:4px solid yellow;
   text-align:center;
   font-size:1.2em;
   z-index:999;
}  

.hide{
    display: none;
}
.rmv-btn-space{
    margin-left: 10px;
}
/* responsive layout */
@media (max-width: 667px) {
    #landing-desc{font-size: 3.9vw;}
    p {
        font-size: 12pt;
        text-align: justify;
    }
    li {font-size: 12pt;}
}
@media (max-width: 720px) {
    #allRecipes-title {font-size: 8.5vw;}
    #main-title {font-size: 6.8vw;}
}
@media (min-width: 720px) {
    #main-title {font-size: 6.3vw;}
}

@media only screen and (min-width: 740px) and (max-width: 740px) {
    #main-title {font-size: 5.3vw;}
}