/* if you're reading this, welcome :) 
feel free to contact me on neocities if you ever want to ask a question about how the css works! */

/* -------------------------- Global Stylesheet -------------------------- */

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* -------------- Font Imports -------------- */

@font-face {
    font-family: CrimsonText;
    src: url('resources/fonts/crimsontext/CrimsonText-Regular.ttf');
}
@font-face {
    font-family: CrimsonText;
    src: url('resources/fonts/crimsontext/CrimsonText-Italic.ttf');
    font-style: italic;
}
@font-face {
    font-family: CrimsonText;
    src: url('resources/fonts/crimsontext/CrimsonText-Bold.ttf');
    font-weight: bold;
}
@font-face {
    font-family: CrimsonText;
    src: url('resources/fonts/crimsontext/CrimsonText-BoldItalic.ttf');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: RetroByte;
    src: url('resources/RetroByte.ttf');
}

@font-face {
    font-family: Cavalhatriz;
    src: url('resources/fonts/cavalhatriz/Cavalhatriz.ttf');
}

/* -------------- Basics -------------- */
:root {
    --text-color: #23150c;
    --textbox-color-light: #F8F8F2;
    font-family: CrimsonText;
    line-height: 125%;
}
html {
    font-size: 100%;
    color: var(--text-color);
    overflow-x: hidden;
}
body { 
    overflow-x: hidden;
    height: 100vh;
    margin: 0;
}
::selection { 
    background: #d4e57f;
}
h1, h2, h3 { font-family: RetroByte; font-weight: normal; }
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }


/* -------------- Broider Styles -------------- */

.broider-white {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABZklEQVRYR+2ZsQ7CMAxE6daJ//9Opm4ghiDk6PTObkubCjZI6lwv9vkspht8luXx/N4yz/eJnnHWs3Hx0GxAB+R7TzbuB2h8kA4kZhWQ6jnXARqZU4y0fW09fo83lI2LjGYDng6oYsz9PUtAmVEXULtylRptnVJqyspEtprphZS6xHOuBzSrf6TDMSXi/jKjhwOlZHaZ2Wtfy3Gs+r0AuHE7oJHZbGdxDyYZig2jxe3cU7Wz/Ayo+6ZUrQTY1eHYuTBHq4LtCrkbvwNKubk1o+Squhx1c/NwoP+qD3frFq0sJuq1bi5lq17Fjakop1Dq7TTcuVVfBlrVOWJSeQpSGWyhyplvXfWrgboBXCbJpdGocp1en2Vs6/3j+VF3CiW5qjKpZG7cmclldK0Orj1nnLne1TfXXZERVjMRmRXb4Q8L1DUTxJR7o2VGTwdU6SPlYtXmKQKQ0dMBdRmoGmaaICjuMP8zvQAaSl9RXcV1GgAAAABJRU5ErkJggg==") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}
.broider-blue {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAC3klEQVR4Xu2bO1LEQAwF2VMQknP/s5ATcgogZLXUdnVJ8n7qkXo8furR01iz5vTS/Pv4+vy+NsX769up+YjR27f1toPdFjhK83eybb0BWlas66gA3QZKluhasJsBpK/OT+On47nI0KMF2IBIX4BKogE6XKOeHijVRAJQE5QsS9cp4bf1tmvotsC6IAEKnVQyVNbEWL6ZUTXjupa1Fqfx2yXq8BpKAdsSYMcHaDmtohJCCxagjwbUrji951ENtRal51FG0vNofhvPKUAdUuIVoI4nHlAH6L0DJUtI/evDade/eQ0N0OFfLQM0QNXvapQw7dZzvcjd+QNqDQ7Q5oIFaBMgdV7J0CZgzFB677K9M61oMx68nTYR0kfnufV+3OFowq5gJNIc0NVH8QcoLBA5kDqrZGgBPA502iJUo5qOxtspHgJo9bd3+WlBSEgOCFAJjIYHKBGS1+8OqLU0xUu7JN1vrxNQms/qxRoaoO6fLgJUvpdSRgfoNtD08ucWT+tZMsJuSrRn0CaV1nO79Yzlly1PgGnXs72wnY/GW8uTXqqpaPkAdRkboPK1KRkqP3FftzzVIHrNIIFUA7vXp/VTPGj5aUH0HtcFaGu+TYgAlZ8aUQIF6L0DnbbItMWt5SnjaFev9+saGqDXz0cDNL28KxLdTaZteSvAhfd8o/FjsQB1ix6gjheODlBE5AZcACWL21aR5nNy90dPxzf+n3QBKlszypkADVBsbv4mESXMuOVtLz3dylLAtmbaeAKUali5TgsWoAF6TsCWjHXL2xpB54c0XxcAWY7mJ6A0P8WPX9+RI6xACpgEU8A0v9Vr4w9QuenQggfoowO1FqIDXioBlFFU863ewzPUCgzQYQsFaICeE7A1iSxMNYyeR6859Hyan+6n6zc/saf3RFoACrC7ydj5A9QSg/EBejRQ+zyqUd0aaPXQ+G296rT6P7HbAgmQvb6tN0DLinQdFaDDQH8AmIK6gR4l9oUAAAAASUVORK5CYII=") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
}


.decor-container {
    width: 100px;
    height: 1px;
    position: relative;
    top: 0;
    right: 0;
    margin: auto;
}
.decor-container img {
    position: absolute;
}
.top-layer { z-index: 1; }
.bottom-layer { z-index: -1; }