body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  text-align: center;
  margin: 0;
  font-family: Oswald;
}

ul {
  list-style-type: none;
}

nav {
  height: 6vh;
  display: flex;
  align-items: center;
  background-color: white;
  font-family: Oswald;
  font-size: 1.8vh;
}

.logo {
  color: white;
  /* Use the Black Han Sans font */
  font-family: 'Black Han Sans', sans-serif;
  -webkit-text-stroke: 1px black;
  font-size: 2vh;

}

.home.logo {
  font-size: 9vw;
  padding-bottom: 10vh; /*to compensate navigation*/
  -webkit-text-stroke: 2px black;
  /* position: absolute; */
  transition: all 0.1s ease; /* Smooth transitions */
}

.home.bg {
  display: flex;
  justify-content: center;
  align-items: center;
  /* Replace with the path to your image */
  background-image: url('images/pattern.png');
  /* Full size background image */
  background-size: cover;
  /* Center the background image */
  background-position: center;
  /* No repeat */
  background-repeat: no-repeat;
  /* Set the size of the div */
  width: 100vw;
  height: 100vh;
}

.home.description {
  position: absolute;
  top: 70vh;
  left: 70vw;
  font-size: 3vh;
}

#scenes {
  display: flex;
  justify-content: center;
  width: 80vw;
  flex-wrap: wrap;
  margin-right: 10vw;
  margin-left: 10vw;
}

#scenes2 {
  display: flex;
  justify-content: center;
  width: 80vw;
  flex-wrap: wrap;
  margin-right: 10vw;
  margin-left: 10vw;
}

@media only screen and not (orientation: landscape) {
  #scenes{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

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

  .scene.card {
    width: 80vw;
    min-height: 40vh;
  }

  img.scene {
    width: 60vw !important;
    margin-top: 4vh;
  }
}

.scene.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 20vw;
  margin: 1vw;
  border: 1px solid #ccc;
  transition: all 0.3s ease;
  background-color: white;
}

img.scene  {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 18vw;
  aspect-ratio: 1;
  padding: 1vw;
  pointer-events: none;
}

.scene:hover {
  transform: scale(1.05);
  box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
}

.song-title {
  /* margin-top: 1vh; */
  margin-bottom: 4vh;
  color: black;
}

.title, .video-link {
  display: block;
  text-align: center;
}

.visualization {
  display: block;
  width: 300px;
  height: 50px;
  margin: 0 auto;
}

.image-source {
  margin: 2vh;
  font: small;
  color: gray;
}


nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

nav li {
  padding: 10px;
}

nav a {
  text-decoration: none;
  color: black;
}

#dragon-container {
  position: relative;
  width: 25vh;
  height: 25vh;
}

#dragon {
  width: 100%;
  height: 100%;
}

#dragon-heart {
  position: absolute;
  width: 4vh;
  height: 4vh;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.1s ease; /* Smooth transitions */
  cursor: none;
  pointer-events: none;
  border: 0;
  padding: 0;
}

.content {
  text-align: left;
}

.title-image {
  width: 70vw;
}

.content-container {
  width: 70vw;
  margin-right: 15vw;
  margin-left: 15vw;
  font-size: 2vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer {
  margin-bottom: 30vh;
}

.content-image {
  width: 100%;
  margin-top: 2vh;
  margin-bottom: 2vh;
}


.tag {
  border: 1px solid #ccc;
  padding: 1vw;
  transition: all 0.1s ease; 
  width: fit-content;
}

.tag:hover{
  background-color: black;
  color: white;
}

.youtube.link {
  color: black;
  text-decoration: none;
  padding: 1vw;
}

.youtube.button {
  border: 1px solid #ccc;
  width: fit-content;
}

.container {
  width: 100vw;
}

.row {
  display: flex;
  margin-left: 15vw;
  margin-right: 15vw;
}

.section-title {
  margin: 0;
  font-size: larger;
}
.section-subtitle {
  margin: 0;
}
.section {
  width: 100%;
  padding: 2vw;
}

.section-img {
  width: 60%;
}

.section:hover {
  transform: scale(1.05);
  box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
}