* {
    font-family: Georgia, 'Times New Roman', Times, serif;
}
@media screen {
    #set-screen-lock {
        display:none;
        width:50px;
        height:50px;
    }
    .screen-lock-off {
        background:url('../img/dual_icon.png') -50px 0px;
    }
    .screen-lock-on {
        background:url('../img/dual_icon.png') 0px 0px;
    }
    #recipes {
        display: none;
    }
    html {
        -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
    }    
    body {
        background-color:#f9feff;
        margin:0;
    }
    #wrapper {
        padding:18px 8px 18px 8px;
        margin:0;
    }
    .hide {
        display:none!important;
    }
    h1 {
        margin:0px 8px 10px 8px;
        font-size:32px;
    }
    h2 {
        border-top: 3px black solid;
        padding-top:10px;
        margin:0px 5px 10px 5px;
    }
    h3 {
        margin:0px;
        width:100%;
    }
    .close-div {
        position:absolute;
        top:-50px;
        right:70px;
    }
    .close-recipe {
        position:fixed;
        font-size:30px;
        border-radius: 15px;
        border-style: none;
        text-align:right;
        padding-right:10px;
        padding-top:0px;
        cursor:pointer;
        background-color:rgba(216, 245, 250, 0.8);
        touch-action: manipulation;
        user-select: none;
        z-index:1000;
        width:70px;
    }
    .title {
        cursor:pointer;
        white-space: nowrap;
    }
    .servings {
        position:relative;
        margin-top:21px;
    }
    .servings > input {
        font-size:20px;
        height:46px;
        padding-left:10px;
        padding-right:10px;
        border-radius: 10px;
        border-width:1px;
        border-color:rgb(118,118,118);
        box-sizing: border-box;
        width:100px;
    }
    .reset {
        position:absolute;
        top:0;
        right:110px;
        cursor:pointer;
        touch-action: manipulation;
        user-select: none;
    }
    .halve {
        position:absolute;
        top:0;
        right:55px;
        cursor:pointer;
        touch-action: manipulation;
        user-select: none;
    }
    .double {
        position:absolute;
        top:0;
        right:0;
        cursor:pointer;
        touch-action: manipulation;
        user-select: none;
    }
    .copy {
        position:absolute;
        bottom:0;
        right:4px;
        cursor:pointer;
        touch-action: manipulation;
        user-select: none;
    }
    .ellis {
        position:absolute;
        bottom:0;
        right:calc(166px - (54px) - (54px));
        cursor:pointer;
        touch-action: manipulation;
        user-select: none;
    }
    .reddit {
        display:none;
        position:absolute;
        bottom:0;
        right:58px;
        cursor:pointer;
        touch-action: manipulation;
        user-select: none;
    }
    .cronometer {
        display:none;
        position:absolute;
        bottom:0;
        right:112px;
        cursor:pointer;
        touch-action: manipulation;
        user-select: none;
    }
    .pin {
        position:absolute;
        top:3px;
        right:3px;
        touch-action: manipulation;
        user-select: none;
    }
    .share {
        position:absolute;
        bottom:0;
        right:calc(220px - (54px) - (54px));
        cursor:pointer;
        touch-action: manipulation;
        user-select: none;
    }
    .link {
        position:absolute;
        bottom:0;
        right:calc(276px - (54px) - (54px));
        cursor:pointer;
        touch-action: manipulation;
        user-select: none;
    }
    #info {
        display:none;
        bottom:0;
        right:0;
        padding:10px;
        margin:0px;
        background-color:white;
        border-width: 2px;
        border-style:solid;
        border-color: black;
        border-radius:10px;
        position:fixed;
        bottom:0px;
        left:0;
        z-index:5;
    }
    #info > p {
        margin:0;
        padding:0;
        font-size:20px;
    }
    .card {
        background-color:#d8f5fa;
        padding:10px; 
        border: 2px #70c8d8 solid;
        box-sizing:border-box;
        position:relative;
        margin:0px 5px 10px 5px;
        border-radius:10px;
        display:inline-block;
    }
    .tags {
        display: block;
        position: absolute;
        top: 50px;
        right:0px;
    }
    .tag {
        display: inline-block;
        margin-left:10px;
        margin-top:10px;
        background-color:#d8f5fa;
        border: 2px #70c8d8 solid;
        border-radius: 10px;
        padding:2px 5px 2px 5px;
        font-size:16px;
        text-transform:capitalize;
    }
    .fullscreen {
        margin:auto;
        display:block;
        max-width:600px;
    }
    .higher {
        z-index:4;
    }
    #bottom-boy {
        width:1px;
        display:block;
    }
    li {
        margin-top:7px;
    }
    h4 {
        margin-bottom:0px;
    }
    #icons {
        position:absolute;
        top:21px;
        right:10px;
    }
    #search {
        width:calc(100% - 46px);
        font-size:20px;
        height:46px;
        padding-left:10px;
        padding-right:10px;
        border-radius: 10px 0px 0px 10px;
        border-width:1px;
        border-color:rgb(118,118,118);
        box-sizing: border-box;
    }
    #search-clear {
        position:absolute;
        top:0;
        right:0;
        width:46px;
        height:46px;
        font-size: 15px;
        border-radius: 0px 10px 10px 0px;
        background-color:#d8f5fa;
        border-width: 1px;
        border-color:rgb(118,118,118);
    }
    #search-group {
        display:none;
        position:relative;
        margin:0px 5px 10px 5px;
    }
    .not-visible {
        display:none;
    }
    .hidden-for-pin {
        display:none;
    }
    .pindragimg {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        position: absolute;
        right: 0px;
        top: 0px;
        background-image: url(../img/pin_white.png);
        border-radius: 10px;
        background-repeat: no-repeat;
        background-position: right;
        z-index: -5;
    }
    .green {
        background-color: rgb(66, 206, 66) !important;
        border-color: rgb(0, 206, 0) !important;
        color: white !important;
    }
    .red {
        background-color: #ff7777 !important;
        border-color: rgb(255, 0, 0) !important;
        color: black !important;
    }
    .lightgreen {
        background-color: rgb(174, 255, 174) !important;
        border-color: rgb(0, 206, 0)  !important;
        color: black !important;
    }
    .lightred {
        background-color: #ffc1c1 !important;
        border-color: rgb(255, 0, 0) !important;
        color: black !important;
    }
    #option-buttons {
        position:absolute;
        top:0px;
        right:0px;
        display:none;
    }
    #option-buttons > img {
        margin:10px 10px 0px 0px;
    }
}
@media print {
    #wrapper, #info, .pindragimg, #option-buttons {
        display:none;
    }
    .tags {
        position: relative;
    }
    .tags:before {
        content:"Tags: ";
    }
    .tag:after {
        content:", ";
    }
    .tag:last-child:after {
        content:"";
    }

    .fullscreen * {
        visibility:visible;
    }
    .fullscreen img {
        display:none;
    }
    .fullscreen button {
        visibility:hidden;
    }
    .fullscreen a.source:before {
        content:"Source: ";
    }
    .fullscreen a.source {
        display:block;
        text-decoration:none;
        color:black;
    }
    .fullscreen a.source:after {
        content:attr(href);    
    }
}
.invisible-input {
  width: 0;
  overflow: hidden;
  opacity:0;
  filter:alpha(opacity=0);
  flex-grow:0;
  padding:0px;
  margin:0px;
  border:0px;
}
.selected {
  outline: 5px auto rgb(94, 158, 214);
}
.flex {
  display:flex;
}