:root {
    --dark-bg: #1C1917;
    --dark-text: #fff;
    --dark-btn-bg: #cacaca;
    --light-bg: #fff;
    --light-text: #000;
}
*{
    font-family: outfit-pb, serif;
}
@font-face {
    font-family: outfit-pb;
    src: url(../fonts/Outfit-Regular.ttf);
}
body{
    margin: 0;
    font-size: 19px;
    transition-duration: 0.5s;
}
[data-theme="dark"]  body{
    background-color: var(--dark-bg);
    color: var(--dark-text);
}
[data-theme="light"]  body{
    background-color: var(--light-bg);
    color: var(--light-text);
}
[data-theme="dark"] .search-btn svg{
    fill: var(--dark-text);
}
[data-theme="light"] .search-btn svg{
    fill: var(--light-text);
}
a,
a:focus,
a:active{
    text-decoration: none;
    outline: none;
    color: inherit;
}
.show-link a{
    text-decoration: underline;
    color: #00b6ff;
}
#main{
    margin: 130px 0 100px;
}
#main section{
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 50px;
}
article{
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 50px;
}
.theme-toggle {
    --size: 2rem;
    --icon-fill: hsl(210, 10%, 30%);
    --icon-fill-hover: hsl(210, 10%, 15%);
    background: none;
    border: none;
    padding: 0;
    width: var(--size);
    height: var(--size);
    aspect-ratio: 1;
    border-radius: 50%;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    outline-offset: 5px;
}
.theme-toggle > svg {
    width: 100%;
    height: 100%;
    stroke-linecap: round;
}
[data-theme="dark"] .theme-toggle {
    --icon-fill: hsl(210, 10%, 70%);
    --icon-fill-hover: hsl(210, 15%, 90%);
}
.max-w{
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 50px;
}
@media (hover: none) {
    .theme-toggle {
        --size: 48px;
    }
}