popup.css

:root {
    --light-gray: #f3f3f3e5;
    --dark-gray: #d9d9d9e5;
    --light-gray2: #ccccccff;
    --dark-gray2: #666666ff;
    --gold: #d6a313ff;
}

* {
    margin: 0;
    padding: 0;
}

body {
    width: 300px;
    height: 500px;
    background-image: url("images/background.svg");
    overflow: hidden;
    z-index: -1;
}

body > div {
    width: 100%;
    height: 100px;
}

#section-1, #section-3, #section-5 {
    background: var(--light-gray);
}

#section-2, #section-4 {
    background: var(--dark-gray);
}

/* temporary */
body {
    height: 400px;
}

#section-5 {
    background: var(--dark-gray);
}

#section-1 {
    display: flex;
    align-items: center;
    justify-content: center;
}

#title, #switch {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

#title #logo {
    width: 50px;
    margin: 0 2px;
}

#title h1 {
    font-family: 'IBM Plex Mono';
    font-size: 17.5px;
    font-weight: 500;
    margin: 0 2px;
}

.switch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 35px;
    background: var(--gold);
    margin: 0 2px;
}

.switch-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 67px;
    height: 27px;
    background: #fff;
}

#section-1 .switch-box {
    cursor: pointer;
}

body.master .switch-box {
    cursor: pointer;
}

.c1, .c2 {
    width: 26px;
    height: 18px;
    margin-top: 1px;
    transition: all 1s ease;
}

.c1 {
    content: url("images/off-on.png")
}

.c2 {
    margin-left: 4px;
    content: url("images/on-off.png");
}

body.master .c1.master, body.enableAltText .c1.enableAltText, body.displayAltText .c1.displayAltText, body.darkMode .c1.darkMode, body.nightMode .c1.nightMode, body.colourblind .c1.colourblind {
    content: url("images/off-off.png");
}

body.master .c2.master, body.enableAltText .c2.enableAltText, body.displayAltText .c2.displayAltText, body.darkMode .c2.darkMode, body.nightMode .c2.nightMode, body.colourblind .c2.colourblind {
    content: url("images/on-on.png");
}

#section-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#section-3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-row .subtitle {
    font-family: 'Ubuntu';
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 10px;
}

.section-row .subtitle p {
    font-size: 12.5px;
}

.section-row .switch {
    transform: scale(0.75);
}


#section-4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    margin: 7px 14px;
    z-index: 1;
}

.slider-bar {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 22px;
    border-radius: 10px;
    background: #fff;
    /* outline: solid 3px var(--gold); */
    opacity: 0.75;
    transition: opacity .2s;
    -webkit-transition: .2s;
    z-index: 2;
}

body.master .slider-bar:hover {
    opacity: 1;
}

.slider-bar::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 25px;
    height: 16px;
    /* border-radius: 50%; */
    /* transform: rotate(45deg); */
    background: center/cover no-repeat url("images/slider.png");
    cursor: default;
    z-index: 3;
}

body.master .slider-bar::-webkit-slider-thumb {
    cursor: pointer;
}

#section-5 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#section-5 .subtitle {
    flex-direction: column;
    align-items: flex-start;
}

#section-5 .subtitle p:first-child {
    margin-bottom: 2.5px;
}

#section-5 .section-row:nth-child(2) {
    justify-content: center;
}

#section-5 .footer {
    width: 75%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
    margin: 10px 5px 0;
    text-decoration: none;
    cursor: pointer;;
}

#section-5 .footer p {
    font-family: 'Ubuntu';
    font-size: 12px;
    /* text-decoration: underline; */
    color: #706000;
}

#section-5 .footer #new {
    width: 17px;
    padding-left: 5px;
}