@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --color-highlighter   : hsl(3, 86%, 64%);
    --color-text          : hsl(0, 0%, 93%);
    --color-text-highlight: hsl(227, 75%, 14%);
    --color-topbar-block  : hsl(226, 25%, 17%);
    --color-container     : hsl(225, 23%, 24%);
    --color-border        : hsl(226, 11%, 37%);
    --color-toggle        : hsl(226, 11%, 37%);
    --color-toggle-before : hsl(200, 60%, 99%);
    --color-description   : hsl(0 0% 62.96%);
    --color-theme-container:hsl(225, 23%, 24%);
    --color-theme-hover-container:hsl(227, 10%, 35%);
    --color-selector-hover:hsl(227, 10%, 35%);
    --bg                  : linear-gradient(180deg, #040918 0%, #091540 100%);
}

.L1 {
    --color-highlighter   : hsl(3, 77%, 44%);
    --color-text          : hsl(227, 75%, 14%);
    --color-text-highlight: hsl(0, 0%, 93%);
    --color-topbar-block  : hsl(200, 60%, 99%);
    --color-container     : hsl(200, 60%, 99%);
    --color-border        : hsl(0, 0%, 89%);
    --color-toggle        : hsl(210, 2%, 75%);
    --color-toggle-before : hsl(200, 60%, 99%);
    --color-description   : hsl(0 0% 62.96%);
    --color-theme-container:hsl(0, 0%, 95%);
    --color-theme-hover-container:hsl(0, 0%, 80%);
    --color-selector-hover:hsl(0, 0%, 96%);
    --bg                  : linear-gradient(180deg, #EBF2FC 0%, #EEF8F9 100%);
}

body {
    background     : var(--bg);
    color          : var(--color-text);
    display        : flex;
    justify-content: center;
    font-family    : "Noto Sans", sans-serif;
    background-attachment: fixed;
}

#logo-23 {
    fill: var(--color-highlighter);
}

#logo-24 {
    fill: var(--color-text);
}
#logo-25{
    stroke: var(--color-text);
}
.description {
    color: var(--color-description);
}

.whole-container {
    display        : flex;
    justify-content: center;
    flex-direction : column;
    width          : 60vw;
}

.topbar {
    height          : max-content;
    display         : flex;
    background-color: var(--color-topbar-block);
    padding         : 0.75rem;
    border-radius   : 1rem;
    width           : 100%;
    justify-content : space-between;
}

.topbar-container {
    display        : flex;
    justify-content: center;
    margin         : 3rem 0;
    box-shadow: 2px 2px 30px 1px rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
}

.theme-container {
    display         : flex;
    align-items     : center;
    padding         : 0.75rem;
    background-color: var(--color-theme-container);
    border-radius   : 0.5rem;

}
.theme-container:hover{
    background-color: var(--color-theme-hover-container);
}

.navbar-2 {
    display        : flex;
    justify-content: space-between;
    margin-bottom  : 1rem;
}

.selector-container {
    display    : flex;
    align-items: center;
    column-gap : 1rem;
}
.selector-container .button:hover{
    background-color: var(--color-selector-hover);
}

.button {
    padding        : 0.5rem 1rem;
    background     : var(--color-container);
    border         : 1px solid var(--color-border);
    border-radius  : 100vw;
    display        : flex;
    justify-content: center;
    align-items    : center;
    font-size      : 1.2rem;
    cursor         : pointer;
    transition     : 0.3s;
    user-select    : none;
}

.selector:checked+.button {
    background-color: var(--color-highlighter);
    color           : var(--color-text-highlight);
}

.selector {
    display: none;
}




.content-container {
    display         : flex;
    flex-wrap       : wrap;
    flex-direction  : row;
    background-color: var(--color-container);
    border          : 1px solid var(--color-border);
    border-radius   : inherit;
    height          : 100%;
    padding         : 1rem;
    row-gap         : 1rem;
    max-width       : 100%;
}

.contents {
    display       : flex;
    flex-direction: column;
    padding       : 0 0 0 0.5rem;
}

.whole-content-container {
    display        : flex;
    justify-content: center;
    flex-wrap      : wrap;
    width          : 100%;
    height         : 100%;
}

.total-content-container {
    width : calc(100%/3 - 0.5rem);
    margin: 0.25rem;
    box-shadow: 2px 2px 30px 1px rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
}

.icon-contents-container {
    display  : flex;
    max-width: 100%;
}

.remove-button {
    padding        : 0.5rem 1rem;
    background     : var(--color-container);
    border         : 1px solid var(--color-border);
    border-radius  : 100vw;
    display        : flex;
    justify-content: center;
    align-items    : center;
    font-size      : 1rem;
}
.remove-button:hover{
    background-color: var(--color-highlighter);
    color           : var(--color-text-highlight);
}
.bottom-button-section {
    display        : flex;
    justify-content: space-between;
    width          : 100%;
    max-height     : max-content;
    align-items    : center;
}

.toggle-button-container {
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.toggle-button {
    background-color: var(--color-toggle);
    width           : 50px;
    height          : 25px;
    border-radius   : 100vw;
    cursor          : pointer;
    transition      : 0.3s;
}

.toggle-button::before {
    position        : absolute;
    content         : "";
    background-color: var(--color-toggle-before);
    width           : 20px;
    height          : 20px;
    border-radius   : 200px;
    margin          : 3px;
    transition      : 0.3s;
}

.checker:checked+.toggle-button {
    background-color: var(--color-highlighter);
}

.checker:checked+.toggle-button::before {
    transform: translateX(24px);
}

.checker {
    display: none;
}

.icon-container {
    width    : 200px;
    max-width: max-content;
}

.theme-container svg:last-child{
    display: none;
}

.L1 .theme-container svg:first-child{
    display: none;
}
.L1 .theme-container svg:last-child{
    display: block;
}
@media (max-width: 770px) {
    .whole-container{
        width: 100vw;
        margin: 0.5rem;
    }
    .navbar-2{
        flex-direction: column;
        align-items: center;
    }
    .total-content-container{
        width: 100%;
    }
    .content-container{
        row-gap: 3rem;
    }
    .contents {
        padding: 0 0 0 1rem;
    }
}