@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    overflow-x: hidden;
    line-height: 2;
}

header {
    position: fixed;
    background-color: #ffffffbb;
    backdrop-filter: blur(10px);
    top: 0px;
    transition: top 250ms ease;
    width: 100%;
    height: 85px;
    z-index: 5000;
}

@media (max-width: 40rem) {
    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }

    .templatesGrid {
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

@media (min-width: 40rem) {
    .desktop {
        display: block;
    }

    .mobile {
        display: none;
    }
}



span {
    transform: translateY(8px);
}

header h1 {
    position: absolute;
    left: 8px;
    top: 0px;
    color: black;
    display: inline;
}

.desktop ul {
    list-style-type: none;
    position: absolute;
    top: 12.5px;
    right: 8px;
    cursor: pointer;
}

.desktop li {
    display: inline-block;
}

#projects {
    text-align: center;
}

#projects ul {
    padding: 0;
}

#siteMenu {
    height: 100vh;
    background-color: slategray;
    position: absolute;
    right: 100vw;
    top: 85px;
    width: 100vw;
    transition: right 500ms ease;
}

header a {
    padding: 15px;
    color: black;
    transition: all 250ms ease;
    margin-right: 5px;
    border-radius: 10px;
}

a {
    cursor: pointer;
    text-decoration: underline;
    color: white;
}

footer {
    text-align: center;
    color: white;
}

#dropdownProducts a {
    display: block;
}

#dropdownProducts {
    height: auto;
    width: 250px;
    right: 80px;
    position: absolute;
    top: 70px;
    border-radius: 10px;
    background-color: slategray;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 500ms ease;
    transform-origin: top;
}

#dropdownProducts a {
    color: rgb(230, 230, 230);
    text-decoration: none;
}

#dropdownProducts a:hover {
    text-decoration: underline;
}

#expandMore {
    transition: transform 250ms ease;
}

#menuOpenIcon {
    position: absolute;
    right: 8px;
    top: 25px;
}

#menuCloseIcon {
    position: absolute;
    right: 8px;
    top: 25px;
}

#content {
    margin-left: 8px;
    min-height: 100vh;
}

#content a {
    color: black;
}

#discord {
    transform: translateY(15px);
}

#big-video {
    position: absolute;
    left: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    z-index: 0;
    text-align: center;
    background: linear-gradient(0deg, white, rgb(18, 98, 173));
}

.about img {
    height: 50px;
    transform: translateY(15px);
    border-radius: 100px;
}

.about a {
    color: black;
}

#big-image {
    text-align: center;
}

#big-image {
    height: 200px;
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(20px);
}

#big-image #text {
    margin-top: 100px;
}

.platz100 {
    margin-bottom: 101vh;
}

.platz80 {
    margin-bottom: 81vh;
}

#big-video div {
    position: absolute;
    bottom: 30vh;
    width: 100%;
}

.important {
    padding: 20px;
    background-color: rgba(0, 169, 164, 0.867);
    border-radius: 10px;
    transition: background-color 250ms ease;
    color: white;
}

.important:hover {
    background-color: rgba(0, 176, 230, 0.867);
}

#big-video a:visited {
    color: black;
}

#big-video h2 {
    margin-bottom: 40px;
}

button {
    cursor: pointer;
}

#platz {
    height: 85px;
}

h2 span {
    transform: translateY(0px) scale(5);
    margin: 5rem;
}

.topic {
    text-align: center;
}

hr {
    width: 75%;
}

#cookieWindow {
    position: fixed;
    bottom: 2rem;
    width: 20rem;
    height: auto;
    left: 2rem;
    background: linear-gradient(30deg, rgba(106, 90, 205, 0.867), rgba(72, 61, 139, 0.867));
    color: white;
    border-radius: 10px;
    display: block;
    backdrop-filter: blur(10px);
    transition: transform 500ms cubic-bezier(.86, 0, .49, .99);
}

#cookieWindow button {
    margin: 1rem;
    background-color: white;
    border: 0;
    padding: 10px;
    border-radius: 10px;
    transition: background-color 250ms ease;
}

#cookieWindow button:hover {
    background-color: darkgray;
}

#cookieWindow a {
    color: white;
    text-decoration: underline;
}

#cookieWindow p {
    margin-left: 1rem;
}

header #highlitedButton {
    background-color: #00A9A4;
    padding-left: 2rem;
    padding-right: 2rem;
    color: white;
}

header #highlitedButton:hover {
    background-color: #00b0e6;
}

table {
    width: 100%;
}

td {
    border-right: solid 1px black;
    text-align: center;
}

th {
    border-bottom: solid 1px black;
    border-right: solid 1px black;
}

#cookieSettings p {
    display: inline;
}

#cookieSettings button {
    background-color: white;
    padding: 10px;
    border: solid 1px black;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 250ms ease;
}

#cookieSettings button:hover {
    background-color: darkgray;
}

#cookieSettings input {
    cursor: pointer;
}

.templatesGrid li {
    width: 18rem;
    height: 20rem;
    background-color: gray;
    color: white;
    margin: 10px;
    display: inline-block;
    border-radius: 10px;
    cursor: pointer;
    transition: all 250ms ease;
}

.templatesGrid li:hover {
    transform: translateY(-10px);
    box-shadow: slategray 0px 10px 10px;
}

.templatesGrid li .image {
    position: absolute;
    background-color: #2a2a2a;
    width: 18rem;
    height: 12rem;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-size: cover;
}

.templatesGrid li .gridContent h3 {
    margin-top: 13rem;
    text-align: center;
}

.gridContent {
    text-align: center;
}


.changelogGrid .main {
    width: 20rem;
    background-color: gray;
    color: white;
    margin: 10px;
    display: inline-block;
    border-radius: 10px;
    cursor: pointer;
    transition: all 250ms ease;
}

.changelogGrid .main:hover {
    transform: translateY(-10px);
    box-shadow: slategray 0px 10px 10px;
}

.changelogGrid .main .image {
    position: absolute;
    background-color: #2a2a2a;
    width: 20rem;
    height: 12rem;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-size: cover;
}

.changelogGrid .main .gridContent h3 {
    margin-top: 13rem;
    text-align: center;
}

.gridContent {
    text-align: center;
}



footer {
    height: 320px;
    background: #2a2a2a;
    margin: 0;
    position: absolute;
    left: 0;
    width: 100%;
}

footer .platz {
    height: 60px;
}

.mobile a {
    color: white;
    padding: 15px;
    display: block;
    width: 80%;
    margin-left: 8px;
}

.small {
    font-size: 10px;
    display: inline;
}

#discordButton {
    background-color: #5865F2;
    color: white;
    padding: 20px;
    border-radius: 10px;
}

#discordIframe {
    margin-top: 20px;
}

/* templates backgrounds */
.templatesGrid li #template-1-img {
    background-image: url(/src/doggowatch.png);
}

.templatesGrid li #template-2-img {
    background-image: url(/src/discord.png);
}