/* Body and Text stuff */

body {
  background-image: url("Assets/Backgrounds/Tile.png");
  background-repeat: repeat;
  background-color: #ffcbd3;
  color: #8b0e5d;
  font-family: Verdana;
  margin: 20px;
  padding: 34px
}

h1
{text-align: center;
font-family: 'Brush Script MT', cursive;
color: #c71195;
}

p
{text-align: center;
}


/* Image container settings do not mess with these */




.container {
 display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.container img {
  display: inline-block;
  vertical-align: top;
  height: auto;
  max-width: none; /* prevents squishing */
}

.welcome {
  width: 233px; /* or whatever fits */
}

.Text {
   display: flex;
  justify-content: center;
  }
 

.Graphic {
   display: flex;
  justify-content: center;
  }

img {
  max-width: none;
  height: auto;
}




/* Nav Bar, Unused */

.navbar {
  text-align: center;
  margin: 14px auto;
  padding: 6px;
  background-color: #ffe1ec;
  border: 2px dashed #fc70c4;
  border-radius: 12px;
  max-width: fit-content;
}

.nav-button {
  display: inline-block;
  background-color: #ffc6dd;
  color: #8b0e5d;
  font-family: 'Chewy', cursive;
  font-size: 14px;
  padding: 8px 18px;
  margin: 2px;
  border: 2px solid #c71195;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 0 5px #ff9ad5;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 8px #ff70cb, 0 0 12px #ffaae3;
  background-color: #ffd8e9;
}



/* Currently listening! */

.listening {
  background: linear-gradient(to right, #ffc6dd, #ffe1ec);
  padding: 10px 20px;
  border: 2px dotted #f784c9;
  border-radius: 12px;
  display: inline-block;
  font-family: 'Chewy', cursive;
  font-size: 16px;
  margin-top: 10px;
  box-shadow: 0 0 8px #ffb7e2;
}

.listening a {
  color: #c71195;
  text-decoration: none;
  transition: all 0.2s ease;
}

.listening a:hover {
  color: #fff;
  text-shadow: 0 0 6px #8f69d6, 0 0 10px #ffaae3;
}