/* Mobile-friendly CSS */
@media only screen and (max-width: 500px) {
body {
    background-color: #101010;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    color: #2cab66;
    text-align: center;
}

@font-face {
    font-family: neon;
    src: url(neon.ttf);
}

h2, h4 {
    font-family: neon;
    text-shadow: 0 0 32px #ffcc00;
}

h2 {
    font-size: 1.4em;
}

h4 {
    font-size: 2.5em;
    color: #ffcc00;
}

h4 a {
    text-decoration: none;
    font-size: 1.8em;
    color: #ffcc00;
}

/* Adjust navigation links */
a {
    text-decoration: none;
    font-family: neon;
}

a.text {
    color: #FED128;
}

a.navi {
    color: #426DFB;
    font-size: 22px;
    text-shadow: 0 0 2vw #2356FF;
    display:block
}

/* Responsive images */
img.lable, img.svgshadow {
    max-width: 90%;
    height: auto;
}

img.svgshadow {
  max-width: 65%;
}

.post, .angebotcontainer {
    width: 90%;
    padding: 15px;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.content img {
    max-width: 120px;
    margin-bottom: 10px;
}

.text {
    font-size: 16px;
    text-align: center;
}

.container {
    text-align: center;
}

.failure {
  font-family: neon;
  font-size: 2em;
  animation: flicker 1.5s infinite alternate;
  color: #fff;
  text-align: center;
}

.neon, .flux {
    font-size: 8vw;
}

/* Adjust playing cards for mobile */
.playingCards .card {
    width: 2.8em;
    height: 4em;
    font-size: 2.5em;
}

.playingCards .rank {
    font-size: 0.5em;
}

.playingCards .card .datum {
    font-size: 0.4em;
}

/* Hide unnecessary hover effects on mobile */
@media (hover: none) {
    .playingCards a.card:hover,
    .playingCards a.card:active,
    .playingCards a.card:focus {
        bottom: 0;
    }
}

@media (min-width: 768px) {
    .post, .angebotcontainer {
        width: 60%;
    }
}
}