html, body {
    margin: 0;
    font-family: "Passion One", serif;
    color: white;
}


.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;

}

h1 {
    margin: 0;
    font-weight: normal;
    font-size: 2em;
}

h2 {
    margin: 0;
    font-size: 1.5em;
    font-weight: normal;
}

h3 {
    margin: 0;
    font-size: 1.25em;
    font-weight: normal;
}


a {
    color: #fcee21;
    text-decoration: none;
    cursor: pointer;
}

.main {
    flex: 1;
    color: white;
    font-weight: lighter;
    background-color: black;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!-- Created with Inkscape (http://www.inkscape.org/) --%3E%3Csvg version='1.1' id='svg18' width='100' height='100' viewBox='0 0 500 500' sodipodi:docname='Page 1.svg' inkscape:version='1.2.2 (b0a8486541, 2022-12-01)' inkscape:export-filename='../Pictures/AGWU_Controller.svg' inkscape:export-xdpi='96' inkscape:export-ydpi='96' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Csodipodi:namedview id='namedview69' pagecolor='%23ffffff' bordercolor='%23666666' borderopacity='1.0' inkscape:showpageshadow='2' inkscape:pageopacity='0.0' inkscape:pagecheckerboard='0' inkscape:deskcolor='%23d1d1d1' showgrid='false' inkscape:zoom='1.2777537' inkscape:cx='286.44019' inkscape:cy='183.13389' inkscape:window-width='1265' inkscape:window-height='1033' inkscape:window-x='1285' inkscape:window-y='37' inkscape:window-maximized='1' inkscape:current-layer='svg18'/%3E%3Cdefs id='defs22'%3E%3CclipPath clipPathUnits='userSpaceOnUse' id='clipPath34'%3E%3Cpath d='M 0,400 H 400 V 0 H 0 Z' id='path32'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='g26' transform='matrix(1.3333333,0,0,-1.3333333,-190.61875,451.42414)'%3E%3Cg id='g28'%3E%3Cg id='g30' clip-path='url(%23clipPath34)'%3E%3Cg id='g36' transform='translate(331.917,108.5049)'%3E%3Cpath d='m 0,0 c -10.555,2.124 -17.396,12.4 -15.273,22.955 l 10.832,53.953 c -8.145,-3.647 -17.913,-3.181 -25.91,2.094 -12.445,8.211 -15.879,24.96 -7.669,37.406 l -10.85,7.159 c 0,0 -4.35,2.869 -10.852,7.159 -8.211,-12.445 -24.96,-15.879 -37.406,-7.668 -8.339,5.501 -12.635,14.841 -12.081,24.143 l -46.212,-31.785 c -8.868,-6.105 -21.008,-3.859 -27.113,5.009 -6.1,8.876 -3.862,21.021 5.014,27.121 l 52.728,36.268 c 1.474,1.017 3.034,1.785 4.651,2.347 l 0.014,0.003 13.585,9.151 0.006,0.009 c 1.121,4.46 2.994,8.806 5.671,12.863 6.387,9.683 16.093,15.859 26.622,18.018 10.529,2.158 21.882,0.299 31.564,-6.089 L 37.453,167.25 c 19.365,-12.776 24.705,-38.822 11.929,-58.187 -3.028,-4.591 -6.79,-8.387 -11.05,-11.339 L 35.778,84.338 35.78,84.324 c 0.269,-2.046 0.203,-4.159 -0.224,-6.297 L 22.961,15.282 C 20.846,4.721 10.561,-2.115 0,0 Z' style='fill:none;stroke:%23909090;stroke-width:6;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1' id='path38'/%3E%3C/g%3E%3Cg id='g40' transform='translate(282.6416,308.8672)'%3E%3Cpath d='m 0,0 c -2.318,-3.514 -7.046,-4.482 -10.56,-2.165 -3.512,2.318 -4.482,7.045 -2.164,10.559 2.318,3.514 7.045,4.482 10.559,2.165 C 1.349,8.241 2.317,3.514 0,0' style='fill:%23909090;fill-opacity:1;fill-rule:nonzero;stroke:none' id='path42'/%3E%3C/g%3E%3Cg id='g44' transform='translate(264.3271,281.1069)'%3E%3Cpath d='m 0,0 c -2.318,-3.513 -7.046,-4.482 -10.56,-2.165 -3.512,2.318 -4.482,7.046 -2.164,10.559 2.318,3.514 7.045,4.483 10.559,2.165 C 1.349,8.241 2.317,3.514 0,0' style='fill:%23909090;fill-opacity:1;fill-rule:nonzero;stroke:none' id='path46'/%3E%3C/g%3E%3Cg id='g48' transform='translate(259.6035,304.1445)'%3E%3Cpath d='m 0,0 c -2.317,-3.514 -7.045,-4.483 -10.559,-2.165 -3.513,2.318 -4.482,7.045 -2.164,10.559 2.318,3.513 7.045,4.482 10.559,2.165 C 1.35,8.241 2.318,3.513 0,0' style='fill:%23909090;fill-opacity:1;fill-rule:nonzero;stroke:none' id='path50'/%3E%3C/g%3E%3Cg id='g52' transform='translate(287.3643,285.8301)'%3E%3Cpath d='m 0,0 c -2.318,-3.514 -7.046,-4.483 -10.559,-2.165 -3.513,2.318 -4.483,7.045 -2.165,10.559 2.319,3.513 7.045,4.482 10.559,2.165 C 1.349,8.241 2.317,3.513 0,0' style='fill:%23909090;fill-opacity:1;fill-rule:nonzero;stroke:none' id='path54'/%3E%3C/g%3E%3Cg id='g56' transform='translate(364.791,255.8271)'%3E%3Cpath d='m 0,0 -4.504,-6.826 -8.391,5.535 4.504,6.827 8.136,3.205 z' style='fill:%23909090;fill-opacity:1;fill-rule:nonzero;stroke:none' id='path58'/%3E%3C/g%3E%3Cg id='g60' transform='translate(338.0195,233.502)'%3E%3Cpath d='M 0,0 4.699,7.123 13.09,1.587 8.391,-5.536 0.083,-9 Z' style='fill:%23909090;fill-opacity:1;fill-rule:nonzero;stroke:none' id='path62'/%3E%3C/g%3E%3Cg id='g64' transform='translate(362.4385,231.2095)'%3E%3Cpath d='M 0,0 -7.16,4.724 -1.653,13.071 5.507,8.347 9.019,0.04 Z' style='fill:%23909090;fill-opacity:1;fill-rule:nonzero;stroke:none' id='path66'/%3E%3C/g%3E%3Cg id='g68' transform='translate(340.1309,257.9067)'%3E%3Cpath d='m 0,0 7.16,-4.724 -5.507,-8.347 -7.16,4.724 -3.512,8.306 z' style='fill:%23909090;fill-opacity:1;fill-rule:nonzero;stroke:none' id='path70'/%3E%3C/g%3E%3Cg id='g72' transform='translate(263.6367,243.2017)'%3E%3Cpath d='m 0,0 c -5.322,-8.067 -16.177,-10.292 -24.244,-4.97 -8.069,5.322 -10.293,16.177 -4.971,24.244 5.322,8.068 16.177,10.293 24.244,4.971 C 3.097,18.922 5.322,8.067 0,0' style='fill:%23909090;fill-opacity:1;fill-rule:nonzero;stroke:none' id='path74'/%3E%3C/g%3E%3Cg id='g76' transform='translate(330.6338,198.8799)'%3E%3Cpath d='m 0,0 c -5.322,-8.067 -16.177,-10.293 -24.245,-4.971 -8.068,5.323 -10.292,16.178 -4.97,24.245 5.322,8.068 16.177,10.293 24.244,4.971 C 3.097,18.922 5.322,8.067 0,0' style='fill:%23909090;fill-opacity:1;fill-rule:nonzero;stroke:none' id='path78'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
    background-size: 20vw;
    background-position: 3vw 3vw;
    margin-top: Calc(6rem + 1px);
}

.header {
    position: fixed;
    z-index: 100;
    width: 100%;
    height: Calc(6rem + 1px);
    display: flex;
    min-width: 0;
    justify-content: space-between;
    background-color: black;
    border-bottom: 4px solid #fcee21;
}


.logo {
    margin-left: 1rem;
    width: 100%;
}

.logo img {
    height: 6rem;
    width: 6rem;
}

.topbar {
    width: 100%;
}

.topnav {
    height: 6rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}

.icon {
    display: none;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    color: #909090;
    font-size: 6rem;
    text-align: center;
}

.navitem {
    width: auto;
    color: #909090;
    text-decoration: none;
    margin-top: 4px;
    padding-left: 4%;
    padding-right: 4%;
    white-space: nowrap;
    font-family: "Passion One", serif;
    font-size: 3vw;
    cursor: pointer;
    -webkit-transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    -o-transition: color 0.2s linear;
    transition: color 0.2s linear;
}

.navitem:is(:hover, :active) {
    color: #fcee21;
}

.navitem.active {
    color: #fcee21;
}

#listicon {
    color: #909090;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transition: transform 0.3s cubic-bezier(.68, -0.55, .27, 1.55), color 0.3s linear;
    -moz-transition: transform 0.3s cubic-bezier(.68, -0.55, .27, 1.55), color 0.3s linear;
    -o-transition: transform 0.3s cubic-bezier(.68, -0.55, .27, 1.55), color 0.3s linear;
    transition: transform 0.3s cubic-bezier(.68, -0.55, .27, 1.55), color 0.3s linear;
}

@media screen and (min-width: 1600px) {
    .navitem {
        font-size: 48px;
    }
}

@media screen and (max-width: 800px) {
    .navitem {
        font-size: 24px;
    }
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .header {
        display: grid;
        justify-content: space-between;
        grid-template-columns: 50% 50%;
    }

    .topnav {
        z-index: 2;
        height: 100%;
        display: inline-flex;
        flex-direction: column;
        align-items: flex-end;
        background-color: black;
        border: 2px solid #fcee21;
        border-top: none;
        border-bottom-left-radius: 10px;
        transform-origin: top;
        -webkit-transition: all 0.3s cubic-bezier(.79, .14, .15, .86);
        -moz-transition: all 0.3s cubic-bezier(.79, .14, .15, .86);
        -o-transition: all 0.3s cubic-bezier(.79, .14, .15, .86);
        transition: all 0.3s cubic-bezier(.79, .14, .15, .86);

    }


    #myTopnav {
        transform: scaleY(0%);

    }

    .topnav a {
        font-size: 10vw;
    }

    .icon {
        width: 100%;
        display: flex;
    }

    #myTopnav.responsive {
        transform: scaleY(100%);
    }

    #listicon {
        transform: rotate(180deg);
    }

    #listicon.open {
        transform: rotate(90deg);
        color: #fcee21;
    }

    .topnav.responsive .icon {
        display: flex;
        align-items: flex-end;
        color: #fcee21;
    }

    .topnav.responsive .navitem {
        float: none;
        display: block;
        text-align: right;

    }


}


.footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    min-height: 6rem;
    padding: 0.5rem;
    color: white;
    background-color: black;
    border-top: 4px solid #fcee21;
    transition: margin-top 1s linear;
    -webkit-transition: margin-top 1s linear;
    -moz-transition: margin-top 1s linear;
    -o-transition: margin-top 1s linear;

}

.footer-item {
    margin-left: 1em;
    margin-right: 1em;
    padding-left: 1em;
    border-left: 2px solid white;
}

.footer-item:first-child {
    margin-left: 0;
    margin-right: 1em;
    border-left: none;
    padding-left: 0;
}

.footer-item:last-child {
    margin-left: 1em;
    margin-right: 0;
}

.footer-item .text {
    font-size: 1rem;
}

.footer-item.gridDisplay {
    display: flex;
    flex-direction: column;
}


.footer-item.gridDisplay .footer-header {
    margin-bottom: 0;
}

.footer-item.gridDisplay .logo {
    margin: 0;
}

.footer-item.gridDisplay .logo img {
    height: 10rem;
    width: 100%;
    margin-bottom: 1rem;
    overflow: hidden;
}

.footer-item.contact .text {
    font-size: 1.5rem;
}

.footer-item.contact .text a {
    text-decoration: none;
    color: #fcee21;
}

.footer-item.contact .discord {
    font-size: 1rem;
}

.footer-item.contact .mail {
    font-size: 1rem;
}

.footer-header {
    font-size: 2.5rem;
    margin-bottom: 0.4em;
}

.footer-item.navigation {
    display: flex;
    flex-direction: column;
}

.footer-item.navigation a {
    text-decoration: none;
    color: white;
    margin: 0;
    padding: 0.2em;
    font-size: 1.5em;
    transition: color 0.2s linear;
    -webkit-transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    -o-transition: color 0.2s linear;
}

.footer-item.navigation a.active {
    color: #fcee21;
}

.footer-item.navigation a:is(:hover, :active) {
    color: #fcee21;
}

.footer-item.newsletter form {
    height: 2.5em;
    margin-top: 1em;
    display: flex;
    flex-direction: row;
    width: 100%;
}

.footer-item.newsletter form input {
    background-color: black;
    color: #909090;
    border: 2px #909090 solid;
    margin-right: 4px;
    width: 100%;
    border-radius: 0;
    font-size: 1em;
    transition: outline-color 0.2s linear;
    -webkit-transition: outline-color 0.2s linear;
    -moz-transition: outline-color 0.2s linear;
    -o-transition: outline-color 0.2s linear;
}

.footer-item.newsletter form input:focus {
    outline-color: #fcee21;
    outline-style: solid;
    outline-width: 2px;
}

.footer-item.newsletter form .btn {
    color: white;
    font-family: "Passion One", serif;
    font-size: 1em;
    font-weight: normal;
    background-color: black;
    border: 2px #909090 solid;
    cursor: pointer;
    width: fit-content;
    transition: border 0.2s linear;
    -webkit-transition: border 0.2s linear;
    -moz-transition: border 0.2s linear;
    -o-transition: border 0.52s linear;

}

.footer-item.newsletter form .btn:is(:hover, :active, :focus) {
    border-color: #fcee21;
}

@media screen and (max-width: 1000px) {
    .footer {
        display: flex;
        flex-direction: column;
        padding-bottom: 0;
    }

    .footer-item {
        margin: 1rem 0 0;
        padding: 0 0 1rem;
        border: none;
        border-bottom: 2px solid white;
    }

    .footer-item:first-child {
        margin: 0;
        padding: 0 0 1rem;

    }

    .footer-item:last-child {
        padding: 0;
        margin: 1rem 0 0;
        border-bottom: none;
    }
}

.first {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1vw;
    overflow: hidden;
    backdrop-filter: brightness(50%) blur(3px);
    -webkit-backdrop-filter: brightness(50%) blur(3px);
}

.first .welcome {
    opacity: 0;
    text-align: center;
    font-size: 13em;
    animation-name: flyandfadin;
    animation-duration: 0.75s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    transform-origin: top;
    line-height: 0.80em;
    margin-top: 0.1em;
}

.first .welcome .name {
    font-size: 1.1em;
    color: #fcee21;

}

.first .newcomunity {
    opacity: 0;
    font-size: 6em;
    text-align: center;
    animation-name: flyandfadin;
    animation-duration: 0.75s;
    animation-timing-function: ease-out;
    animation-delay: 0.75s;
    animation-fill-mode: forwards;
    transform-origin: top;
}

.first .discord {
    opacity: 0;
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    font-size: 6em;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
    animation-name: flyandfadin;
    animation-duration: 0.75s;
    animation-timing-function: ease-out;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
    transform-origin: top;
}

.first .discord > * {
    margin: 0;
    white-space: nowrap;
}

.first .discord .number {
    color: #fcee21;
}

.home .first .small {
    opacity: 0;
    font-size: 4em;
    margin: 0.2em;
    text-align: center;
    animation-name: flyandfadin;
    animation-duration: 0.75s;
    animation-timing-function: ease-out;
    animation-delay: 2.25s;
    animation-fill-mode: forwards;
    transform-origin: center;
}

.home .first .small2 {
    opacity: 0;
    font-size: 4em;
    margin: 0.2em;
    text-align: center;
    animation-name: flyandfadin;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    transform-origin: center;
}

.first .btn {
    opacity: 0;
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 5em;
    color: white;
    background-color: black;
    border: #909090 solid 4px;
    padding: 0.2em;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.52s linear;
    animation-name: flyandfadin;
    animation-duration: 0.50s;
    animation-timing-function: ease-out;
    animation-delay: 3.5s;
    animation-fill-mode: forwards;
    transform-origin: top;
}

.bi-discord {
    font-style: normal;
}

.first .btn:hover {
    border: #fcee21 solid 4px;
    transform: scale(1.1);

}


@media screen and (min-width: 1600px) {
    .first {
        font-size: 16px;
    }
}


@keyframes flyandfadin {
    0% {

        transform: translateY(100%) scale(10);

    }
    90% {
        opacity: 0.75;
        transform: translateY(0%) scale(0.9);

    }
    100% {
        opacity: 1;
    }
}

.impressum {
    backdrop-filter: brightness(50%) blur(3px);
    -webkit-backdrop-filter: brightness(50%) blur(3px);
}

.main.gridDisplay {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 3rem;
    padding: 3rem;
}

.card {
    display: flex;
    flex-direction: column;
    border: #fcee21 solid 4px;
    border-radius: 4px;
    padding: 1em;
    align-items: center;
    max-height: fit-content;
    backdrop-filter: brightness(50%) blur(3px);
    -webkit-backdrop-filter: brightness(50%) blur(3px);
}

.card .picture {
    max-width: 15em;
    border-radius: 50%;
    border: #fcee21 solid 4px;
}

.card .screenshot {
    max-width: 15em;
    border-radius: 50%;
    border: #fcee21 solid 4px;
}

.card .text {
    flex: 1;
    font-size: 1.2em;
}

.card .socials {
    margin-top: 1em;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.card .bi {
    color: white;
    font-size: 2em;
    transition: all 0.2s linear;
}


.card .bi:hover {
    color: #fcee21;
    transform: scale(1.2);
}

.card .intrests {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
    justify-content: space-evenly;
    padding: 0;
    text-align: center;
    font-size: 1em;
}

.card .intrests li {
    list-style-type: none;
}

@media screen and (max-width: 100rem) {
    .main.gridDisplay {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 50rem) {
    .main.gridDisplay {
        grid-template-columns: 1fr;

    }
}

.copyright {
    color: #909090;
    background-color: black;
    text-align: center;
    border-top: 2px solid #909090;
}