:root  {
--black: #000000;
--dark-blue:#214790;
--blue:#006CC6;
--light-blue:#08A1E2;
--white:#FFFFFF;
--ice-blue: #bddeec;
}

body{
  width: 100%;
  margin: 0 0;
}
.headerBackground{
  background-image: url(skyline.png);

  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  background-color: rgba(255,255,255,0.5);
  background-blend-mode: lighten;
}
header{
  .headerTable{
  padding: 5vh 10vw 2.5vh;
  width: 100%;
    .logoHeaderBox{
      padding-right: 10vw;
      width: 40%;
      .logoHeaderImage{
        padding: 5%;
        width: 30vw;
      }
      .logoMiddleBox{
        padding-right: 5vw;
      }
    }
      .headerTextBox{
        width: 100%;
        .headerSubtitle{
          font-size: 2.5vh;
          .subtitleContainer{
            padding: 1.5vh;
            h2{
              text-decoration: none;
            }
          }
        }
      }
    }
  }
.bodyDiv{
  padding: 5vh 10vw;
  background-origin: border-box;
}

.locationIcon{
  height: 2.5vh;
}

h1{
  font-family: "DynaPuff", system-ui;
  color: var(--dark-blue);
  font-size: 5vh;
  margin-block-start: 0;
  margin-block-end: 0;
}
h2{
  font-family: "DynaPuff", system-ui;
  color: var(--black);
  font-size: 2.5vh;
  margin-block-start: 0.5rem;
  margin-block-end: 0.5rem;
  display: contents;
}

a{
  font-family: "Livvic", sans-serif;
  font-size: 2vh;
  color: var(--black);
text-decoration: none;
  .headerLink{
    color: var(--black);
    font-size: 2.5vh;
    margin-block-start: 0.5rem;
    margin-block-end: 0.5rem;
    display: contents;
  }
}


.splitTextBlock{
  padding-top: 2.5vh;
  padding-right: 5vh;
  vertical-align: top;
  display: table-cell;
  width: 50%;
}
.oddDiv{
  
  background-color: var(--ice-blue);
}

.impressumDiv{
  background-color: var(--dark-blue);
  h1{
    color: var(--white);
  }
  h2{
    color: var(--white);
  }
  a{
    color: var(--white);
  }
}

.textBlockContainer{
  display: grid;
  grid-template-rows: auto auto;
  justify-content: center;
}

.oddDivButton{
    padding: 1.2vh;
    border-radius: 8px;
    margin: 1.2vh;
    border-color: var(--dark-blue);
    background: var(--blue);
    color: var(--white);
    border-width: 0.5vh;
    a{
     color: var(--white);
     padding-right: 1vw;
     padding-left: 1vw;
    }
    h2{
     color: var(--white);
     padding-right: 1vw;
     padding-left: 1vw;
     font-size: 2vh;
    }
}

.parnterGrid{
  padding-top: 5vh;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  row-gap: 5vh;
  column-gap: 5vh;
}
.teamElement{
  aspect-ratio: 1 / 1;
  background-image: url("note 3.png");
  width: 25vh; 
  background-size: contain;
  background-repeat: no-repeat;
  text-align: center;
  padding-top: 5vh;
  vertical-align: middle;
   text-decoration: none;
  color: var(--white);
  line-height: 1.5;
  h2{
  line-height: 1;
  color: var(--white);
  }
}
.textBlock{
  padding-top: 2.5vh;
  padding-right: 5vh;
  vertical-align: top;
  width: 100%;
}

.teamGrid{
  padding-top: 5vh;
  display: grid;
  grid-template-columns: auto auto auto auto;
  row-gap: 5vh;
  column-gap: 5vw;
  place-content: space-evenly;
}

.parnterLogo{
  max-height: 16vh;
  max-width: 12vw;
  a{
    line-height: 1.5;
  }
}
footer{
  width: 100%;
  color: var(--white);
  background-color: var(--dark-blue);
  .footerIframe{
  width: 100%;
  border: 0;
  display: block;
  max-height: inherit;
  background-color: var(--dark-blue);
  }
}

.footerTable{
    padding: 1.5vh 2vw;
    width: 100%;
    height: 100%;
    .logoSmall{
    width: 7%;
    }
    .footerTextCell{
    width: 7%;
    padding: 0 2vw;
    vertical-align: middle;
    color: var(--white);
      a{
      font-size: 1.25vw;
      font-weight:700;
      }
      a:hover{
        color: var(--black);
      }
      a:visited {
        text-decoration: none;
        color: var(--white);
      }
      a:link {
        text-decoration: none;
        color: var(--white);
      }
      a:active {
        color: var(--black);
      }
    }
  
  .logoSmall{
  max-height: 7vh;
}
}
.linkDiv{
     z-index: 2;
}

.linkBackgroundDiv {
    height: 100%;
    width: 100%;
    text-decoration: none;
     z-index: 1;
}

.hostelDiv{
  display: table-row; 
  margin: 0 auto;
  padding-left: 5vw;
}

.hostelPic{
  height: 450px;
}

.mapPic{
  height: 600px;
}

.adressBlockContainer {
    display: grid;
    grid-template-rows: auto auto;
}

.fsrLogo {
height: 70vh; 
}

@media (min-width: 651px) and (max-width: 950px) {
  header{
    .headerTable{
      padding: 5vh 5vw 2.5vh;
      width: 100%;
      .logoHeaderBox{
        padding-right: 5vw;
        width: 40%;
        .logoHeaderImage{
          padding: 5%;
          width: 30vw;
        }
        .logoMiddleBox{
          padding-right: 2.5vw;
        }
      }
        .headerTextBox{
          width: 100%;
          .headerSubtitle{
            font-size: 2vh;
            .subtitleContainer{
              padding: 1vh;
              h2{
                text-decoration: none;
              }
            }
          }
        }
      }
  }
  .bodyDiv{
    padding: 5vh 2.5vw;
    background-origin: border-box;
  }
  .teamGrid{
    padding-top: 2.5vh;
    display: grid;
    grid-template-columns: auto auto auto;
    row-gap: 2.5vh;
    column-gap: 2.5vh;
  }
 footer{
  max-height: 10vh;
 }
 .footerTable{
    padding: 0vh 2vw;
    height:100%;
  .logoSmall{
  max-height: 5vh;
}
 }
  .hostelDiv{
  display: grid;
  grid-template-columns: auto;
  margin: 0 auto;
padding-left: 0;
}
.hostelPic{
  width: 95vw;
  height:auto;
}
.mapPic{
    width: 55vw;
  height:auto;
}}
.instaLogo{
padding-left: 2vw;
height:30vh;
}


@media (min-width: 561px) and (max-width: 650px) {
  header{
    .headerTable{
      padding: 5vh 5vw 2.5vh;
      width: 100%;
      .logoHeaderBox{
        padding-right: 5vw;
        width: 40%;
        .logoHeaderImage{
          padding: 5%;
          width: 30vw;
        }
        .logoMiddleBox{
          padding-right: 2.5vw;
        }
      }
      .headerTextBox{
        width: 100%;
        .headerSubtitle{
          font-size: 2vh;
          .subtitleContainer{
            padding: 1vh;
            h2{
              text-decoration: none;
            }
          }
        }
      }
    }
  }
  .locationIcon{
    height: 2vh;
  }
.splitTextBlock{
    padding-top: 1.5vh;
    padding-right: 1.5vh;
    vertical-align: top;
    display: table-cell;
    width: 50%;
  }
  .bodyDiv{
    padding: 5vh 2.5vw;
    background-origin: border-box;
  }
  .teamGrid{
    padding-top: 2.5vh;
    display: grid;
    grid-template-columns: auto auto auto;
    row-gap: 1.5vh;
    column-gap: 1.5vh;
  }
  h1{
    font-size: 3vh;
  }
  h2{
    font-size: 2vh;
  }
  a{
  font-size: 1.5vh;
    .headerLink{
      font-size: 1.5vh;
    }
  }
  footer{
  max-height: 10vh;
 }
.footerTable{
    padding: 0vh 2vw;
    height:100%;
  .logoSmall{
  max-height: 5vh;
}
 }
  .hostelDiv{
  display: grid;
  grid-template-columns: auto;
  margin: 0 auto;
padding-left: 0;
}
.hostelPic{
  width: 95vw;
  height:auto;
}
.mapPic{
    width: 55vw;
  height:auto;
}
.fsrLogo {
height: 70vh; 
}
}

@media (max-width: 560px) {
  header{
    .headerTable{
      padding: 5vh 5vw 2.5vh;
      width: 100%;
      .logoHeaderBox{
        padding-right: 2.5vw;
        width: 40%;
        .logoHeaderImage{
          padding: 5%;
          width: 30vw;
        }
        .logoMiddleBox{
          padding-right: 2.5vw;
        }
      }
      .headerTextBox{
        width: 100%;
        .headerSubtitle{
          font-size: 2vh;
          .subtitleContainer{
            padding: 1vh;
            h2{
              text-decoration: none;
            }
          }
        }
      }
    }
  }
  .locationIcon{
    height: 2vh;
  }
.splitTextBlock{
    padding-top: 1.5vh;
    padding-right: 1.5vh;
    vertical-align: top;
    display: table-cell;
    width: 50%;
  }
.bodyDiv{
    padding: 5vh 2.5vw;
    background-origin: border-box;
  }
  .teamElement{
  width: 20vh; 
  }
  .teamGrid{
    padding-top: 2.5vh;
    display: grid;
    grid-template-columns: auto auto;
    row-gap: 1vh;
    column-gap: 1vh;
  }
  h1{
    font-size: 3vh;
  }
  h2{
    font-size: 2vh;
  }
  a{
  font-size: 1.5vh;
    .headerLink{
      font-size: 1.5vh;
    }
  }
 footer{
  max-height: 10vh;
 }
.footerTable{
    padding: 0vh 2vw;
    height:100%;
 }
  .hostelDiv{
  display: grid;
  grid-template-columns: auto;
  margin: 0 auto;
padding-left: 0;
}
.hostelPic{
  width: 95vw;
  height:auto;
}
.mapPic{
    width: 55vw;
  height:auto;
}
.fsrLogo {
height: 70vh; 
}
}