@charset "UFT-8";
@import url('https://fonts.googleapis.com/css2?family=Lora:ital@1&family=Mea+Culpa&display=swap');

html{
    height: 100%;
    padding: 0;
}

body{
    height:100%;
    margin: 0;
    overflow: false;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

#div1{
    height: 100%;
    width: 100%;
    padding: auto auto;
    
    font-family: 'Mea Culpa', cursive;
    text-align: center;
    color: white; /*font's color*/
    text-shadow: blue 5px -4px 1em;
    margin: 0;
    background-image: url('./image/bgr.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    display: table;
}

#div2{
    display: table-cell;
    vertical-align: bottom;
}

#countdown{
    margin: auto auto;
    margin-bottom: 8vh;
    list-style: none;
    display: inline-flex;
}

.timeleft{
    margin: 5px 0 5px 0;
    padding: 10px;
    font-family: 'Lora', serif;
    font-size: 9vw;
    font-weight: bolder;
    color:white;
    text-align: right;
    background-color: transparent;
    height: 1em;
    border-radius: 20px;
}

.lableTL{
    margin: 5px 0 5px 0;
    padding: 10px;
    font-family: 'Mea Culpa', cursive;
    font-size: 7.5vw;
    font-style: italic;
    text-align: left;    
}

@media screen and (orientation: portrait) {
    #countdown{
        flex-wrap: wrap;
    }

    .timeleft{
        width: 45%;
    }

    .lableTL{
        min-width: 15%;
    }
}

#btnPlayPause{
    height: 8vh;
    width: auto;
    right: 20px;
    bottom: 20px;
    position: fixed;
    z-index: 999;
    opacity: 50%;
    border-radius: 8vh;
}

#btnPlayPause:hover{
    opacity: 100%;
}