@font-face {
    font-family: jura;
    src: url("../fonts/Jura-Medium.woff") format("woff");
}
@font-face {
    font-family: be-pro;
    src: url(../fonts/BePro-Regular.ttf) format('truetype');
}
@font-face {
    font-family: mono-space;
    src: url(../fonts/MPLUSRounded1c-Light.ttf) format('truetype');
}
@font-face {
    font-family: mono-space2;
    src: url(../fonts/Ubuntu-R.ttf) format('truetype');
}


* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: auto;
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    --regular: 14px;
    --caps: 12px;
    --big: 18px;
    --small: 12px;
    --percent: 1%;
    --d: 0.2s;
    --silver: #a0a0a0;
    --gray: #606060;
    --white: #fff;
    --black: #000;
    --whitesmoke: #f0f0f0;
    --gainsboro: #d0d0d0;
}

body {
    #background: #99CCCC;
    color: #191816;
    text-align: center;
}

.unselectable {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

.top-header {
    margin-top: 15px;
    padding-bottom: 35px;
}

.menu-container {
    position: sticky;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-transform: lowercase;
    margin: 5px auto auto auto;
    width: 700px;
    height: 40px;
    border-radius: 8px;
    box-shadow: 3px 3px lightgray;

    /* https://www.colorzilla.com/gradient-editor/ */
    background: rgb(159,216,239);
    background: -moz-linear-gradient(-45deg, rgba(159,216,239,1) 38%,
              rgba(159,216,239,1) 38%, rgba(228,245,252,1) 66%, rgba(228,245,252,1) 66%);
    background: -webkit-linear-gradient(-45deg, rgba(159,216,239,1) 38%,
              rgba(159,216,239,1) 38%,rgba(228,245,252,1) 66%,rgba(228,245,252,1) 66%);
    background: linear-gradient(135deg, rgba(159,216,239,1) 38%,rgba(159,216,239,1) 38%,
              rgba(228,245,252,1) 66%,rgba(228,245,252,1) 66%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9fd8ef',
              endColorstr='#e4f5fc',GradientType=1 );
}

.main-menu {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 3px;
    font-family: jura;
    font-size: 20px;
    line-height: 15px;
    font-weight: bold;
    overflow: hidden;
    text-align: center;
}

.menu-item {
  display: inline-block;
  z-index: 1;
  padding: 12px 0 10px 0;
}

.main-title {
    font-family: jura;
    font-size: 30px;
    color: blue;
    font-style: bold;
}

.sub-title {
    font-family: jura;
    font-size: 25px;
    color: darkgreen;
    font-style: bold;
}

#display {
    margin: 35px auto auto auto;
}

.box1 {
    font-family: jura;
    display:flex;
    justify-content:center;
    width: 600px;
    height: auto;
    padding: 20px;
    text-align: justify;
    border-radius: 5px;
    border: 2px solid darkgray;
}

.disabled {
    pointer-events:none;
}
.tab5 {
    display:inline-block;
    width: 5px;
}

.href1 {
    font-family: jura;
    font-size: 20px;
    color: coral;
    text-decoration: none;
    font-style: bold;
    line-height: 15px;
    border: 1px solid darkgray;
    padding: 10px;
    border-radius: 10px;
}

/* document page */
.list1 a {
    text-decoration: none;
}
.list1 ul {
    list-style: none;
    text-align: center;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}
.list1 ul li {
    display: inline;
    text-transform: uppercase;
    padding: 0 20px;
    letter-spacing: 5px;
    color: blue;
}
.list1 a:hover {
    text-decoration: underline;
}

.video-thumb {
    width:410px;
    height:300px;
    border-radius: 5px;
    margin: 10px 10px 5px 10px;
    border: 8px groove lightblue !important;
}

.song-title {
    font-family: jura;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 10px 6px 12px;
    font-weight: 900;
    background: aliceblue;
    color: coral;
    top: 0;
    cursor: pointer;
    font-size: 16px;
}
.download {
    letter-spacing: 2px;
    text-transform: none !important;
    font-size: 10px;
    text-decoration: none;
}

#debug {
    padding-left: 10px;
    color: blue;
    font-size: 10px;
    text-align: left;
    background: #e5e5e5;
}

@media (prefers-color-scheme: dark) {
    html {
        --silver: #808080;
        --gray: #c0c0c0;
        --white: #000;
        --black: #fff;
        --whitesmoke: #202020;
        --gainsboro: #404040;
    }
}


/* clocking */
#clock-wrapper {
    position: absolute;
    display: inline-block;
    top: 10px;
    left: 0;
    width: 40%;
    text-align: center;
}

#host {
    position: relative;
    color: gray;
    font-weight: 700;
    font-size: 1em;
    font-family: be-pro, sans-serif;
    padding-bottom: 5px;
}

#clock {
    position: relative;
    height: 1.3em;
    overflow: hidden;
    color: gray;
    font-size: 0.8em;
    transform: scale(0.9, 1.2);
}

.text1, .text3, .digit1, .digit2, .digit4 {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-family: mono-space, sans-serif;
}
.text1 {
    width: 0.30em;
}
.text3 {
    width: 1.8em;
}
.digit1 {
    width: 0.45em;
}
.digit2 {
    width: 0.9em;
}
.digit4 {
    width: 2.2em;
}

.current, .next {
    display: inline-block;
}
.current {
    position: absolute;
    top: -105%; /* need this along with top for id */
}
.next {
    height: 10px;
}
.down {
    transition: transform 940ms linear;
    transform: translateY(105%); /* roll down=100%, up=-100% */
}
.up {
    transition: transform 940ms linear;
    transform: translateY(-105%); /* roll down=100%, up=-100% */
}

  /*
  -- screen min width --
     320px : smartphones, portrait iPhone, portrait 480x320 phones (Android)
     480px : smartphones, Android phones, landscape iPhone
     600px : portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android)
     801px : tablet, landscape iPad, lo-res laptops ands desktops
     1025px: big landscape tablets, laptops, and desktops
     1281px: hi-res laptops and desktops
  */


/* phone portrait */
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
    .videos {
        margin-left: 100px;
    }
    .video-thumb {
        width:210px;
        height:110px;
        margin: 2px 2px 2x 2px;
        border: 2px groove lightblue !important;
    }
    #clock-wrapper {
        transform: scale(0.7);
    }
    #clock {
        width: 68vw;
        color: blue;
    }
}