quatalog-site/css/common.css

/* common variables */
:root{
    --quacs-yellow: #f5b53f;
    --quacs-midtone: #f5cc81;
    --quacs-white: #f5e3c2;
    --quacs-whitest: #fdf8f0;

    --deepest-purple: #12121a;
    --deeper-purple: #191823;
    --deep-purple: #201f2c;
    --mid-dark-purple: #2c2b3d;
    --mid-purple: #37364d;
    --mid-light-purple: #494766;
    --light-purple: #5c5980;

    --pink: #f53faa;
    --red: #f53f6a;
    --green: #3ff57f;
    --blue: #3f6ef5;

    font-size: calc(1vmin + 12px);
}

body{
    background-color: var(--deep-purple);
    overflow-x:hidden;
    margin: 0;
    font-size: 0.9rem; /* default font-size. works well for small-ish thing */
}

::selection{
    background: var(--mid-light-purple);
}

.hidden{
    visibility: hidden;
    margin: 0;
    height: 0vw;
}

svg {
    overflow: visible;
}

span {
    display: contents;
}

/* TEXT */
h1, h1 a {
    color: var(--quacs-yellow);
    font-family: "proxima-nova";
    font-weight: 900;
    margin-top: 0vmin;
    margin-bottom: 0vmin;
    padding-bottom: 0;
    display: block;
    position: relative;
    font-size: 2.25rem;
}

h2{
    font-size: 1.4rem;
    margin-top: 1vmin;
    margin-bottom: 0;
}

p {
    color: var(--quacs-white);
    font-family: "proxima-nova";
    font-size: 1.2rem;
    margin-bottom: 0;
    margin-top: 0;
}

p a, p svg{
    color: var(--quacs-midtone);
    fill: var(--quacs-midtone);
    height: 4vmin;
    vertical-align: bottom;
}

p svg {
    display: inline-block;
}

p a:hover, p a:hover svg {
    color: var(--quacs-yellow);
    fill: var(--quacs-yellow);
}

/* HEADER */
#qlog-header{
    border-bottom: 0.2vmin solid var(--quacs-yellow);
    width: 100%;
    min-height: 5.25vmin;
    left: 0;
    top: 0;
    position: relative;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#qlog-wordmark svg {
    height: 4.5vmin;
    aspect-ratio: 454/100;
    left: 0;
    top: 0;
    position: relative;
    margin: 1vmin;
    margin-bottom: 0.75vmin;
    margin-left: 2vmin;
}

#header-search {
    position: relative;
    right: 1vmin;
    width: 12rem;
    height: 1.8rem;
    font-size: 1.1rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}

input[type="text"] {
    background: var(--quacs-white);
    border-radius: 100vw;
    border: none;
    outline:none;
    font-family: "proxima-nova";
    color: var(--mid-dark-purple);
    caret-color: var(--mid-dark-purple);
}

input[type="text"]::selection{
    background: var(--quacs-yellow);
}


/* 
d88888b  .d88b.  d8b   db d888888b .d8888.
88'     .8P  Y8. 888o  88 `~~88~~' 88'  YP
88ooo   88    88 88V8o 88    88    `8bo.
88~~~   88    88 88 V8o88    88      `Y8b.
88      `8b  d8' 88  V888    88    db   8D
YP       `Y88P'  VP   V8P    YP    `8888Y'
 */

@font-face{
    font-family: "rivalsans";
    src: url("./fonts/rivalsans-regular.otf");
}
@font-face{
    font-family: "rivalsans";
    src: url("./fonts/rivalsans-bold.otf");
    font-weight: 700;
}
@font-face{
    font-family: "rivalsans";
    src: url("./fonts/rivalsans-extrabold.otf");
    font-weight: 800;
}
@font-face{
    font-family: "rivalsans";
    src: url("./fonts/rivalsans-black.otf");
    font-weight: 900;
}

@font-face {
    font-family: "proxima-nova";
    src: url("./fonts/Proxima-Nova-Black.otf");
    font-weight: 900;
}

@font-face {
    font-family: "proxima-nova";
    src: url("./fonts/Proxima-Nova-Bold.otf");
    font-weight: 700;
}

@font-face {
    font-family: "proxima-nova";
    src: url("./fonts/Proxima-Nova-Extrabold.otf");
    font-weight: 800;
}

@font-face {
    font-family: "proxima-nova";
    src: url("./fonts/Proxima-Nova-Thin.otf");
    font-weight: 200;
}

@font-face {
    font-family: "proxima-nova";
    src: url("./fonts/Proxima-Nova-Regular.otf");
}