body {
  background-color: beige;

  background-image: url("backgroundImage.png");
  background-size: contain;
  min-height: 100px;
 
}


        
}       

.search-bar{
  display: flex;
  justify-content: center;
  width: 200px;
  height: 300px; 
  padding: 10px; 
  box-sizing: border-box;
  font-size: 16px;
  text-align: center;
}
}
.search-bar input {
  width: 140%;
  min-width: 300px;
  padding: 12px 24px;
  border-radius: 24px;
  font-size: 16px;
  border: 0px;
  outline: none;
  text-align: center;
}

.main{
 font-family: Sans-Serif;
 display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
max-width: 200px;
margin: 0 auto;
padding: 20px 10px;
max-height: 500px;
gap: 15px;
}

.kreativ{
  border: 2px solid black;
  border-radius: 10px;
  padding: 0 auto;
  width: 200px;
}
.spil{
  border: 2px solid black;
  border-radius: 10px;
  padding: 0 auto;
  width: 200px;
}
.mad{
  border: 2px solid black;
  border-radius: 10px;
  padding: 0 auto;
  width: 200px;
}
.rollespil{
  border: 2px solid black;
  border-radius: 10px;
  padding: 0 auto;
  width: 200px;
}
.medier{
  border: 2px solid black;
  border-radius: 10px;
  padding: 0 auto;
  width: 200px;
}
.rolleSpil{
  border: 2px solid black;
  border-radius: 10px;
  padding: 0 auto;
  width: 200px;
}
.fitness{
  border: 2px solid black;
  border-radius: 10px;
  padding: 0 auto;
  width: 200px;
}