body {
    display: flex;
}

section {
    display: flex;
    flex: 1;
    height: calc(100vh - 2px);
    flex-direction: column;
}

section div {
    position: relative;
    display: flex;
    flex: 1;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 4em;
    font-weight: bold;
    cursor: pointer;
}

section div:not(:last-child) {
    border-bottom: solid 1px var(--border);
}

section div:before {
    position: absolute;
    top: 5px;
    left: 5px;
    content: 'Smudge';
    color: var(--border);
    font-size: 0.3em;
}

#smudge:before {
    content: 'Smudge Timer';
}

#obombo:before {
    content: 'Obambo Timer';
}

#ms:before {
    content: 'Ghost Speed';
}

section div:active {
    background-color: var(--background-secondary);
}

#smudge {
}

#obombo {
    color: var(--gold);
}

#ms {
    color: var(--ghost-green);
}

label[settings] {
    position: fixed;
    top: 10px;
    right: 10px;
    display: block;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 2;
}

label[settings] svg {
    fill: var(--text-primary);
    transition: fill 0.3s;
}

label[settings]:hover svg {
    fill: var(--text-secondary);
}

label[settings] svg path {
    d: path('M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z');
}

#settings:checked ~ label[settings] svg path {
    d: path('M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z');
}

sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    gap: 20px;
    background-color: var(--background-secondary);
}

sidebar content {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: calc(100% - 40px);
    gap: 20px;
    padding: 20px;
}

#settings:checked ~ sidebar {
    display: flex;
}

vcolumn {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

hcolumn {
    display: flex;
    gap: 10px;
    align-items: center;
}

h2 {
    color: var(--primary);
}

h3 {
    font-weight: normal;
}

p {
    color: var(--text-secondary);
}

label[checkbox] {
    position: relative;
    width: 50px;
    height: 20px;
    background-color: var(--text-secondary);
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

label[checkbox]:after {
    position: absolute;
    top: -2.5px;
    left: 0;
    width: 25px;
    height: 25px;
    content: '';
    background-color: var(--primary);
    border-radius: 50px;
    transition: left 0.2s;
}

input[type='checkbox']:checked ~ label[checkbox] {
    background-color: var(--secondary);
}

input[type='checkbox']:checked ~ label[checkbox]:after {
    left: calc(100% - 25px);
}




progress-bar {
    position: relative;
    display: flex;
    width: 100%;
    height: 20px;
    padding: 10px 0px;
    margin: auto;
    align-items: center;
    --seek: 0%;
    --loaded: 0%;
    z-index: 10;
}

bar {
    display: block;
    position: relative;
    width: 100%;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.6);
    transition: height 0.3s;
    cursor: pointer;
}

bar:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    background-color: var(--primary);
}

progress-bar bar:after {
    width: var(--seek);
}

progress-bar:hover bar {
    height: 10px;
}

thumb {
    display: block;
    position: relative;
    top: -100%;
    width: 15px;
    height: 15px;
    aspect-ratio: 1 / 1;
    margin-left: -7.5px;
    background-color: var(--primary);
    transition: width 0.3s, height 0.3s, top 0.3s, margin-left 0.3s;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
    border-radius: 100%;
    z-index: 2;
}

progress-bar thumb {
    left: var(--seek);
}

progress-bar:hover thumb, volume-bar:hover thumb {
    width: 25px;
    height: 25px;
    margin-left: -12.5px;
    top: -80%;
}