:root {
--height: 36px;
--font-size: 21px;
}
.timermain {
display: flex;
flex-direction: row;
text-align: center;
width: fit-content;
box-sizing: border-box;
background: linear-gradient(180deg, #000000 0%, #242424 100%);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
border-radius: 8px;
padding: 10px;
justify-content: center;
align-items: center;
row-gap: 14px;
column-gap: 14px;
}
.timermain.outer {
background: linear-gradient(180deg, #CCCCCC 0%, #505050 100%);
padding: 1px;
position: absolute;
right: 20px;
top: -27px;
z-index: 100;
}
.timerholder {
display: flex;
justify-content: space-between;
width: fit-content;
}
.timerholder div.outer {
padding: 1px;
position: relative;
height: var(--height);
background: linear-gradient(180deg, #CCCCCC 0%, #505050 100%);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin-left:2px;
}
.timerholder div.number {
color: #fff;
font-size: var(--font-size);
text-align: center;
height: calc(var(--height) - 2px);
background: linear-gradient(180deg, #3E3D3D 0%, #000000 100%);
padding: 0 4px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.timerholder .seperator {
content: ":";
width: 10px;
height: calc(var(--height) - 4px);
display: inline-block;
color: #fff;
font-size: var(--font-size);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.timermain .countersponsor {
display: block;
clear: both;
}
.timermain .countersponsor img {
width: 100%;
max-width: inherit;
width:auto;
margin-bottom:0;
max-width: 106px;
}
@media screen and (max-width: 600px) {
:root {
--height: 31px;
--font-size: 18px;
}
.timerholder .seperator {
width:10px;
}
.timermain.outer {
top: -33px;
}
.timermain .countersponsor img {
width: 100px;
}
}