:root,:root.dark {
    --background-color: #000;
    --background-gradient: linear-gradient(90deg, rgba(0,214,250,1) 0%, rgba(255,0,166,1) 33%, rgba(248,184,79,1) 66%, rgba(214,0,255,1) 100%);
    --font-color: #000;
    --caption-font-color: #eaeaea;
    --button-background: #e0dedf;
    --content-background: rgba(16, 16, 16, 0.67);
    --contentColor: #fff !important;
}


:root.light {
    --background-color: #FFF;
    --background-gradient: linear-gradient(90deg, rgba(63,223,250,1) 0%, rgba(255,64,189,1) 33%, rgba(248,207,141,1) 66%, rgba(224,63,255,1) 100%);
    --font-color: #fff;
    --caption-font-color: #141414a;
    --button-background: #000;
    --content-background: rgba(240, 240, 240, 0.67);
    --contentColor: #000 !important;
}

/* button */
/* Any element with the class "light--hidden" will be hidden when the site is set to Light Mode */
:root.light .light--hidden {
    display: none !important;
}

/* Any element with the class "dark--hidden" will be hidden when the site is set to Dark Mode */
:root.dark .dark--hidden {
    display: none !important;
}

.theme-btn.light {
    display: none;
}
.dark .theme-btn.light {
    display: block;
}
.dark .theme-btn.dark {
    display: none;
}
.light .theme-btn.dark {
    display: block;
}

/* regular crap */

html {
    font-size: calc(15px + 0.390625vw);
    color: var(--font-color, #fff);
    font-optical-sizing: auto;
    font-stretch: 100%;
}

/*! font-face partially generated by Font Squirrel (https://www.fontsquirrel.com) on April 11, 2023 */
/* url('webfont.ttf')  format('truetype'), */
@font-face {
    font-family: 'exo_2regular';
    src: url('fonts/exo2-variablefont_wght.woff2') format('woff2'),
         url('fonts/exo2-variablefont_wght.woff') format('woff'),
         url('fonts/Exo2-VariableFont_wght.tff') format('truetype');
/*    font-weight: 100 900; */
    font-style: normal;
}

@font-face {
    font-family: 'exo_2italic';
    src: url('fonts/exo2-italic-variablefont_wght.woff2') format('woff2'),
         url('fonts/exo2-italic-variablefont_wght.woff') format('woff'),
         url('fonts/Exo2-Italic-VariableFont_wght.tff') format('truetype');
/*    font-weight: 100 900; */
    font-style: italic;
}


@font-face {
    font-family: 'fyodor';
    src: url('fonts/fyodor-bold-webfont.woff2') format('woff2'),
         url('fonts/fyodor-bold-webfont.woff') format('woff'),
         url('fonts/Fyodor-Bold.ttf') format('truetype');
/*    font-weight: 100 900; */
    font-style: normal;
}


body {
    font-family: 'exo_2regular', monospace;
    margin: 0 auto;
    background: var(--background-color, black);
    background: var(--background-gradient);
    font-size: 100%;
    color: var(--font-color, #fff);
}

img,
picture,
video {
    max-width: 100%;
}

#grid-container {
    display:grid;
    grid-template-rows:auto 1fr auto;
    grid-template-columns:100%;

    /* fallback height */
    min-height:100vh;

    /* new small viewport height for modern browsers */
    min-height:100svh;
}

strong, b {
    font-weight: 900;
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'fyodor', monospace;
/*    text-shadow: 1px 1px 0 black, -1px -1px 0 black, -1px 1px 0 black, 1px -1px 0 black; */
    clear: both;
}
/* h1 {
    font-size: 2.5rem;
} */
h1 {
    text-align: center;
  font-size: 7vw;
  color: #00d6fa;
  background-image: linear-gradient(90deg,
      #00d6fa 5%,
      #ff00a6 44%,
      #f8b84f 58%,
      #d600ff 95%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .3vw var(--font-color, #000);
}
h2 {
    font-size: 2rem;
}
h3 {
    font-size: 1.8rem;
}
h4 {
    font-size: 1.5rem;
}
h5 {
    font-size: 1.3rem;
}
h6 {
    font-size: 1.2rem;
}

a {
    color: fuchsia;
    text-decoration: underline;
}

pre {
    white-space: pre-wrap;
    overflow-x: auto;
    border: calc(2px + 0.390625vw) solid black;
    font-family: monospace;
    tab-size: 4;
    background: #222;
    width: 50%;
    margin: 0 auto;
    color: white;
    padding: 0 calc(8px + 1.5625vw);
}

code {

}

blockquote {
    font-weight: 100;
    font-size: 1.5rem;
    max-width: 600px;
    position: relative;
    margin: calc(8px + 1.5625vw);
    padding: 0 calc(8px + 1.5625vw);
}

blockquote:before, blockquote:after {
    position: absolute;
    color: var(--caption-font-color, #aeacad);
    font-size: 4rem;
    width: 2rem;
    height: 2rem;
}

blockquote:before {
    content: '“';
    left: -0.5rem;
    top: -0.5rem;
}

blockquote:after {
    content: '”';
    right: calc(8px - 1.5625vw);
    bottom: calc(8px + 1.5625vw);
}

figure {
    margin: calc(8px + 1.5625vw);
}

figcaption {
    color: var(--caption-font-color, #aeacad);
}

figure img {
    max-width: 500px;
    max-height: 500px;
    width: 100%;
}

cite {

}


.left { float: left; }
.right { float: right; }
.half { width: 50%; }
.third { width: 33%; }
.quarter { width: 25%; }

.plain { border: none; background: none; }

.padding {
    padding:calc(8px + 1.5625vw);
}


/* HEADER */

header {
    font-family: 'fyodor', monospace;
    width: 100%;
    margin-bottom: calc(16px + 1.5625vw);
}

header a {
    border: none;
    text-decoration: none;
    color: var(--font-color, #fff);
}

header img {

}

#internalLinks {

}

#homeLink {
/* display: flex; */
/*    align-items: flex-end; */
}

#externalLinks {
/*    position: absolute; */
/*    right: 0; */
}

#internalLinks img, #externalLinks img {
/*    height: calc(16px + 1.5625vw); */
}

#externalLinks img {
}

img#brusnica { height: calc(42px + 1.5625vw);}

#mode-button {
    background: none;
    width: 2rem;
    height: 2rem;
    border: none;
    cursor: pointer;
    /*    margin: calc(8px + 1.5625vw); */
    position: absolute;
}

header h1 { margin: calc(1px + 1.5625vw) 0 0 0; }

header h1 img {
    display: block;
    width: 100%;
    margin-top: 0;
}

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


/* CONTENT */

h1#rag { text-align: center; font-size: 5rem; }

.contentStyle
{
    background: var(--content-background);
    padding: calc(8px + 1.5625vw);
    color: var(--contentColor);
}