@import url("header/style.css");
@import url("footer/style.css");
@import url("contents/breadcrumbs.css");
@import url("contents/button.css");
@import url("contents/code.css");
:root {
    --clr: #000;
    --bgclr: #fff;
    --ftrbgclr: #f5f5f5;
    --ftrclr: #606060;
    --spanclr: #000;
}

@media (prefers-color-scheme: dark) {
    --clr: #fff;
    --bgclr: #202124;
    --ftrbgclr: dimgray;
    --spanclr: #fff;
    --ftrclr: #fff;
    a {
        color: #fff;
    }
    .codeback {
        color: #000;
    }
}

.dark-mode {
    --clr: #fff;
    --bgclr: #202124;
    --ftrbgclr: dimgray;
    --spanclr: #fff;
    --ftrclr: #fff;
    a {
        color: #fff;
    }
    .codeback {
        color: #000;
    }
}

.light-mode {
    --clr: #000;
    --bgclr: #fff;
    --ftrbgclr: #f5f5f5;
    --spanclr: #000;
    --ftrclr: #606060;
}

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

html {
  width: 100%;
}
body {
    width: 100%;
    max-width: 100vw;
    background-color: var(--bgclr);
    color: var(--clr);
    display: block;
    overflow-x: hidden;
}

li {
   list-style: none;
 }

img {
  max-width: 100%;
}

.content {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;

    .side {
        display: none;
        opacity: 0;
    }

    .main {
        display: block;
        padding: 0 5px;

        p {
            font-size: 1.2rem;
            line-height: 1.5;
        }
    }
}