body {
    background-image: url("");
    background-color: rgb(248, 250, 258);
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Oswald', 'Roboto', sans-serif;
    min-width: 100vw;
    font-size: 3vmin;
    transition: background 1.2s;
}

a {
    color: black;
}

.content {
    padding: 10px;
}

.navbar {
    width: 100%;
    height: 10vmin;
}

.navbox {
    display: inline-block;
    position: relative;
    float: left;
    width: 14.2857142857%;
    height: 100%;
    text-align: center;
    margin: auto;
}

.navimg {
  position:relative;
  top: 5%;
  height: 90%;
  border-radius: 20%;
}

.swiper {
    width: 100%;
    height: 85vh;
}

.menu {
    overflow:scroll;
    font-family: 'Oswald', sans-serif;
}

.illustration {
    width: 30vW;
    float: right;
}
.selected {
    width: 87.5vw;
    writing-mode: unset;
    text-orientation: unset;
    text-align: unset;
}

#menu0, #box0 {
    background-color:rgba(15,23,42, 0.5);
    color: white;
}

#menu1, #box1 {
    background-color:rgba(28, 100, 242, 0.5);
    color:white;
}

#menu2, #box2 {   
    background-color:rgba(13, 148, 136, 0.5);
    color: white;
}

#menu3, #box3 {
    background-color: rgba( 5, 150, 105, 0.5);
    color: white;
}

#menu4, #box4 {
    background-color:rgba(71, 85, 105, 0.5);
    color: white;
}

#menu5, #box5 {
    background-color:rgba(219, 234, 254, 0.5);
    color: rgb( 30, 41, 59);
}

#menu6, #box6 {
    background-color:rgba(241, 245, 249, 0.5);
    color: rgb(15,23, 42);
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
  font-size: 10vmin;
}

h1 {
    font-size: 7vmin;
}

h2 {
    font-size: 5vmin;
    text-align: center;
}

p {
    margin: 1vmin;
}

footer {
    font-size:2vmin;
    font-family: 'Incosolata';
}

/* Sørg for at kortet har en højde */
#map { height: 400px; }
#startmap { height: 480px; }

.address-list { margin-top: 20px; }

/* Polaroid */
.wrapper {
  width: 100%;
  padding: 0 0;
  text-align: center;
}
.polaroid {
  background: #fff;
  padding: 1rem;
  box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2); 
}
.polaroid > img{
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.caption {
  font-size: 1.8rem;
  text-align: center;
  line-height: 2em;
}
.item {
  width: 30%;
  display: inline-block;
  margin-top: 2rem;
  filter: grayscale(100%);
}
.item .polaroid:before {
  content: '';
  position: absolute;
  z-index: -1;
  transition: all 0.35s;
}
.item:nth-of-type(4n+1) {
  transform: scale(0.8, 0.8) rotate(5deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n+1) .polaroid:before {
  transform: rotate(6deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  right: 12px;
  box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.4);
}
.item:nth-of-type(4n+2) {
  transform: scale(0.8, 0.8) rotate(-5deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n+2) .polaroid:before {
  transform: rotate(-6deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  left: 12px;
  box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.4);
}
.item:nth-of-type(4n+4) {
  transform: scale(0.8, 0.8) rotate(3deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n+4) .polaroid:before {
  transform: rotate(4deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  right: 12px;
  box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.3);
}
.item:nth-of-type(4n+3) {
  transform: scale(0.8, 0.8) rotate(-3deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n+3) .polaroid:before {
  transform: rotate(-4deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  left: 12px;
  box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.3);
}
.item:hover {
  filter: none;
  transform: scale(1, 1) rotate(0deg) !important;
  transition: all 0.35s;
}
.item:hover .polaroid:before {
  content: '';
  position: absolute;
  z-index: -1;
  transform: rotate(0deg);
  height: 90%;
  width: 90%;
  bottom: 0%;
  right: 5%;
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.2);
  transition: all 0.35s;
}