/* Selektor für Klassen (mehrere Tags): Punkt (.) */
.redTitle{
    color:red /* Text-Farbe auf "blue" ändern */
}

/* Selektor für IDs (nur ein Tag): Hashtag (#) */
#blueBg{
    background-color: blue; /* Hintergrundfarbe auf "blue" ändern */
    color:white /* Text-Farbe auf "white" ändern */
}
.title{
    font-size: 55px;
    font-family:fantasy;
    color:rgb(184, 196, 206);
    
    

}

html, body {
    height: 100%; 
    margin: 0px;
    background:linear-gradient(to bottom, purple,rgb(0, 255, 102) );
}
.container {
    background: transparent;
}
html, body {
width:100%;
margin:0;
}
.brainrot{
width:100%;
text-align: center;
font-size: 10vw;
font-family:m;
color:rgb(206, 21, 21)
}



.open-btn {
    position: fixed;
    top: 10px;
    left: 10px;
    font-size: 25px;
}
main {
    padding: 40px;
}


article {
    max-width: 900px;
    margin: auto;
}


h1 {
    font-size: 60px;
    color: rgb(206,21,21);
}


section {
    min-height: 300px;
    background: rgba(255,255,255,0.2);
    padding: 20px;
    margin: 30px 0;
}
.brainrot-image {
    width: 400px;
    max-width: 100%;
    display: block;
    margin: 20px auto;
}
div:has(> blockquote) {
  background-color: #b0a1319d;
  margin: 10px auto;
  padding: 15px;
  border-radius: 5px;
}

blockquote p::before {
  content: "\201C";
}

blockquote p::after {
  content: "\201D";
}

blockquote + p {
  text-align: right;
}