html{
    height: 100%;
    background: linear-gradient(70deg, black, gray);
}
.text{
    color: white;
    font-family: 'Roboto Condensed', sans-serif;
}
.number{
    color: white;
    font-family: 'Roboto Condensed', sans-serif;
}
.title{
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 900;
    font-size: 90px;
    margin-bottom: 15px;
}
.is{
    font-size: 80px;
    margin-top: 0px;
}
#Display{
    text-align: center;
    justify-content: center;
}
#Display > div{
    display: flex;
    justify-content: center;
}
.TimeCont, .TimeCont2, .TimeCont3{
    height: 100px;
    width: 100px;
    background: linear-gradient(-45deg, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
    margin: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    border-radius: 10px;
}
.TimeCont > h1, .TimeCont2 > h1, .TimeCont3 > h1{
    margin: 0px;
    height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    min-height: 100px;
    color: white;
    font-family: "math";
}
.TimeCont > h2, .TimeCont2 > h2, .TimeCont3 > h2{
    margin: 0px;
    transform: translate(0px, -12px);
    font-size: large;
    color: white;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: small;
}
.TimeCont > div,  .TimeCont2 > div, .TimeCont3 > div{
    min-height: 100px;
    width: 100px;
    position:fixed;
    transform: translate(-2px, 0px);
    border-radius: 12px;
    border: 2px solid transparent;
    background: linear-gradient(45deg,rgb(rgb(0, 0, 0), 0),blue) border-box;
    background-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-border-repeat: no-repeat;
    border-image-repeat: no-repeat;

    -webkit-mask: linear-gradient(#000 10px 10px) padding-box, linear-gradient(#000 100px 100px);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
.subTitle{
    margin: 0px;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}

.TitleCont{
    background: linear-gradient(-45deg, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
    margin: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    border-radius: 10px;
    height: 256px;
    width: 90%;
    margin: auto;
    margin-bottom: 20px;
    margin-top: 10px;
}
.TitleCont > div{
    height: 256px;
    width: calc(90% - 14px);
    position:fixed;
    transform: translate(-2px, 0px);
    border-radius: 12px;
    border: 2px solid transparent;
    background: linear-gradient(45deg,rgb(rgb(0, 0, 0), 0),blue) border-box;
    background-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-border-repeat: no-repeat;
    border-image-repeat: no-repeat;

    -webkit-mask: linear-gradient(#000 10px 10px) padding-box, linear-gradient(#000 100px 100px);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
.TimeCont2{
    height: 60px;
    width: 60px;
}
.TimeCont2 > h1{
    font-size: 20px;
    transform: translate(0px, -20px);
}
.TimeCont2 > h2{
    font-size: 10px;
    transform: translate(0px, -30px);
}
.TimeCont2 > div{
    min-height: 60px;
    width: 60px;
}
.TimeCont3{
    height: 100px;
    width: fit-content;
    min-width: 100px;
    max-width: 300px;
}
.TimeCont3 > h1{
    margin-right: 8px;
    margin-left: 8px;
}
.TimeCont3 > div{
    min-height: 100px;
}