/* === FONTS === */

/* Lato fonts */
@font-face {
    font-family: lato;
    src: url(./font/lato/Lato-Regular.ttf);
    font-weight: normal;
}
@font-face {
   font-family: lato-bold;
   src: url(./font/lato/Lato-Bold.ttf);
}
@font-face {
   font-family: lato;
   src: url(./font/lato/Lato-Italic.ttf);
   font-style: italic;
}

/* Ubuntu fonts */
@font-face {
    font-family: ubuntu;
    src: url(./font/ubuntu/Ubuntu-Regular.ttf);
    font-weight: normal;
}
@font-face {
    font-family: ubuntu;
    src: url(./font/ubuntu/Ubuntu-Bold.ttf);
    font-weight: bold;
}
@font-face {
    font-family: ubuntu;
    src: url(./font/ubuntu/Ubuntu-Italic.ttf);
    font-style: italic;
}

/* Some colors

181a1b - avris.it dark bg
d1cdc7 - avris.it white text
(inspiration website)

1f1f1f - vscode dark bg

1d2024 - joplin dark bg
dddddd - joplin white text color

0094ff - eggs and chicken og blue
154F7C - eggs and chickens darker blue

    --c_bg_light: #D9D9D9;

*/


/* ====== MAIN ====== */

:root{
    --topnav: #154F7C;
    --background: #1d2024;
    --background-alt: hsl(from var(--background) h s calc(l - 5));
    --line: hsl(0, 0%, 30%);
    --stripes-line: color-mix(in oklab,var(--line),transparent);
    --text: #e3e3e3;

    --transition: 0.3s ease-in-out;
    --shadow: 1px 0 4px -1px black;
    background-color: var(--background);
}

* {
    font-family: ubuntu;
    box-sizing: border-box;
    color: var(--text);
}

::selection {
  background-color: rgba(255, 255, 255, 0.25);
  color: inherit;
  text-shadow: none;
}
::-moz-selection {
  background-color: rgba(255, 255, 255, 0.25);
  color: inherit;
  text-shadow: none;
}
.dark-theme ::selection {
  background-color: rgba(255, 255, 255, 0.3);
}
.dark-theme ::-moz-selection {
  background-color: rgba(255, 255, 255, 0.3);
}

h1, h2, h3, p {
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 1rem;
}


h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.5rem;
}

h1, h2, h3 {
  font-family: lato;
  font-weight: bold;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

p {
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: 1.25em;
}

.logotext{
    font-family: lato-bold;
    color: white;
    font-size: 4rem;
    -webkit-text-stroke: 0.2rem black;
}

.topnav{
    overflow: hidden;
    background-color: var(--topnav);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid black;
    box-shadow: var(--shadow);
    position: fixed;
    width: 100%;
    height: 3rem;
}

.topnav a {
    color: #f2f2f2;
    text-align: center;
    text-decoration: none;
    vertical-align:middle;
}

.buttonify:hover{
  border: 1px solid var(--accent);
  transition: var(--transition);
}



.topnav-brand{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: auto;
}


.stripes{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background-attachment: fixed;
  background-size: 10px 10px;
  background-color: var(--background-alt);
  background-image: repeating-linear-gradient(315deg,var(--stripes-line)0,var(--stripes-line)1px,transparent 0,transparent 50%);
  height: 1.5rem;
}

.top-stripes{
    border-top: 0;
    height: 3rem;
}

.content{
  padding-inline: 1.5rem;
  max-width: 60rem;
  margin: auto;
}

.footer {
    border-style: double;
}