@import url('https://fonts.googleapis.com/css2?family=Tangerine&display=swap');
html {
    scroll-behavior: auto;
}
body {
    min-height: 2000px;
}
h1 {
    font-family: 'Tangerine', sans-serif;
    text-align: center;
    font-size: 50px;
    margin-bottom: 0px;
    margin-top: 5px;
    color: #ff6961;
}
#textspacer {
    width: 20%;
}
@media (min-width: 0px) {
    #textspacer {
        width: 5%;
    }
    .top {
        font-size: 22px;
        color: #fff;
    }
    #subline.topsub {
        font-size: 11px;
        color: #fff;
    }
    #mapid {
        width: 100%;
    }
    #footer {
        text-align: center;
    }
    #footer {
        text-align: center;
        place-items: center;
        justify-content: center;
    }
    #footer p {
        font-size: 12px;
    }
    #dev {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        -moz-box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.39);
        -webkit-box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.39);
        box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.39);
    }
    #footer #showinput #showbutton:hover {
        color: red;
    }
    .product .itemBox {
        position: relative;
        width: 100vw;
        height: 100vw;
        margin: 5px;
    }
        #listalign {
        display: grid; 
        grid-template-columns: 1fr; 
        grid-gap:20px; 
        padding:10px;
    }
    .product .itemBox img {
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
@media only screen and (min-width: 480px) {
    .product .itemBox {
        position: relative;
        width: 100vw;
        height: 100vw;
        margin: 5px;
    }
}
@media only screen and (min-width: 960px) {
    .product .itemBox {
        position: relative;
        width: 30.5vw;
        height: 30.5vw;
        margin: 5px;
    }
    #listalign {
        display: grid; 
        grid-template-columns: 1fr 1fr 1fr; 
        grid-gap:20px; 
        padding:10px;
    }
}
@media only screen and (min-width: 1440px) {
    .product .itemBox {
        position: relative;
        width: 23vw;
        height: 23vw;
        margin: 5px;
    }
}
@media only screen and (min-width: 2000px) {
    .product .itemBox {
        position: relative;
        width: 18vw;
        height: 18vw;
        margin: 5px;
    }
}
@media (min-width: 700px) {
    #textspacer {
        width: 2%;
    }
    .top {
        font-size: 30px;
        color: #fff;
    }
    #subline.topsub {
        font-size: 12px;
        color: #fff;
    }
    #mapid {
        width: 100%;
    }
    #dev {
        border-radius: 50%;
        width: 75px;
        height: 75px;
        margin: 10px;
        -moz-box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.39);
        -webkit-box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.39);
        box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.39);
    }
}
@media (min-width: 1500px) {
    #textspacer {
        width: 500px;
    }
    #mapid {
        width: 100%;
    }
    .top {
        font-size: 50px;
        color: #ff6961;
    }
    #subline.topsub {
        font-size: 20px;
        color: #b8241c;
    }
}
@media (min-width: 2500px) {
    #textspacer {
        width: 500px;
    }
    .input#mapinput {
        width: 100%;
    }
    #mapid {
        width: 100%;
    }
    .top {
        font-size: 50px;
    }
    #subline.topsub {
        font-size: 20px;
    }
}
#subline {
    font-family: 'Roboto', sans-serif;
    text-align: center;
    font-size: 20px;
    margin-bottom: 2px;
    color: #dd3027;
}
.group { 
    position:relative; 
    margin-bottom:45px; 
    width: 100%;
}
input {
    font-size:18px;
    padding:10px 10px 10px 5px;
    display:block;
    block-size: auto;
    min-width: 100px;
    width:100%;
    border:none;
    border-bottom:1px solid #757575;
}
input:focus { outline:none; }
    /* LABEL ======================================= */
    label 				 {
    color:#999; 
    font-size:18px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:5px;
    top:10px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
@media (max-width: 700px) {
    input#calName {
        max-width: 70px;
        min-width: 70px;
    }
}
@media (max-width: 800px) {
        input:focus { outline:none; }
        /* LABEL ======================================= */
        label 				 {
        color:#999; 
        font-size:9.5px;
        font-weight:normal;
        position:absolute;
        pointer-events:none;
        left:5px;
        top:10px;
        transition:0.2s ease all; 
        -moz-transition:0.2s ease all; 
        -webkit-transition:0.2s ease all;
    }
}

/* active state */
input:focus ~ label, input:valid ~ label 		{
    top:-20px;
    font-size:14px;
    color:#ff6961;
}

@media (max-width: 800px) {
        /* active state */
        input:focus ~ label, input:valid ~ label 		{
        top:-14px;
        font-size:6px;
        color:#ff6961;
    }
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; min-width:70px; width:100%; }
.bar:before, .bar:after 	{
    content:'';
    height:2px; 
    width:0;
    bottom:1px; 
    position:absolute;
    background: #ff6961; 
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
.bar:before {
    left:50%;
}
.bar:after {
    right:50%; 
}
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
    width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
    position:absolute;
    height:60%; 
    width:100px; 
    top:25%; 
    left:0;
    pointer-events:none;
    opacity:0.5;
}
/* active state */
input:focus ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
    from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
    from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
}
#calendar {
    width: auto;
    margin-top: 0%;
    font-family:'Roboto', sans-serif;
}
.input {
    font-family:'Roboto', sans-serif;
    width: 100%;
    height: 40px;
    outline: none;
    border: none;
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    box-shadow: -8px 4px 12px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.button {
    color: #999;
    width: 100%;
    max-width: 100px;
    height: 42px;
    border: none;
    padding: 5px 5px;
    font-size: 10px;
    cursor: pointer;
    transition: 0.5s;
    text-align: center;
    align-content: center;
    border-bottom:1px solid #757575;
    background: #fff;
    box-shadow: -11px 0px 32px -8px rgba(0,0,0,0.33);
}
@media (max-width: 700px) {
    .button {
        max-width: 50px;
    }
}
.button:hover {
    color: blue;
    border-bottom: 3px solid blue;
    padding-bottom: 3px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
.xbutton {
    color: #999;
    width: 100%;
    max-width: 100px;
    height: 42px;
    border: none;
    padding: 5px 5px;
    font-size: 20px;
    cursor: pointer;
    transition: 0.5s;
    text-align: center;
    align-content: center;
    border-bottom:1px solid #757575;
    background: #fff;
    box-shadow: -11px 0px 32px -8px rgba(0,0,0,0.33);
}
@media (max-width: 700px) {
    .xbutton {
        max-width: 50px;
    }
}
.xbutton:hover {
    color: red;
    border-bottom: 3px solid red;
    padding-bottom: 3px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
#icon-change {
    transition: ease-in 0s ease-out 1s;
    color: #90ee90;
    border-bottom: 3px solid #90ee90;
    padding-bottom: 3px;
}
#time {
    font-family:'Tangerine', sans-serif;
    font-size: 50px;
    text-align: center;
    margin-top: 0px;
    color: #ff6961;
    /*text-shadow: -2px 2px 4px #000000;*/
}
#footer {
    text-align: center;
    height: 100%;
    width: 100%;
    padding-top: 3px;
    background: #ff6961;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.typebuttons {
    color: #999;
    width: 100%;
    max-width: 70px;
    height: 42px;
    border: none;
    padding: 5px 5px;
    font-size: 20px;
    cursor: pointer;
    transition: 0.5s;
    cursor: pointer;
    text-align: center;
    align-content: center;
    border: none;
    border-bottom:1px solid #757575;
    background: #fff;
    box-shadow: -11px 0px 32px -8px rgba(0,0,0,0.33);
}
#event:hover {
    color: lightsalmon;
    border-bottom: 3px solid lightsalmon;
    padding-bottom: 3px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
#holiday:hover {
    color: yellow;
    border-bottom: 3px solid yellow;
    padding-bottom: 3px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
#birthday:hover {
    color: lightblue;
    border-bottom: 3px solid lightblue;
    padding-bottom: 3px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
#everyyear:hover {
    color: green;
    border-bottom: 3px solid green;
    padding-bottom: 3px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
#event-selected {
    color: lightsalmon;
    border-bottom: 3px solid lightsalmon;
    padding-bottom: 3px;
}
#holiday-selected {
    color: yellow;
    border-bottom: 3px solid yellow;
    padding-bottom: 3px;
}
#birthday-selected {
    color: lightblue;
    border-bottom: 3px solid lightblue;
    padding-bottom: 3px;
}
#everyyear-selected {
    color:  green;
    border-bottom: 3px solid  green;
    padding-bottom: 3px;
}
#flex {
    display:flex;
    flex-direction: row;
}
section#picture {
    padding: 20px;
    width: auto;
}
section#picture ul {
    display: flex;
    margin-bottom: 10px;
}
section#picture ul li {
    list-style: none;
    background: #eee;
    padding: 8px 20px;
    margin: 5px;
    letter-spacing: 1px;
    cursor: pointer;
}
@media (max-width: 700px) {
    section#picture {
        max-width: 700px;
        max-hight: 700px;
    }
    section#picture ul li{
        padding: 2px 5px;
    }
}
section#picture ul li.active {
    background: #ff6961;
    color: #fff;
}
.product {
    display: flex;
    flex-wrap: wrap;
}
.selectedimg {
    opacity: 0.6;
}
.fileupload {
    color: #999;
    min-width: 100px;
    max-width: 100px;
    height: 42px;
    border: none;
    padding: 5px 5px;
    font-size: 20px;
    cursor: pointer;
    transition: 0.5s;
    text-align: center;
    align-content: center;
    border-bottom:1px solid #757575;
    background: #fff;
    box-shadow: -11px 0px 32px -8px rgba(0,0,0,0.33);
}
.fileupload:hover {
    color: lightgreen;
    border-bottom: 3px solid lightgreen;
    padding-bottom: 3px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
/* custom scrollbar */
::-webkit-scrollbar {
    width: 20px;
}
  
::-webkit-scrollbar-track {
    background-color: transparent;
}
  
::-webkit-scrollbar-thumb {
    background-color: #ff6961;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}
  
::-webkit-scrollbar-thumb:hover {
    background-color: #d44740;
}

div#listscss {
    border-radius: 10px;
    font-size: 18px;
    color: #ff6961;
    box-shadow: -11px 0px 32px -8px rgba(0,0,0,0.33);
}

div#listscss p {
    font-size: 23px;
    background: #ff6961;
    border-radius: 10px 10px 0px 0px;
}

div#listscss ul li:nth-last-child(1) {
    border-radius: 0px 0px 10px 10px;
}

div#listscss ul {
    border-radius: 0px 0px 9px 9px;
    list-style-type: none;
}

div#listscss ul li:hover {
    background: rgba(0,0,0,0.03);
}
#do:hover {
    color: #ff6961;
    border-bottom: 3px solid #ff6961;
    padding-bottom: 3px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
#watch:hover {
    color: #ff6961;
    border-bottom: 3px solid #ff6961;
    padding-bottom: 3px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
#eat:hover {
    color: #ff6961;
    border-bottom: 3px solid #ff6961;
    padding-bottom: 3px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
#do-selected {
    color: #ff6961;
    border-bottom: 3px solid #ff6961;
    padding-bottom: 3px;
}
#watch-selected {
    color: #ff6961;
    border-bottom: 3px solid #ff6961;
    padding-bottom: 3px;
}
#eat-selected {
    color: #ff6961;
    border-bottom: 3px solid #ff6961;
    padding-bottom: 3px;
}

.checked {
  background: rgba(255, 105, 97, 0.15);
  text-decoration: line-through;
  color: #ff6961;
}

#itemBox div#desc{
    position: absolute;
    bottom: 0;
    right: 0;
    background: #ff6961;
    color:white;
    margin-bottom: 5px;
    font-family: 'Roboto', sans-serif;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: visibility 0s, opacity 0.5s cubic-bezier(0, 0, 0.2, 1);
    transition: visibility 0s, opacity 0.5s cubic-bezier(0, 0, 0.2, 1);
    width: auto;
    padding: 8px 10px;
    visibility: visible;
    text-transform: uppercase;
    letter-spacing: 2px;
}
   
    #itemBox:hover{
        cursor: pointer;
    }

    #itemBox:hover div#desc{
        opacity: 1;
    }