:root {
    color-scheme: light dark;
  }

body, div, iframe{
    background-color: #FFFFFF;
    font-family: "Lucida Console", Monaco, monospace;
    color: #303030;
    }

    @media (prefers-color-scheme: light), (prefers-color-scheme: dark) 
    { body, div, iframe { 
    background-color: #FFFFFF;
    font-family: "Lucida Console", Monaco, monospace;
    color: #303030; } 
    }
    
/* Text Formatierungen */

h1  {
    font-weight: bold;
    letter-spacing: -1.5px;
    font-size: 1em;
    } 

p   {
    letter-spacing: -1.5px;
    }

    /* FOR MOBILE */
    @media only screen and (max-width: 600px) {
        p {
        font-size: 1.2em;
        }
        }
    /* FOR DESKTOP */
    @media only screen and (min-width: 601px) {
        p {
        font-size: 1em;
        }
        }

a   {
    text-decoration: none;
    color: #303030;
    }

a:hover {
    border-bottom: 2px dotted;
    }
    
/* Funktion für den "blink" Effekt bei Text */
@keyframes blink {
        0% {opacity: 1;}
        50% {opacity: 0;}
        100% {opacity: 1;}
        }           
        
.blinking-text {
        animation: blink 2s infinite;
        }
     
/* für alle Seiten */
        
div {
    margin: auto;
    text-align: center; /* center horizontally */
   }

    /* FOR MOBILE */
    @media only screen and (max-width: 600px) {
        div {
            width: 85%;
        }
        }

    /* FOR DESKTOP */
    @media only screen and (min-width: 601px) {
        div {
            width: 33%;
            max-width: 600px;
        }
        }

.logo {
    margin-top: 10%;
    height: auto;
    width: 75%;
    max-width: 350px;
    }

.about { 
    margin-top: 0px;
    font-size: 0.7em;
    }

.hidden {
    margin-top: 1%;
    font-size: 0.7em;
    display: none;
    }

.about:hover + .hidden {
    display: block;
    }

/* für subseiten "video.html", "links_frame.html" & "soundcloud_player.html" */

.subpage_header {
    margin-top: 5%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    font-size: 1.3em;
    font-weight: bold;
    letter-spacing: -1.5px;
    }

    /* FOR MOBILE */
    @media only screen and (max-width: 600px) {
        .subpage_header {
           width: 85%;
        }
        }

    /* FOR DESKTOP */
    @media only screen and (min-width: 601px) {
        .subpage_header {
           width: 33%;
           max-width: 600px;
        }
        }

.subpage_header_logo {width: 20%; max-width: 70px;}

.title {margin-bottom: 5px;}

.player_and_links_frame {
    margin-top: 1%;
    height: 55vh;
    border-style: dashed;
    border-width: 2px;
    border-color: 303030;
    }

    /* FOR MOBILE */
    @media only screen and (max-width: 600px) {
        .player {
        width: 85%;
        }
        }

    /* FOR DESKTOP */
    @media only screen and (min-width: 601px) {
        .player {
        width: 33%;
        max-width: 600px;
        }
        }

.back_to_home_link {
    margin-top: 12px;
    margin-bottom: 10px;  
     }

 .back_to_home_link a:hover {
    text-decoration: none; border-bottom: 2px dotted;
    }
 
/* für Seite "links_frame_socialmedia.html" */

.socialmedia_main_frame {
    /*max-width: 450px; */
    /*height: 100%; */
    margin-top: 5%;
    border-style: dashed;
    border-width: 2px; 
    border-color: 303030; 
    padding-top: 1%;
    padding-bottom: 10%;  
    }

.socialmedia_header {
    width: 100%;
    height: 5%;
    max-height: 160px;
    margin-top: 3%;
    }
    
.socialmedia_header img {
    width: 30%; 
    max-width: 150px;
    }

.socialmedia_header p {
    font-size: 0.9em;
    }

.socialmedia_subheader {
    width: 100%;
    height: auto;
    margin-top: 10%;
    }
    
.socialmedia_subheader p {
    font-size: 0.9em;
    } 

.socialmedia_news {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    }
  
.socialmedia_news p {
    font-size: 0.9em;
    }
    
/* für "links.html" (wird in "links_frame.html" und "links_frame_socialmedia.html" angezeigt)  */

.links_grid {
    margin-top: 5%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 6fr; /* Two columns with a 1:3 ratio */
    grid-row-gap: 5%; /* Adjust this value to set the desired spacing between rows */
    }
    
.links_grid a:hover {
    text-decoration: none; 
    border-bottom: none;
    }

.links_grid_icons img {
    width: 25px;
    height: auto;
    }

.links_grid_text { 
    width: 100%;
    text-align: left;
    font-size: 0.9em
    }

.links_grid_text a {
    text-align: left; 
    font-size: 0.85em;
    } 

/* für privacy-warning auf soundcloud-player subseite */

.privacy_warning {
    margin-top: 10%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* horizontally */
    justify-content: center; /* vertically */
    font-size: 0.90em;
    }
  
.privacy_warning_text {
    margin-bottom: 5%;
    text-align: left;
    font-size: 0.85em;
    }
  
.privacy_warning_links {
    margin-top: 2%;
    display: flex;
    justify-content: center;
    font-size: 0.85em;
    }