@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gugi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+Da+2&display=swap');
@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:wght@100;200;300;400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Offside&display=swap');

@font-face {
    font-family: "Michroma";
    src: url(https://manzdev.github.io/twitch-casio-fx39/michroma.woff2) format("woff2"), url(https://manzdev.github.io/twitch-casio-fx39/michroma.woff) format("woff");
    font-display: swap;
}

@font-face {
    font-family: 'DSEG7';
    src: url('https://mellowmonks.in/demos/mixtape/4/fonts/DSEG7.woff') format('woff'), url('https://mellowmonks.in/demos/mixtape/4/fonts/DSEG7.woff2') format("woff2"),
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
        url('https://mellowmonks.in/demos/mixtape/4/fonts/DSEG7.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
    font-display: swap;
}

* {
    box-sizing: border-box;
}

body {
    background: #668359;
    /* background: url(https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/f4470360064327.5a3a5a50d174b.jpg); */
    background: url('/images/mg.jpg');

    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: visible;
    font-family: 'Source Code Pro', monospace;
}

.dropper {
    position: absolute;
    width: 100%;
    padding: 0px;
    float: left;
    background: none;
    z-index: 101;
}

#drop-zone {
    width: 100%;
    height: 41vh;
    min-height: 41vh;
    max-height: 41vh;
    border: 3px dashed rgba(38, 88, 19, 1);
    border-radius: 0px;
    overflow: hidden;
    font-family: 'Source Code Pro', monospace;
    text-align: center;
    background: #668359;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    margin: auto;
    position: relative;
    color: #876300;
}

#drop-zone p {
    margin: 100px 0 0 0;
    font-family: 'Source Code Pro', monospace;
    font-size: 20px;
    user-select: none;
}

#drop-zone input {
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/*Important*/

#drop-zone.mouse-over {
    background: #396027;
    border: 3px dashed rgba(4, 63, 119, 1);
    color: #7E7E7E;
    transition-duration: 1.5s;
}

#drop-zone.mouse-leave {
    border: 3px dashed rgba(38, 88, 19, 1);
    color: #876300;
}

/*If you dont want the button*/

#clickHere {
    display: inline-block;
    cursor: pointer;
    color: white;
    font-size: 1rem;
    width: 200px;
    border-radius: 0px;
    background-color: #000000;
    padding: 10px;
    margin: 10px 0 0 0;
}

#clickHere:hover {
    background-color: #376199;
}

/* UPLOADED FILES */

.uploadedFiles {
    display: none;
    position: absolute;
    right: 0;
    padding: 0px 0px 0px 5px;
    margin: 0px 0px;
    width: 50%;
    background: #aec6a5;
    height: 41%;
    max-height: 41%;
    z-index: 100;
    overflow: auto;
}

.boxInfo {
    margin: 15px 0 0 0;
    padding: 0 0 0 0;
    background: none;
}

#filename {
    background: #efefef;
    border: 1px solid #265813;
    margin: 0 0 0 0;
    padding: 0px;
    font-size: 14px;
    line-height: 1.5em;
    min-height: 37vh;
    max-height: 37vh;
    overflow-y: scroll;
    color: #000;
}

/*
#filename span {
    font-size: 1.5rem;
    line-height: 1.2rem;
    height: 1.5rem;
    width: 1.5rem;
    text-align: center;
}
*/

/* File extention styling */

#ftext {
    font-family: 'MuseoModerno', cursive;
    background: #ddffda;
    color: #5f685e;
    vertical-align: 0px;
    width: 2.5rem;
    font-size: 0.8rem !important;
    line-height: 0.8rem !important;
    font-weight: 700;
    text-align: center;
    margin: 2px 0 0 0;
    padding: 2px 4px;
    border-radius: 5px;
    float: left;
    width: 2.5rem;
}

/* TOTAL FILES */

#totalFiles {
    font-family: 'Offside', cursive;
    font-weight: 700;
    background: #cbeabd;
    border: 1px solid #769174;
    padding: 5px;
    visibility: hidden;
    user-select: none;
    margin: 10px 0 10px 0px;
}

#totalFilesText {
    display: initial;
}

#totalFilesnum {
    font-family: 'Gugi', cursive;
    font-size: 1.2rem;
}

/* TOTAL TIME */

#totalTime {
    font-family: 'Offside', cursive;
    font-weight: 700;
    background: rgb(53 234 84);
    border: 1px solid rgb(118 145 116);
    padding: 5px;
    visibility: hidden;
    color: #000;
    position: absolute;
    margin: -6px 0 0 0;
    right: 5px;
    user-select: none;
    animation: 1s ease-out 0s 1 fadeIn;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.file-preview {
    background: rgb(99, 8, 8);
    border: 5px solid #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    font-size: 14px;
    margin-top: 5px;
}

/* CLOSE BUTTON */

.closeBtn {
    line-height: 1.25rem !important;
    color: black;
    vertical-align: -3px !important;
    position: relative;
    right: 0px;
    margin: 2px 0px 0px 10px;
    float: left;
}

.closeBtn:hover {
    color: red;
    display: inline-block;
    cursor: pointer;
}

/* PLAYLIST HEADER */

.pl_header_class {
    font-family: 'Monoton', cursive;
    font-size: 1.2rem;
    line-height: 1.4rem;
    text-align: center;
    user-select: none;
}

/* PLAYLIST  ITEMS*/

.playlist {
    border: 0px solid #9d9d9d;
    border-radius: 0px;
    padding: 10px;
    margin: 0px;
    width: 100%;
    overflow: auto;
}

.pgbclicked {
    background: #668359 !important;
    color: #f7ff00;
}

.pldoubleClicked {
    background: #3c5b30 !important;
    color: #f7ff00;
    cursor: pointer;
}

/*
.playlist:Hover {
    background: #668359!important;
    color: #fff;
    cursor: pointer;
    cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/cockroach%20(2).ico"), auto;
}
*/

.playlist:Hover {
    cursor: url("https://mellowmonks.in/demos/mixtape/images/icons/roach.ico"), auto;
}

.playlist:active {
    background: #b1af96 !important;
}

.playlist:nth-child(even) {
    background: #aec6a5;
}

.playlist:nth-child(odd) {
    background: #cbeabd;
}

.playlist span#trackNametext {
    font-family: 'Baloo Da 2', cursive;
    background: none;
    font-size: 1.2rem;
    line-height: 1.4rem;
    padding: 0;
    margin: 0 0 0 10px;
    position: relative;
    white-space: nowrap;
    min-width: 72%;
    max-width: 72%;
    height: auto;
    overflow: hidden;
    float: left;
}

#trackName {
    background: none;
}

.trackTime {
    background: #ffcb39;
}

#trackTimeid {
    font-family: 'MuseoModerno', cursive;
    background: #668359;
    color: #cbeabd;
    position: relative;
    width: 5.2rem;
    right: 0px;
    padding: 2px 5px;
    margin: -2px 0 0 10px;
    float: left;
    font-size: 1.2rem;
    line-height: 1.4rem;
    text-align: center;
}

.playlist span#trackNametext:hover {}

/* AUDIO CONTROLS */

.audioFiles {
    vertical-align: middle;
    margin: 0px 10px 0px 0px;
}

audio {
    /*
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    */
    width: 28%;
    height: 35px;
}

audio::-webkit-media-controls-enclosure {
    border-radius: 5px;
    background-color: #cfcfcf;
}

audio::-webkit-media-controls-mute-button {
    display: none !important;
}

audio::-webkit-media-controls-volume-slider {
    display: none !important;
}

audio::-webkit-media-controls-volume-control-container.closed {
    display: none !important;
}

audio::-webkit-media-controls-volume-control-container {
    display: none !important;
}

audio::-webkit-media-controls-timeline {
    display: none !important
}

audio::-webkit-media-controls-timeline-container {
    display: none !important
}

audio::-webkit-media-controls-enclosure {
    border: 1px solid black;
    border-radius: 5px;
    background-color: #ffcb39;
}

@media screen and (max-width: 650px) {
    .dropper {
        width: 100%;
    }

    #drop-zone {
        height: 70px;
        min-height: 65px;
        max-height: 65px;
    }

    #drop-zone p {
        display: none !important;
    }

    .uploadedFiles {
        width: 100%;
        margin: 85px 0 0 0;
    }

    audio {
        width: 74%
    }

    .playlist {
        text-align: center;
    }

    #totalTime {
        margin: 305px 0 0 0;
        left: 10px;
    }

    /* Drop Zone */
    .drop .cont i {
        display: none;
    }

    .drop .cont .tit {
        display: none;
    }

    .drop .cont .desc {
        display: none;
    }
}

/* new css */

.drop {}

.drop .cont {
    width: 50vw;
    height: auto;
    color: #876300;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    margin: 0% auto;
    padding: 5px 5px 5px 5px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.drop .cont i {
    font-size: 400%;
    color: #cbeabd;
    position: relative;
}

.drop .cont .tit {
    color: #cbeabd;
    font-family: 'Gugi', cursive;
    font-size: 4rem;
    text-transform: uppercase;
}

.drop .cont .desc {
    color: #cbeabd;
    font-family: 'MuseoModerno', cursive;
    font-size: 1.2rem;
}

.drop .cont .browse {
    background-color: rgb(60, 91, 48);
    color: #fff;
    padding: 9px 16px;
    border-radius: 5px;
    margin: 10px 25%;
    font-family: 'Baloo Da 2', cursive;
    letter-spacing: 1px;
    font-size: 1.2rem;
    line-height: 1.4rem;
}

.drop input {}

input:focus, select:focus, textarea:focus, button:focus {
    outline: none;
}

/* SCROLLBAR */

::-webkit-scrollbar {
    background-color: #cbeabd;
    width: 15px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 1px 0 1px rgba(128, 128, 128, 0.384);
}

::-webkit-scrollbar-thumb {
    background: rgba(40, 62, 39, 1);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(40, 62, 39, .71);
}

/* GRAPHIC EQUILIZER */

.eq {
    display: none;
    margin: 0px;
    border: 1px solid;
    border-radius: 0px;
    background-color: #5a8746;
    padding: 10px;
    width: 300px;
    text-align: center;
    font-family: "Open Sans";
    font-size: 12px;
    position: absolute;
    top: 45%;
    left: 0px;
    user-select: none;
}

div.controls:hover {
    color: blue;
    font-weight: bold;
}

div.controls label {
    display: inline-block;
    text-align: center;
    width: 50px;
}

div.controls label, div.controls input, output {
    vertical-align: middle;
    padding: 0;
    margin: 0;
    font-family: "Open Sans", Verdana, Geneva, sans-serif, sans-serif;
    font-size: 12px;
}

/* GRAPHIC EQUILIZER  END*/

/* SCREEN */

.screen {
    background: #011105;
    box-shadow: inset 5px 2px 15px 2px #4a4a4a;
    display: flex;
    justify-content: initial;
    align-items: initial;
    position: absolute;
    width: 50vw;
    height: 30vh;
    z-index: 102;
    top: 41%;
    right: 0;
}

.screen .lcd-container {
    font-family: 'MuseoModerno', cursive;
    font-size: 1.4rem;
    position: relative;
    width: 100%;
    height: 1.4rem;
    display: block;
    justify-content: center;
    padding: 10px;
}

/* TOP BAR */
.screen .lcd-container .tracks-background {
    color: #142525;
    position: absolute;
    font-size: 1.4rem;
    line-height: 1.4rem;
    padding: 0px 5px;
    left: 3%;
}

.screen .lcd-container .tracks-count {
    color: #09d2bc;
    text-shadow: 0 0 1px #0b6b60aa, 0 0 2px #3aa399aa, 0 0 3px #66b1a8aa, 0 0 4px #1b887baa;
    position: absolute;
    font-size: 1.4rem;
    line-height: 1.4rem;
    left: 17%;
}

.screen .lcd-container .time-background {
    color: #142525;
    position: absolute;
    font-size: 1.4rem;
    line-height: 1.4rem;
    right: 30%;
    padding: 0px 5px;
}

.screen .lcd-container .time-count {
    color: #09d2bc;
    text-shadow: 0 0 1px #0b6b60aa, 0 0 2px #3aa399aa, 0 0 3px #66b1a8aa, 0 0 4px #1b887baa;
    position: absolute;
    font-size: 1.4rem;
    line-height: 1.4rem;
    right: 3%;
}

.screen::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(50deg, transparent 0% 0%, #35741322 0% 100%, transparent 100% 100%);
}

.screen .lcd-container .deck-background {
    position: absolute;
    font-family: 'DSEG7';
    background: none;
    color: #142525;
    font-size: 4rem;
    line-height: 4.2rem;
    margin: 12% 0px 0px 0px;
    padding: 0px 0px;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.screen .lcd-container .deck-time {
    position: absolute;
    font-family: 'DSEG7';
    background: none;
    color: #09d2bc;
    text-shadow: 0 0 1px #0b6b60aa, 0 0 2px #3aa399aa, 0 0 3px #66b1a8aa, 0 0 4px #1b887baa;
    font-size: 4rem;
    line-height: 4.2rem;
    margin: 12% 0px 0px 0px;
    padding: 0px 0px;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    z-index: 110;
}


/* TIME EXCEED STATUS */
.screen .lcd-container .timeExceeded {
    font-family: 'Baloo Da 2', cursive;
    background: red;
    color: #142525;

    position: absolute;
    font-size: 1.2rem;
    line-height: 1.2rem;
    margin: 0px 0px 0px 0px;
    padding: 0px 5px;
    /* top: 0%; */
    left: 40%;
    transform: translateX(-20%);

    /* display: none; */
}


.timeExceededBlink {
    animation: exceededBlink 1s infinite;
}

@keyframes exceededBlink {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* PLAYER STATES */
/* PLAY  STATE */

.screen .lcd-container .play-background {
    font-family: 'Baloo Da 2', cursive;
    color: #142525;
    position: absolute;
    font-size: 1rem;
    line-height: 1rem;
    margin: 11% 0px 0px 0px;
    padding: 0px 5px;
    top: 0%;
    left: 28%;

    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.screen .lcd-container .play-screen {
    font-family: 'Baloo Da 2', cursive;
    color: #e7820f;
    text-shadow: 0 0 1px #e38113f0, 0 0 2px #7c5d0ced, 0 0 3px #e7820faa, 0 0 4px #ff8700aa;
    font-size: 1rem;
    line-height: 1rem;
    position: absolute;
    margin: 11% 0px 0px 0px;
    padding: 0px 5px;
    top: 0%;
    left: 28%;
    z-index: 110;

    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

/* PAUSE STATE */
.screen .lcd-container .pause-background {
    font-family: 'Baloo Da 2', cursive;
    color: #142525;
    position: absolute;
    font-size: 1rem;
    line-height: 1rem;
    margin: 14% 0px 0px 0px;
    padding: 0px 5px;
    top: 0%;
    left: 28%;

    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.screen .lcd-container .pause-screen {
    font-family: 'Baloo Da 2', cursive;
    color: #e7820f;
    text-shadow: 0 0 1px #e38113f0, 0 0 2px #7c5d0ced, 0 0 3px #e7820faa, 0 0 4px #ff8700aa;
    position: absolute;
    font-size: 1rem;
    line-height: 1rem;
    margin: 14% 0px 0px 0px;
    padding: 0px 5px;
    top: 0%;
    left: 28%;

    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}


.pausescreenBlink {
    animation: blinkscreenPause 1s infinite;
}

@keyframes blinkscreenPause {
    0% {
        color: #142525;
        text-shadow: none;
    }

    50% {
        color: #e7820f;
        text-shadow: 0 0 1px #e38113f0, 0 0 2px #7c5d0ced, 0 0 3px #e7820faa, 0 0 4px #ff8700aa;
    }

    100% {
        color: #142525;
        text-shadow: none;
    }
}

/* STOP STATE */
.screen .lcd-container .stop-background {
    font-family: 'Baloo Da 2', cursive;
    color: #142525;
    position: absolute;
    font-size: 1rem;
    line-height: 1rem;
    margin: 17.2% 0px 0px 0px;
    padding: 0px 5px;
    top: 0%;
    left: 28.4%;

    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.screen .lcd-container .stop-screen {
    font-family: 'Baloo Da 2', cursive;
    color: #e7820f;
    text-shadow: 0 0 1px #e38113f0, 0 0 2px #7c5d0ced, 0 0 3px #e7820faa, 0 0 4px #ff8700aa;
    position: absolute;
    font-size: 1rem;
    line-height: 1rem;
    margin: 17.2% 0px 0px 0px;
    padding: 0px 5px;
    top: 0%;
    left: 28.4%;

    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

/* TAPE TYPE */
.screen .lcd-container .tape-type-text {
    font-family: 'Baloo Da 2', cursive;
    color: #e7820f;
    text-shadow: 0 0 1px #e38113f0, 0 0 2px #7c5d0ced, 0 0 3px #e7820faa, 0 0 4px #ff8700aa;
    position: absolute;
    font-size: 1rem;
    line-height: 1rem;
    margin: 10% 0px 0px 0px;
    padding: 0px 5px;
    top: 0%;
    right: 20%;

    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.screen .lcd-container .tape-type {
    font-family: 'Baloo Da 2', cursive;
    color: #e7820f;
    text-shadow: 0 0 1px #e38113f0, 0 0 2px #7c5d0ced, 0 0 3px #e7820faa, 0 0 4px #ff8700aa;
    position: absolute;
    margin: 8.4% 0px 0px 0px;
    padding: 0;
    right: 1%;
    list-style: none;

    -webkit-transform: translateX(-25%) translateY(-50%);
    -moz-transform: translateX(-25%) translateY(-50%);
    transform: translateX(-25%) translateY(-50%);
}

.screen .lcd-container .tape-type li {
    position: relative;
    float: left;
    width: 25px;
    height: 1.2rem;
    text-align: center;
    color: #b2b2b2;
    font-size: 1rem;
    line-height: 1.4rem;
    cursor: pointer;
    /* background: red; */
    margin: 0px 2px 0px 2px;
}

.tapetypeSelected {
    background-color: green;
}

.tapeTypeblink {
    animation: tapeBlinker 1s infinite;

}


@keyframes tapeBlinker {
    0% {
        background-color: black;
    }

    50% {
        background-color: red;
    }

    100% {
        background-color: black;
    }
}

/* SONG GAP */
fieldset {
    position: absolute;
    border: 1px solid #e7820f85;
    box-sizing: border-box;
    box-shadow: 0 0 1px #e38113f0, 0 0 2px #7c5d0ced, 0 0 3px #e7820faa, 0 0 4px #ff8700aa;

    grid-area: 1 / 1;
    padding: 4.5%;
    width: 29%;
    right: 2%;
    top: 0%;
    margin: 12.5% 0 0 0;
}

legend {
    font-family: 'Baloo Da 2', cursive;
    text-transform: uppercase;
    color: #e7820f;
    text-shadow: 0 0 1px #e38113f0, 0 0 2px #7c5d0ced, 0 0 3px #e7820faa, 0 0 4px #ff8700aa;
    font-size: 1rem;
    line-height: 1rem;
    margin: auto;
    /* to center */
    padding: 0 4px;
}

.screen .lcd-container .song-gap-text {
    display: none;
    font-family: 'Baloo Da 2', cursive;
    color: #e7820f;
    text-shadow: 0 0 1px #e38113f0, 0 0 2px #7c5d0ced, 0 0 3px #e7820faa, 0 0 4px #ff8700aa;
    position: absolute;
    font-size: 1rem;
    line-height: 1rem;
    margin: 14.5% 0px 0px 0px;
    padding: 0px 5px;
    top: 0%;
    right: 21.3%;

    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.screen .lcd-container .song-gap {
    font-family: 'Baloo Da 2', cursive;
    color: #e7820f;
    text-shadow: 0 0 1px #e38113f0, 0 0 2px #7c5d0ced, 0 0 3px #e7820faa, 0 0 4px #ff8700aa;
    position: absolute;
    margin: 15.5% 0px 0px 0px;
    padding: 0;
    right: 1%;
    list-style: none;

    -webkit-transform: translateX(-11%) translateY(-50%);
    -moz-transform: translateX(-11%) translateY(-50%);
    transform: translateX(-11%) translateY(-50%);
}

.screen .lcd-container .song-gap li {
    position: relative;
    float: left;
    width: 25px;
    height: 1.2rem;
    text-align: center;
    color: #b2b2b2;
    font-size: 1rem;
    line-height: 1.4rem;
    cursor: pointer;
    /* background: red; */
    margin: 0px 2px 0px 2px;
}

.gapSelected {
    background-color: green;
}


/* INTERVAL TALLY */
.screen .lcd-container .intervalTally-text {
    font-family: 'Baloo Da 2', cursive;
    color: #e7820f;
    text-shadow: 0 0 1px #e38113f0, 0 0 2px #7c5d0ced, 0 0 3px #e7820faa, 0 0 4px #ff8700aa;
    position: absolute;
    font-size: 1rem;
    line-height: 1rem;
    margin: 21.3% 0px 0px 0px;
    padding: 0px 5px;
    top: 0%;
    right: 8%;

    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.screen .lcd-container .intervalTally-background {
    font-family: 'DSEG7';
    color: #142525;
    position: absolute;
    font-size: 1rem;
    line-height: 1rem;
    margin: 20% 0px 0px 0px;
    padding: 0px 5px;
    top: 0%;
    right: 15%;
}

.screen .lcd-container .intervalTally-screen {
    font-family: 'DSEG7';
    color: green;
    text-shadow: 0 0 1px #044a23, 0 0 2px #09870873, 0 0 3px #0a4f0657, 0 0 4px #0c974b8c;
    position: absolute;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1rem;
    margin: 20% 0px 0px 0px;
    padding: 0px 5px;
    top: 0%;
    right: 15%;
}

/* TIME WITH GAP */
.screen .lcd-container .final-text {
    font-family: 'Baloo Da 2', cursive;
    color: #e7820f;
    text-shadow: 0 0 1px #e38113f0, 0 0 2px #7c5d0ced, 0 0 3px #e7820faa, 0 0 4px #ff8700aa;
    position: absolute;
    font-size: 1rem;
    line-height: 1rem;
    margin: 24.3% 0px 0px 0px;
    padding: 0px 5px;
    top: 0%;
    left: 45%;

    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.screen .lcd-container .final-background {
    font-family: 'DSEG7';
    color: #142525;
    position: absolute;
    font-size: 1rem;
    line-height: 1rem;
    margin: 24% 0px 0px 0px;
    padding: 0px 5px;
    top: 0%;
    left: 55%;

    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.screen .lcd-container .final-screen {
    font-family: 'DSEG7';
    /* color: green;
    text-shadow: 0 0 1px #044a23, 0 0 2px #09870873, 0 0 3px #0a4f0657, 0 0 4px #0c974b8c; */
    position: absolute;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1rem;
    margin: 24% 0px 0px 0px;
    padding: 0px 5px;
    top: 0%;
    left: 55%;

    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.finalGoot {
    color: green;
    text-shadow: 0 0 1px #044a23, 0 0 2px #09870873, 0 0 3px #0a4f0657, 0 0 4px #0c974b8c;
}

.finalExceeded {
    color: red;
    text-shadow: 0 0 1px #d31212, 0 0 2px #d1171773, 0 0 3px #4f060657, 0 0 4px #970c0c8c;
    animation: exceededBlink 1s infinite;
}

/* SCREEN END */

/* AUDIO PLAYER */

#playControls {
    background: none;
    position: absolute;
    width: 50vw;
    top: 70%;
    right: 0;
    padding: 1rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 105;
    max-height: 15vh;
}

.player:hover {
    cursor: pointer;
}

/* 2 */

button {
    border: none;
    display: inline-block;
    font-size: 1rem;
    cursor: pointer;
}

.seek {
    width: 5rem !important;
}

.pauseBlink {
    animation: blinkButton 1s infinite;
}

@keyframes blinkButton {
    0% {
        color: hsla(0, 0%, 20%, 1);
        text-shadow: hsla(0, 0%, 40%, .5) 0 -1px 0, hsla(0, 0%, 100%, .6) 0 2px 1px;
        background-color: hsl(0, 0%, 90%);
        box-shadow: inset hsla(0, 0%, 15%, 1) 0 0px 0px 4px,
            /* border */
            inset hsla(0, 0%, 15%, .8) 0 -1px 5px 4px,
            /* soft SD */
            inset hsla(0, 0%, 0%, .25) 0 -1px 0px 7px,
            /* bottom SD */
            inset hsla(0, 0%, 100%, .7) 0 2px 1px 7px,
            /* top HL */
            rgba(71, 49, 49, 0.15) 0 -5px 6px 4px,
            /* outer SD */
            hsla(0, 0%, 100%, 0) 0 5px 6px 4px;
        /* outer HL */
    }

    50% {
        color: hsl(118, 100%, 52%);
        box-shadow: inset rgb(20, 116, 1) 0 0px 0px 4px,
            /* border */
            inset hsla(210, 100%, 15%, .4) 0 -1px 5px 4px,
            /* soft SD */
            inset hsla(210, 100%, 20%, .25) 0 -1px 0px 7px,
            /* bottom SD */
            inset hsla(210, 100%, 100%, .7) 0 2px 1px 7px,
            /* top HL */
            hsla(210, 100%, 75%, .8) 0 0px 3px 2px,
            /* outer SD */
            hsla(210, 50%, 40%, .25) 0 -5px 6px 4px,
            /* outer SD */
            hsla(210, 80%, 95%, 0) 0 5px 6px 4px;
        /* outer HL */
    }

    100% {
        color: hsla(0, 0%, 20%, 1);
        text-shadow: hsla(0, 0%, 40%, .5) 0 -1px 0, hsla(0, 0%, 100%, .6) 0 2px 1px;
        background-color: hsl(0, 0%, 90%);
        box-shadow: inset hsla(0, 0%, 15%, 1) 0 0px 0px 4px,
            /* border */
            inset hsla(0, 0%, 15%, .8) 0 -1px 5px 4px,
            /* soft SD */
            inset hsla(0, 0%, 0%, .25) 0 -1px 0px 7px,
            /* bottom SD */
            inset hsla(0, 0%, 100%, .7) 0 2px 1px 7px,
            /* top HL */
            rgba(71, 49, 49, 0.15) 0 -5px 6px 4px,
            /* outer SD */
            hsla(0, 0%, 100%, 0) 0 5px 6px 4px;
        /* outer HL */
    }
}

.metal {
    margin: 0 5px;
    position: relative;
    outline: none;
    text-align: center;
    color: hsla(0, 0%, 20%, 1);
    text-shadow: hsla(0, 0%, 40%, .5) 0 -1px 0, hsla(0, 0%, 100%, .6) 0 2px 1px;
    background-color: hsl(0, 0%, 90%);
    box-shadow: inset hsla(0, 0%, 15%, 1) 0 0px 0px 4px,
        /* border */
        inset hsla(0, 0%, 15%, .8) 0 -1px 5px 4px,
        /* soft SD */
        inset hsla(0, 0%, 0%, .25) 0 -1px 0px 7px,
        /* bottom SD */
        inset hsla(0, 0%, 100%, .7) 0 2px 1px 7px,
        /* top HL */
        rgba(71, 49, 49, 0.15) 0 -5px 6px 4px,
        /* outer SD */
        hsla(0, 0%, 100%, 0) 0 5px 6px 4px;
    /* outer HL */
    transition: color .2s;
    font-family: 'Gugi', cursive;
    font-weight: 700;
}

.radial.metal {
    width: 7rem;
    height: auto;
    line-height: 40px;
    border-radius: 0.5em;
    padding: 5px 10px;
    background-image: -webkit-radial-gradient(50% 0%, 8% 50%, hsla(0, 0%, 100%, .5) 0%, hsla(0, 0%, 100%, 0) 100%), -webkit-radial-gradient(50% 100%, 12% 50%, hsla(0, 0%, 100%, .6) 0%, hsla(0, 0%, 100%, 0) 100%), -webkit-radial-gradient(0% 50%, 50% 7%, hsla(0, 0%, 100%, .5) 0%, hsla(0, 0%, 100%, 0) 100%), -webkit-radial-gradient(100% 50%, 50% 5%, hsla(0, 0%, 100%, .5) 0%, hsla(0, 0%, 100%, 0) 100%), -webkit-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 3%, hsla(0, 0%, 0%, .1) 3.5%), -webkit-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 6%, hsla(0, 0%, 100%, .1) 7.5%), -webkit-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 1.2%, hsla(0, 0%, 100%, .2) 2.2%), -webkit-radial-gradient(50% 50%, 200% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);
}

.metal.radial:before, .metal.radial:after {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    /* fake conical gradients */
    background-image: -webkit-radial-gradient(50% 0%, 10% 50%, hsla(0, 0%, 0%, .1) 0%, hsla(0, 0%, 0%, 0) 100%), -webkit-radial-gradient(50% 100%, 10% 50%, hsla(0, 0%, 0%, .1) 0%, hsla(0, 0%, 0%, 0) 100%), -webkit-radial-gradient(0% 50%, 50% 10%, hsla(0, 0%, 0%, .1) 0%, hsla(0, 0%, 0%, 0) 100%), -webkit-radial-gradient(100% 50%, 50% 06%, hsla(0, 0%, 0%, .1) 0%, hsla(0, 0%, 0%, 0) 100%);
}

.metal.radial:before {
    transform: rotate(65deg);
}

.metal.radial:after {
    transform: rotate(-65deg);
}

.metal:active {
    color: hsl(118, 100%, 52%);
    text-shadow: hsla(210, 100%, 20%, .3) 0 -1px 0, hsl(210, 100%, 85%) 0 2px 1px, hsla(200, 100%, 80%, 1) 0 0 5px, hsla(210, 100%, 50%, .6) 0 0 20px;
    box-shadow: inset rgb(20, 116, 1) 0 0px 0px 4px,
        /* border */
        inset hsla(210, 100%, 15%, .4) 0 -1px 5px 4px,
        /* soft SD */
        inset hsla(210, 100%, 20%, .25) 0 -1px 0px 7px,
        /* bottom SD */
        inset hsla(210, 100%, 100%, .7) 0 2px 1px 7px,
        /* top HL */
        hsla(210, 100%, 75%, .8) 0 0px 3px 2px,
        /* outer SD */
        hsla(210, 50%, 40%, .25) 0 -5px 6px 4px,
        /* outer SD */
        hsla(210, 80%, 95%, 0) 0 5px 6px 4px;
    /* outer HL */
}

.metalactive {
    color: hsl(118, 100%, 52%);
    text-shadow: hsla(210, 100%, 20%, .3) 0 -1px 0, hsl(210, 100%, 85%) 0 2px 1px, hsla(200, 100%, 80%, 1) 0 0 5px, hsla(210, 100%, 50%, .6) 0 0 20px;
    box-shadow: inset rgb(20, 116, 1) 0 0px 0px 4px,
        /* border */
        inset hsla(210, 100%, 15%, .4) 0 -1px 5px 4px,
        /* soft SD */
        inset hsla(210, 100%, 20%, .25) 0 -1px 0px 7px,
        /* bottom SD */
        inset hsla(210, 100%, 100%, .7) 0 2px 1px 7px,
        /* top HL */
        hsla(210, 100%, 75%, .8) 0 0px 3px 2px,
        /* outer SD */
        hsla(210, 50%, 40%, .25) 0 -5px 6px 4px,
        /* outer SD */
        hsla(210, 80%, 95%, 0) 0 5px 6px 4px;
    /* outer HL */
}

/* AUDIO PLAYER END */

/* SETTINGS */

#settings {
    /* background: red; */
    position: absolute;
    width: 50vw;
    height: auto;
    min-height: 23%;
    top: 41%;
    left: 0;
    z-index: 110;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    padding: 10px;
}

/* TAPE SELECTOR */

#tapeSelector {
    /* background: violet; */
    padding: 10px;
    border: 3px solid #3a3a3a;
    min-height: 15vh;
    width: 48%;
}


#tapeSelector2 {
    padding: 10px;
    border: 3px solid #3a3a3a;
    min-height: 15vh;
    width: 48%;
}

/* INTERVAL */

#intervalPanel {
    /* background: yellowgreen; */
    padding: 10px;
    border: 3px solid #3a3a3a;
    margin: 0px 0 0 0;
    min-height: 15vh;
    width: 48%;
}

#intervalText {
    color: #2a2a2a;
    font-family: 'Baloo Da 2', cursive;
    text-align: center;
    font-weight: 800;
    font-size: 1.2rem;
    line-height: 1.4rem;
    margin: 0px 15px 0px 15px;
    text-shadow: hsl(0deg 0% 40% / 50%) 0 -1px 0, hsl(0deg 0% 100% / 60%) 0 2px 1px;
}

#intervalinfo {
    color: #2a2a2a;
    font-family: 'Baloo Da 2', cursive;
    text-align: center;
    font-weight: 800;
    font-size: 1.2rem;
    line-height: 1.4rem;
    margin: 10px 15px 0px 15px;
    text-shadow: hsl(0deg 0% 40% / 50%) 0 -1px 0, hsl(0deg 0% 100% / 60%) 0 2px 1px;
}

/* SETTINGS END */