* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.2rem;
  font-weight: 1.2rem;
  line-height: 1.25;
  background-color: #aa8a61;
  background-image: url("./bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

h1{
  text-align: center;
  text-decoration: underline;
  margin-bottom: 2rem;
}

.content {
  padding: 1.5rem;
  border: 4px solid #553e21;
  border-radius: 8px;
  background-color: #cfc9bb;
  background-image: url("./bg_div.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.audio-div{
  margin-bottom: 0.5rem;
}
audio{
  width: 100%;
  border: 4px solid #553e2166;
  border-radius: 4px;
}

.lang-switch {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  justify-content: center;
  border: 4px solid #553e21;
  background-color: #50483f80;
}

.lang-switch a {
  text-decoration: none;
  font-weight: 600;
  color: #303030;
  opacity: 1;
}

.lang-link{
  padding: 0.5rem;
  border: 2px solid #553e21;
  border-radius: 4px;
  background-color: #e6cf5244;
}

body:has(#fi:target) .lang-switch a[href="#fi"],
body:has(#sv:target) .lang-switch a[href="#sv"] {
  opacity: 1;
  font-weight: 600;
  background-color: #e6cf52dd;
}

/* Language sections */
.lang {
  display: none;
  padding: 1.5rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Show only active language, default finnish */
.lang:target {
  display: block;
}