* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    font-family: "Inter", system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    /* font-size: 16px; */
    font-optical-sizing: auto;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;

    --base-color: rgb(255, 255, 255);
    --text-color: rgb(55, 53, 48);
    /* --secondary-text: rgba(55, 53, 48, 0.6); */
    --secondary-text: rgb(120, 115, 111);
    --accent-color: rgb(8, 127, 231);
    --bar-color: rgb(55, 53, 48);
    --bar-bg-color: rgba(55, 53, 48, 0.2);

    --button-hover: rgba(128, 128, 128, 0.15);
    --button-active: rgba(128, 128, 128, 0.35);
}

.dark-theme-colors {
    --base-color: rgb(25, 25, 25);
    --text-color: rgb(212, 212, 212);
    --secondary-text: rgba(212, 212, 212, 0.6);
    /* --accent-color: rgb(32, 139, 254); */
    --accent-color: #447ACB;
    --bar-color: rgb(212, 212, 212);
    --bar-bg-color: rgba(212, 212, 212, 0.2);

    --button-hover: rgba(128, 128, 128, 0.15);
    --button-active: rgba(128, 128, 128, 0.35);
}

html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    width: 70vw;
    margin: 0 auto;
    min-height: 100%;
    /* color: #ffffff; */
    color: var(--text-color);
    background: var(--base-color);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    transition: background 0.4s, color 0.4s;
}

a {
    color: var(--accent-color);
    text-decoration: none;
}

a:active {
    text-decoration: underline;
}

.header {
    margin: 1em 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.header h1 {
    font-size: 2em;
    font-weight: 300;
}

#theme-button {
    padding: 0;
    margin: 0;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 100%;
    /* background: rgba(128, 128, 128, 0.0); */
    background: var(--base-color);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.4s;
}

#theme-button:hover {
    background: var(--button-hover);
}

#theme-button:active {
    background: var(--button-active);
}

#lighttheme,
#darktheme {
    fill: var(--text-color);
    width: 50%;
    /* opacity: 75%; */
    pointer-events: none;
}

#lighttheme {
    display: none;
}

.containers {
    display: flex;
    flex-direction: column;
}

.container-1 {
    display: flex;
    flex-direction: column;
}

.s-container {
    display: flex;
    flex-direction: column;
    margin: 0.875em 0;
}

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

.content p {
    font-size: 1em;
    font-weight: 500;
}

.content p:last-child {
    cursor: help;
}

.content h2 {
    font-weight: 300;
}

.col p {
    font-weight: 500;
    font-size: 0.875em;
    color: var(--secondary-text);
}

.col p:last-child {
    cursor: help;
}

/* Progress bar design */
.bar {
    display: block;
    width: 100%;
    height: 6px;
    /* background: #bb86fc26; */
    background: var(--bar-bg-color);
    margin: 0.5em 0;
    border-radius: 3.125em;
    overflow: hidden;
}

.bar span {
    float: left;
    height: 100%;
    border-radius: 3.125em;
    background: var(--bar-color);
    transition: width;
    transition-duration: 1s;
}

.progress {
    width: 0;
}

/* Footer */
.footer,
.container-2 {
    font-weight: 500;
    color: var(--secondary-text);
}

.footer {
    font-size: 0.875em;
    margin: 1em 0;
}

.container-2 {
    display: none;
    font-size: 1em;
    margin: 0.875em 0;
}

.container-2 p:nth-child(2) {
    margin-top: 1em;
}

/* Responsive screen tablets */
@media screen and (min-width: 601px) {
    body {
        width: 70vw;
    }
}

/* Responsive screen Laptops */

@media screen and (min-width: 770px) {
    body {
        /* width: 60vw; */
        width: 70vw;
    }

    .containers {
        flex-direction: row;
        /* align-items: center; */
    }

    .container-1 {
        width: 35vw;
    }

    .container-2 {
        display: block;
        margin-left: 2em;
        width: 35vw;
    }

    .footer {
        display: none;
    }
}

/* Responsive screen PC */

@media screen and (min-width: 994px) {
    body {
        width: 60vw;
        font-size: 19px;
    }

    .container-1 {
        width: 30vw;
    }

    .container-2 {
        width: 30vw;
    }

    .bar {
        height: 7px;
    }
}

/* Responsive screen less than 375px */
@media screen and (max-width: 370px) {
    body {
        font-size: 14px;
    }

    .bar {
        height: 5px;
    }
}

@media screen and (max-width: 350px) {
    body {
        font-size: 12px;
    }

    .bar {
        height: 4px;
    }
}