/* ELEMENTS */
/* Containging all objects that can be seen. */

/* HEADINGS */

.main-heading {
    color: var(--white-violet);
    font-size: 11vmin;
    font-weight: bold;
    letter-spacing: .2rem;
}

.second-heading {
    color: var(--white-violet);
    font-size: 4.6vmin;
    font-weight: bold;
}

.sub-heading {
    padding-top: 4vh;
    color: var(--white-violet);
    font-size: max(3.5vh, 2.2vmax);
    font-weight: bold;
}

.sub-heading-line {
    margin-top: max(-10px, -0.5vmax);
    padding: max(0.6vh, 0.4vmax) max(5.1vh, 3.4vmax);
    background-color: var(--dark-yellow);
}

.sub-heading-text {
    margin-top: max(2vh, 1.8vmax);
    width: max(500px, 35vmax);
    text-align: center;
    line-height: max(3vh, 2vmax);
}

/* Texts */

.light-text {
    color: var(--white-violet);
}

.medium-text {
    font-size: max(2.5vh, 1.5vmax);
}

.light-emoji {
    color: transparent;
    text-shadow: 0 0 0 var(--white-violet);
}

/* BUTTONS */

.button {
    padding: max(2vh, 1.8vmin) max(2vh, 3.4vmin);
    border-radius: 50vw;
    border: none;
    outline: none;
    font-size: max(2vh, 1.8vmin);
    font-weight: bold;
}

.light-button {
    background-color: var(--light-violet) !important;
    color: var(--dark-violet) !important;
}

.dark-button {
    background-color: var(--dark-yellow) !important;
    color: var(--dark-violet) !important;
}

.back-button {
    position: absolute !important;
    margin-top: 0vmin;
    margin-left: max(25px, 2vmax);
    padding: 0px 0px !important;
    width: max(6vh, 4vmax) !important;
    height: max(6vh, 4vmax) !important;
    background-color: var(--medium-violet) !important;
    color: var(--dark-violet) !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.back-button-image {
    stroke-width: 10vh;
    width: max(3.3vh, 2.2vmax);
    height: max(3.3vh, 2.2vmax);
    filter: invert(14%) sepia(24%) saturate(6794%) hue-rotate(251deg) brightness(110%) contrast(139%);
}

/* PANELS */

.about-panel {
    margin-top: 2vmax;
    max-width: max(55vh, 50vmax);
    height: max(14vh, 10vmax);
    background-color: var(--medium-violet);
    border-radius: 3.2vmin;
}

.inner-about-panel {
    margin-right: max(1vh, 1vmax);
    margin-left: max(1vh, 0.6vmax);
    padding-top: max(1vh, 1vmax);
    margin-bottom: max(1vh, 1vmax);

}

.about-panel-image {
    width: max(12vh, 8vmax);
    height: max(12vh, 8vmax);
}

.about-panel-text {
    /* Verschoben um Bildgröße und offset */
    margin-left: calc(max(12vh, 8vmax) + max(2vh, 2.55vmax));
    margin-top: min(-10vh, -6.6vmax);
}

.about-panel-name {
    color: var(--white-violet);
    font-size: max(3vh, 1.7vmax);
    font-weight: bold;
}

.game-panel-main {
    margin-top: 20px;
    max-width: max(550px, 51.8vmax);
    height: max(250px, 26.3vmax);
    background-color: var(--medium-violet);
    border-radius: 3.2vmin;
    overflow: hidden;
    transition: transform 0.2s ease;
    transform: scale(1);
    justify-content: center;
    align-items: center;
    display: flex;
}

.game-panel-main-img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    height: max(250px, 26.3vmax);
}

.game-panel-main-left {
    overflow: hidden;
    width: 64%;
    float: left;
}


.game-panel-main-right {
    width: max(300px, 36%);
    float: right;
    margin-top: max(1.5vh, 1vmax);
    margin-bottom: max(1.5vh, 1vmax);
}

.game-panel-main-heading {
    color: var(--dark-yellow);
    font-size: max(2.5vh, 1.7vmax);
    padding-top: 5%;
    font-weight: bold;
    text-align: center;
    margin-left: 5%;
    margin-right: 5%;
}

.game-panel-main-text {
    color: var(--white-violet);
    font-size: max(1.5vh, 1vmax);
    font-weight: bold;
    padding: 0 max(3vh, 2vmax);
    margin-top: -0.3vmax;
    hyphens: auto;
    text-align: justify;
}

/* PILLS */

.pill {
    transition: transform 0.2s ease-out;
    position: absolute;
    width: 75vmin;
    height: 25vmin;
    transform: rotateY(0deg) rotate(-45deg);
    border-radius: 100vw;
}

.pill-yellow {
    z-index: -1;
    background-color: var(--dark-yellow);
}

.pill-light {
    z-index: -2;
    background-color: var(--light-violet);
}

.pill-medium {
    z-index: -3;
    background-color: var(--medium-violet);
}

/* GRIDS */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr) ;
    /* background-color: #2196F3; */
    margin-top: 10vmin;
    margin-left: 10vw;
    margin-right: 10vw;
}

.grid-item {
    background-color: var(--medium-violet);
    border-radius: 3.2vmin;
    overflow: hidden;
    transition: transform 0.2s ease;
    transform: scale(1);
    margin: auto;
    height: fit-content;
    width: 100%;
    font-size: 30px;
    text-align: center;
    margin-top: 10%;
    max-width: 90%;
    flex-direction: column;
}

.grid-item-up {
    overflow: hidden;
    width: 100%;
    height: auto;
    flex: 2;
}

.grid-item-image {
    position: relative;
    left: 0% ;
    transform: translate(-0%, 0%);
    height: auto;
    width: 100%;
}

.grid-item-down {
    width: 100%;
    height: fit-content;
    flex: 1;
}

.grid-panel-text {
    color: var(--white-violet);
    font-size: max(1.5vh, 1vmax);
    font-weight: bold;
    padding: 0 max(3vh, 2vmax);
    margin-top: -0%;
    margin-bottom: 10%;
    hyphens: auto;
    text-align: justify;
}

.grid-panel-heading {
    color: var(--dark-yellow);
    font-size: max(2.5vh, 1.7vmax);
    padding-top: 10%;
    font-weight: bold;
    text-align: center;
    margin-left: 5%;
    margin-right: 5%;
}


/* BACKGROUNDS */

.dark-background {
    background-color: var(--dark-violet);
}

.medium-background {
    background-color: var(--medium-violet);
}

.light-background {
    background-color: var(--light-violet);
}

/* MEDIA QUERYS */

@media only screen and (max-width: 600px) {
    .about-panel {
        margin-top: 4vh;
        max-width: max(55vh, 50vmax);
        height: max(20vh, 10vmax);
        background-color: var(--medium-violet);
        border-radius: 1vmax;
    }
  }

@media only screen and (max-aspect-ratio: 3/4) {
    .game-panel-main {
        margin-top: 20px;
        max-width: 90%;
        height: auto;
        flex-direction: column;
    }
    
    .game-panel-main-img {
        position: relative;
        left: 0% ;
        transform: translate(-0%, 0%);
        height: auto;
        width: 100%;
    }
    
    .game-panel-main-left {
        overflow: hidden;
        width: 100%;
        height: auto;
        flex: 2;
    }
    
    .game-panel-main-right {
        width: 100%;
        height: fit-content;
        flex: 1;
    }

    .grid-container {
        grid-template-columns: repeat(1, 1fr) ;
    }
}