@import 'node_modules/modern-normalize/modern-normalize.css';
@import url('https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://unpkg.com/@catppuccin/palette/css/catppuccin.css');

:root {
    --section-color: #e689aeba;
    --section-outline:#cf769aef;
    --foot-head-color: #74c7ec	;
    --foot-head-outline: #529dc0;
    --outline-size: 3px;
}


* {
    font-family: "Work Sans", serif;
}


html {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #1e1e2e;
    scroll-behavior: smooth;
}

body {
    max-width: 900px;
    min-height: 100vh;
    justify-content: space-between;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
}

div#content {
    gap: inherit;
    display: flex;
    flex-direction: column;

}

img.round {
    border-radius: 50%;
    width: 64px;
}

img.nav {
    align-content: center;
    width: 30px;
}


/*  _  _          _              
 | \| |__ ___ _| |__  __ _ _ _ 
 | .` / _` \ V / '_ \/ _` | '_|
 |_|\_\__,_|\_/|_.__/\__,_|_|  */

div#navbar {
    background-color: var(--foot-head-color);
    outline: 3px solid var(--foot-head-outline);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    padding: 4px;
    margin: 3px;
}

div#navbar>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.dropbtn {
    background-color: #529dc0;
    color: rgb(243, 243, 243);
    padding: 16px;
    font-size: 16px;
    border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #529dc0;}

div#navbar>div>* {
    max-height: 64px;
}

div#navbar>div>a>* {
    max-height: 64px;
}

div#navbar>div a {
    color: black;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

div#navbar>div>a:hover {
    text-decoration: underline solid;
}

div#navbar>div.right {
    gap: 16px;
    padding-right: 4px;
}


/*  ___         _           
 | __|__  ___| |_ ___ _ _ 
 | _/ _ \/ _ \  _/ -_) '_|
 |_|\___/\___/\__\___|_|  */

div#footer {
    background-color: var(--foot-head-color);
    outline: var(--outline-size) solid var(--foot-head-outline);
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    padding-left: 1em;
    margin: 3px;
}


/*  ___         _   _             
 / __| ___ __| |_(_)___ _ _  ___
 \__ \/ -_) _|  _| / _ \ ' \(_-<
 |___/\___\__|\__|_\___/_||_/__/*/

section {
    background-color: var(--section-color);
    box-shadow: 0 0 0 3px var(--section-color);
    outline: var(--outline-size) dashed var(--section-outline);
    border-radius: 12px;
    padding-bottom: 0em;
    padding: 0px 1em;
    margin: 6px;
}

section#turnier {
    background-color: #e5c890;
    box-shadow: 0 0 0 3px #e5c890;
    outline: var(--outline-size) dashed #d7b673;
    border-radius: 12px;
    padding-bottom: 0em;
    padding: 0px 1em;
    margin: 6px;
}

section#about>h2:hover::after {
    content: "ow :3";
}

section#about>ul {
    list-style-type: circle;
}

section#why>h2:hover::after {
    content: " tu ich mir diese scheisse überhaupt an :c";
}

section#about>ul {
    padding-left: 48px;
}

section#about>ul>li.pronouns:hover::after {
    content: " 🏳️‍⚧️";
}

img.marlon {
    width: 256px;
    border-radius: 3%;
}

div.images {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    gap: 1em;
}

figcaption {
    font-size: 12px;
    color: rgb(53, 53, 53);
}

figure {
    display: flex;
    justify-content: center;
    flex-direction: column;
}