@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Winky+Rough:ital,wght@0,300..900;1,300..900&display=swap');

@font-face {
    font-family: Cybanin3000;
    src: url(/fonts/Cybanin3000.otf) format("opentype");
}

:root {
    --yellow-accent: #FFD700;
    --blue-highlight: #11aef9;
    --blue-lowlight: #090979;
    --clock-text: #fff;

    --header-font: Cybanin3000, serif;
    --font: "Winky Rough", sans-serif;

    --hr-gradient: linear-gradient(0deg, #232329 0%, var(--blue-lowlight) 35%, var(--blue-highlight) 100%);
    --bg-gradient: radial-gradient(circle at top, rgba(0, 0, 17, 1) 0%, rgba(1, 1, 61, 1) 75%, rgba(118, 133, 136, 1) 150%);
}

body {
    background-color: black;
    color: var(--clock-text);
    margin: 0;
    height: 100dvh;
    overflow: hidden;
    font-family: var(--font);
    font-size: 18px;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;

    box-sizing: border-box;
}

hr {
    border: none;
    height: 5px;
    background: var(--hr-gradient);
}

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

header {
    font-family: var(--header-font);
    font-size: 2rem;
    max-height: 10dvh;
    box-sizing: border-box;

    padding: 1em 1.5rem;

    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid var(--blue-highlight);
}

header > img {
    max-height: 100%;
}

iframe img {
    display: none!important;
}

main {
    --black-overlay: #0004;
    background:  linear-gradient(var(--black-overlay), var(--black-overlay)), var(--bg-gradient);
    background-blend-mode: multiply;
    /* background-image: url(/img/geocolors.jpg); */
    background-repeat: no-repeat;
    background-size: cover;
    flex: 1 0 auto;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

.row {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}

.widget-container {
    gap: 1em 2em;

    display: grid;
    grid-template-areas: 
    "c q"
    "c q"
    "a a"
    ;
    /* margin-left: 40%; */
    /* border-radius: 1em; */
    
    min-width: 65%;

    flex: 1 0 auto;
    padding: 0 2.5em 3em;
}

.widget-container:empty::before {
    content: "Loading..."
}

.widget-box {
    flex: 1 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;
}

#widget-air {
    grid-area: a;
}

#widget-clock {
    grid-area: c;
}

#widget-quotes {
    grid-area: q;
}

#widget-weather {
    position: fixed;
    bottom: 0;
    left: 0;
    /* grid-area: w; */
}

#widget-weather, #widget-weather > a {
    width: 100%;
}

/* SVGs */

.svg {
    --icon-size: 1.4em;
    border-radius: 3px;

    filter: 
        /* drop-shadow(0 0 1px white)  */
        drop-shadow(0 0 3px var(--blue-highlight)) 
        drop-shadow(0 0 8px var(--blue-lowlight))
    ;
}

.svg.small {
    --icon-size: 1.2em;
}

.svg.big {
    --icon-size: 6.5em;
}

.svg::before {
    content: "";

    background-color: var(--blue-highlight);
    height: var(--icon-size);
    width: var(--icon-size);
    display: block;

    -webkit-mask-image: var(--icon-url);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-image: var(--icon-url);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: cover;

    margin: auto;
}

.electric-car {
    --icon-url: url(/img/electric-car.svg);
}

.three {
    --icon-url: url(/img/numberthree.svg);
}

.tesla {
    --icon-url: url(/img/tesla.svg);
}

.armature {
    --icon-url: url(/img/armature.svg);
}

/* Widget overwrites */

.AWAD-wrapper {
    display: flex;
    flex-flow: column nowrap;
    border-left: 1px solid var(--blue-highlight);
    padding-left: 2em;
    max-width: 400px;

    font-size: 24px;
}

.AWAD_title {
    font-weight: bold;
    color: var(--blue-highlight);
    font-family: var(--header-font);
    margin-bottom: 1rem;
    font-size: 1.2em;
}

.AWAD_quotation {
    text-decoration: none;
    color: var(--clock-text);
}

.AWAD_byline {
    font-style: italic;
    font-size: 10px;
    margin-left: auto;
}