/* styles.css */

/* BANNER */

}

.tikker2 {		
				font-family:serif;
    	       font-style:italic;
				font-size:2em;
}


/* FONT */

@font-face {
    font-family: 'OCR A Regular';
    src: url('ocr-aregular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #b364a5;
    font-family: 'OCR A Regular', monospace;
    color: white;
    margin: 0;
    padding: 0;
}

.title {
    position: absolute;
    top: 6%;
    left: 10%;
    font-size: 4em;
    color: white;
    /*text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black;*/
    padding: 0;
    margin: 0;
    transition: transform 0.3s ease;
}


.heart {
    position: absolute;
    top: 0;
    right: 2em;
    width: 11em;
    height: auto;
    transition: transform 0.3s ease;
}

.line {
    position: absolute;
    top: 20%;
    width: 100%;
    height: 1px;
    background-color: white;
    transform: translateY(-50%);
    z-index: 1;
}

#playButton {
    position: absolute;
    top: 40%;
    left: 25%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border: none; 
    background-color: transparent;
    z-index: 1000;
}

#playButton img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1000;
}

/*
.inhalt {
    position: absolute;
    top: 20px;
}
*/

/* Style the table headers */
th {
    background-color: rgba(242, 242, 242, 0.5); /* Set background color with transparency */
    padding: 10px; /* Optional: Add padding */
    text-align: left; /* Optional: Align text */
}

/* Style the table cells */
td {
    border: 1px solid rgba(221, 221, 221, 0.9); /* Set border color with transparency */
    padding: 8px; /* Optional: Add padding */
    text-align: left; /* Optional: Align text */
}

/*
table:hover{
    transform: scale(1.04);
    transition: transform 0.5s ease;
} 
*/

.upcoming {
    position: absolute;
    top: 760px;
    left: 5%;
    font-size: 1em;
    width: 90%;
    margin: 0 auto;
}

.chat {
    position: absolute;
    z-index: 1000;
    top: 47%;
    right: 25%;
    width: 50%;
    height: 50vh;
    max-height: 90vh;
    transform: translate(50%, -50%);
}

.about-section {
    position: absolute;
    top: calc(71% + 1200px);
    left: 5%;
    font-size: 1em;
    width: 90%;
    margin: 0 auto;
}

a {
    color: white;
}

.smiley-picture {
    width: 0.5%;
    /* Adjust the width as needed */
    height: auto;
    object-fit: contain;
    z-index: 1000;
    position: absolute;
    top: 80%;
    /* Adjust the top position as needed */
    left: 5%;
    /* Adjust the left position as needed */
    margin: 0 auto;
}

.picture-with-text {
    width: 0.5%;
    /* Adjust the width as needed */
    height: auto;
    object-fit: contain;
    z-index: 1000;
    position: absolute;
    top: 90%;
    /* Adjust the top position as needed */
    left: 5%;
    /* Adjust the left position as needed */
    margin: 0 auto;
}

.bildimtext {
    width: 90%;
    height: auto;
    margin: auto;
}

/* Media query for desktop devices */

    

/* styles.css */

/* Existing CSS rules remain unchanged */

/* Media query for mobile devices */

@media only screen and (max-width: 600px) {
    .title {
        margin: 50px auto;
        /* Adjust margin as needed */
        font-size: 2.4em;
    }


    .upcoming {

        width: 90%;
        top: 550px;

    }

    .heart {
        position: absolute;
        top: 0;
        right: 2em;
        width: 7em;
        height: auto;
        transition: transform 0.3s ease;
    }

    #playButton {
        position: relative;
        top: 150px;
        /* Adjust the value to place it below the title and heart-container */
        left: 50%;
        transform: translateX(-50%);
        width: 50%;
        height: auto;
        margin: 20px auto;
        /* Adjust margin as needed */
        z-index: 1000;
    }

    .inhalt {
        position: relative;
        top: 150px;
        left: auto;
        margin: 20px auto;
        /* Adjust margin as needed */
    }

    .chat {
        position: relative;
        right: auto;
        width: 90%;
        height: auto;
        max-height: none;
        transform: none;
        margin: auto;
        /* Adjust margin as needed */
    }

    .about-section {
        position: relative;
        top: 600px;
        left: auto;
        margin: 20px auto;
        /* Adjust margin as needed */

    }
 body {
        background-size: 100%; /* Adjusted background size for mobile phones */
        background-position: top left; /* Adjusted position for mobile phones */
    }
}






/* ARCHIV */


.archivcontainer {
    position: relative;
    margin-top: 1000px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
        .audio-players {
            width: 80%;
            max-width: 600px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .audio-player {
            margin-bottom: 20px;
            width: 100%;
            text-align: center;
        }
        .controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        input[type='range'] {
            flex: 1;
        }
        button {
            font-size: 1.5em;
            background: none;
            border: none;
            color: #FECB00;
            cursor: pointer;
        }

        /* Media Query für kleinere Bildschirme */
        @media (max-width: 768px) {
            .audio-players {
                width: 100%; /* Volle Breite auf kleinen Bildschirmen */
                margin: 0 auto; /* Zentriert die Audio-Player */
            }
            .audio-player {
                width: auto; /* Stelle sicher, dass der Player selbst auch 100% breit ist */
            }
        }