@import url("/assets/fonts/open-sans.css");

html{scroll-behavior: smooth;}

body{
   margin: 0;
   padding: 0;
   color: var(--color);
   background: var(--background);
   text-align: left;
   font-family: "open sans", sans-serif;
   scroll-behavior: smooth;
   overflow-x: hidden;
   --theme1: #3498db;
   --theme2: #2980b9;
   --background: var(--black);
   --color: var(--white);
   --white: #f8f8f8;
   --black: #181818;
   --margin: 15px;
   --padding: 15px;
   --borderRadius: 12px;
   --transition: all 300ms linear;
   }

#content{
    margin: 0;
}

.inner-width{
    width: calc(100% - 30px);
    max-width: clamp(1050px, 90%, 1200px);
    margin: auto;
    padding: 10px 15px;
}

/* TAGGING SYSTEM */
.tags{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: baseline;
    flex-wrap: wrap;
    user-select: none;
}

.tag{
    background: var(--white);
    color: var(--theme1);
    margin: 10px 5px;
    padding: 10px 15px;
    border-radius: 12px;
    transition: var(--transition);
    border: 1px solid var(--theme1);
}

.tag input{
    display: none;
}

.tag:has(:checked){
    background: var(--theme1);
    color: var(--white);
}

.hiddenSection{
    display: none;
}

/* GENERAL */
h1{
    margin: 10px 0px;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--theme1);
}

h2, h3{
    margin: 15px 0px 5px 0px;
    font-size: 1.2rem;
    font-weight: 600;
}

h4, h5, h6{
    font-size: 1rem;
    font-weight: 600;
    margin: 15px 0px 5px 0px;
}

p{
    font-size: 1rem;
    margin: 5px 0px;
}

a{
    color: inherit;
    text-decoration: none;
}

a:hover, a:focus{
    color: inherit;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--theme1);
    transition: ease-in-out 300ms linear;
}

::selection {background: var(--theme1); color: #ffffff;}
::-moz-selection {background: var(--theme1); color: #ffffff;}

/* PRINT */
@media print{
    body{
        color: #000;
    }
}