/**
 * Omegamma - Hugo theme for ad5001.eu and related websites.
 * Copyright (C) 2021  Ad5001
 * 
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

@import "components/columns";
@import "components/button";

body {
    font-family: 'Metropolis', 'Fira Sans','Ubuntu', 'Noto Sans', sans-serif;
    overflow-x: hidden;
    margin: 0px;
    --light-font: 'Metropolis Light', 'Fira Sans Light','Ubuntu Light', 'Noto Sans Light', sans-serif;
    --primary-color: #50DC71;
    --secondary-color: #FAFAFA;
    --nav-background: var(--secondary-color);
    --nav-background-dark: #282828;
    --footer-background: #111111; 
}

.content-center {
    max-width: 75em;
}

.padding-container {
    padding: 1em;
}

.padding-container-1 {
    padding-left: 1em;
    padding-right: 1em;
}

.padding-container-3 {
    padding-left: 3em;
    padding-right: 3em;
}

hr {
    opacity: 0.5;
}

.primary {
    background-color: var(--primary-color);
    --theme-color: var(--primary-color);
}

.secondary {
    background-color: var(--secondary-color);
    --theme-color: var(--secondary-color);
}

.text-white a[role=button]:not(.primary), a[role=button]:not(.primary).text-white {
    color: white;
}

/* format */

.fill-width {
    width: 100%;
}

.center {
    margin-right: auto !important;
    margin-left: auto !important;
}

img.center {
    display: block;
    max-width: 100%;
}

.vertical-center {
    margin-top: auto !important;
    margin-bottom: auto !important;
    max-height: 100%;
}

/* workaround for sometimes images don't position correctly vertically */
.vertical-center-img {
    margin: auto;
    max-height: 100%;
}

/* text and image formatting */

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-white {
    color: white;
    
    .icon-monochrome {
        filter: invert(96%) sepia(0%) saturate(0%) hue-rotate(119deg) brightness(104%) contrast(104%);
    }
}

.icon-as-text {
    width: 1em;
    height: 1em;
    margin-right: 0.4em;
    vertical-align: middle;
}

.icon-larger-text {
    width: 1.4em;
    height: 1.4em;
    margin-right: 0.4em;
    margin-top: -0.2em;
    vertical-align: middle;
}

.icon-larger2-text {
    width: 1.6em;
    height: 1.6em;
    margin-right: 0.4em;
    margin-top: -0.3em;
    vertical-align: middle;
}

.icon-twice-text {
    width: 2em;
    height: 2em;
    margin-right: 0.4em;
    margin-top: -0.5em;
    vertical-align: middle;
}

h1 {
    font-size: xx-large;
    font-family: var(--light-font);
    &.larger {
        font-size: xxx-large;
    }
}
    
h2 {
    font-size: x-large;
    font-family: var(--light-font);
}

h3 {
    font-family: var(--light-font);
}

.text-content {
    line-height: 1.5em;
}

.grid {
    display: flex;
    flex-wrap: wrap;
    margin: 3px;
}

.flex {
    display: flex !important;
}

.inline {
    display: inline !important;
}

.flex-right {
    justify-content: flex-end;
}

.flex-center {
    justify-content: center;
}