@import './global_menues.css';
@import './textstyles.css';
@import './effects.css';
@import './libs/components/modal.css';
@import './libs/components/output.css';
@import './libs/components/ui.css';
@import './formelements.css';

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on October 27, 2022 */

@font-face {
    font-family: 'Boogaloo';
    src: url('/fonts/boogaloo-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'aleo';
    src: url('/fonts/Aleo-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'aleo';
    src: url('/fonts/Aleo-Bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

html,
body {
    font-family: 'aleo', sans-serif;
    font-size: 14px;
    background: #eee;
}


/* VARIABLEN */

:root {
    --hoverColor: rgb(255, 30, 0);
    --bgRed: rgb(226, 119, 119);
    --fgRed: rgb(48, 21, 21);
    --bgGreen: rgb(185, 226, 119);
    --fgGreen: rgb(21, 48, 29);
    --bgYellow: rgb(226, 192, 119);
    --fgYellow: rgb(48, 41, 21);
    --grau: #888;
    --grauHell: #ddd;
    --grauSehrHell: #f5f5f5;
    --abstandKlein: 5px;
    --abstand: 10px;
    --abstandMittel: 25px;
    --abstandGross: 50px;
    /* Kantenabstände */
    --spaltenbreite: 150px;
    /* Breite von Spalten für Raster-Aufteilung */
    --contrast: #fa3;
}

a {
    color: rgb(56, 117, 231);
    text-decoration: none;
    transition: all 300ms ease-in-out;
}

a:hover {
    color: rgb(22, 56, 117);
}

a img {
    border: none;
}

h1 {
    position: relative;
    display: block;
    font-family: Boogaloo;
    font-size: 25px;
    color: rgb(107, 107, 107);
    text-align: center;
    background: var(--grauHell);
    margin-bottom: var(--abstandGross);
    letter-spacing: -1px;
}

h1 .main {
    font-size: 100px;
    color: rgb(156, 156, 156);
    letter-spacing: -2px;
}

header {
    position: relative;
    display: block;
    width: 980px;
    margin-left: auto;
    margin-right: auto;
}

#all {
    position: relative;
    display: block;
    width: 1000px;
    /*background:#888;*/
    margin-left: auto;
    margin-right: auto;
}

main,
about {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 980px;
    padding: var(--abstand);
    margin-bottom: var(--abstandGross);
    background: #fff;
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.2);
}

#ads {
    position: relative;
    display: block;
    float: left;
    /*width: 160px;*/
    min-height: 600px;
    background: rgba(255, 255, 255, 1);
    margin-left: 20px;
}

#content {
    position: relative;
    display: block;
    float: left;
}