body{
  margin:0;
  font-family: Helvetica, Arial, sans-serif;
  color:white;

}

a {
  color:#c4bb9f;
}
li {
  line-height: 2rem;
  list-style: square;
}
/* VIDEO BACKGROUND */

.iwtl-bg{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  object-fit:cover;
  z-index:-1;
  background:url("../static/iwtl-vid-placeholder.png") center/cover no-repeat;
}

.logo{
  width: 14rem;
  opacity: 0.9;
  filter: drop-shadow( 0px 2px 0px rgba(0, 0, 0, .9));

}

.hero{
  text-align: center;
}

h2.play::first-letter {
  font-size:1rem;
}



/* CONTENT KOLOM */

.cards{
  max-width:900px;
  margin:1vh auto 6vh auto;
  padding:0;
}


/* CARD */

.card{
  position:relative;
  padding:1rem 2rem 2rem 2rem;
  margin-bottom:4rem;

  overflow:hidden;

  backdrop-filter: blur(5px) saturate(130%);
  -webkit-backdrop-filter: blur(5px) saturate(130%);


  box-shadow:
    0 10px 30px rgba(0,0,0,0.4),
    inset 0 1px rgba(255,255,255,0.15);

  transition: transform .25s, backdrop-filter .25s;
}

.card-columns{
  display:grid;
  gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card h2, .card p {
  font-weight:200;
  opacity: 0.95;
}
.card h2{
  margin-top: 0.4rem;
}

.card p {
  line-height:1.2rem;
  font-size:0.95rem;
}

@media only screen and (min-width: 600px) {
/* player-to-album-cover alignment on desktop / larger screen */
  .topbump {
    margin-top:6rem;
  }
}

.nagusablij {
border:1rem solid #fff;
border-bottom:4rem solid #fff;
filter: saturate(80%);
width:96%;
}

/* DARKENING LAYER */

.card::before{
  content:"";
  position:absolute;
  inset:0;

  background:linear-gradient(
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.25)
  );

  z-index:0;
}

/* CONTENT BOVEN EFFECTS */

.card > *{
  position:relative;
  z-index:1;
}

.form input, .form button {
  background: transparent;
  border: 1px solid #EEE;
  color:#EEE;
  font-size:1.3rem;
  font-weight:200;
}

.form button{
  cursor: pointer;
  padding-left: 15px;
  padding-right: 15px;
}




}