/*
16px => 9pt => 1rem
-------------------
h1 => 45pt => 5rem
h1 subtitle => 16pt => 1.78rem
h2 => 20pt => 2.23rem
h3 => 11pt => 1.23rem

Umrechnen h1: 45pt / 9pt => 5rem
*/

@font-face {
  font-family: 'MuseoSans';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(./museosans-100.woff2) format('woff2');
}

@font-face {
  font-family: 'MuseoSansRounded';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(./museosansrounded-300.woff2) format('woff2');
}

@font-face {
  font-family: 'MuseoSansRounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./museosansrounded-700.woff2) format('woff2');
}

body{
  --blue: #2c9ad3;
  --grey: #464853;
  --light-grey: #757879;
  font-family: 'MuseoSansRounded';
  font-weight: 300;
}

.hero .hero-background{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.hero .hero-background img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.hero .hero-body {
  z-index: 1;
  padding: 2rem 5rem;
}

.hero .hero-body .logo{
  width: 18rem;
  margin: 4rem;
}

.hero.is-dark .hero-body{
  color: white
}



h1.title.is-1{
  text-transform: uppercase;
  font-family: 'MuseoSans';
  font-weight: 100;
  font-size: 5rem;
  line-height: 5rem;
  letter-spacing: -1px;
  text-shadow: 0px 0px #0000004c;
}
h1.title.is-1 + .subtitle{
  text-transform: uppercase;
  color: var(--blue);
  font-family: 'MuseoSansRounded';
  font-weight: 300;
  font-size: 1.78rem;
  line-height: 2.5rem;
  letter-spacing: 0.5px;
  text-shadow: 0px 0px #0000004c;
}

h2.title.is-2{
  text-transform: uppercase;
  font-family: 'MuseoSansRounded';
  font-weight: 300;
  font-size: 2.23rem;
}

h3.title.is-3{
  font-family: 'MuseoSansRounded';
  font-weight: 700;
  font-size: 1.23rem;
}

@media screen and (max-width: 625px) {
  .hero .hero-body {
    padding: 1rem 3rem;
    height: 80vh;    
  }

  .hero .hero-body .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero .hero-body .logo{
    width: 43.2vw;
    margin: 9.6vw;
  }

  h1.title.is-1{
    font-size: 12vw;
    line-height: 12vw;
  }

  h1.title.is-1 + .subtitle{
    font-size: 4.27vw;
    line-height: 6vw;
  }
}


.has-background-grey{
  background-color: var(--grey) !important;
  color: white;
}

.has-background-grey h2,
.has-background-grey h3{
  color: white;
}

.has-background-blue{
  background-color: var(--blue) !important;
  color: white;
}


.has-background-blue h2,
.has-background-blue h3{
  color: white;
}

.has-background-black{
  color: white;
}

.has-background-black h2,
.has-background-black h3{
  color: white;
}


.field .input,
.field .textarea{
  border-radius: 0;
  background-color: var(--light-grey);
  border: none;
  color: white
}

.field .input::placeholder,
.field .textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1; /* Firefox */
}

.field .input:-ms-input-placeholder,
.field .textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: white;
}

.field .input::-ms-input-placeholder,
.field .textarea::-ms-input-placeholder { /* Microsoft Edge */
  color: white;
}

.button{
  border-radius: 0;
  border: none;
  text-transform: uppercase;
  text-decoration: underline;
  font-family: 'MuseoSansRounded';
  font-weight: 700;
  padding: 0.75rem 2rem;
  height: auto;
}


.footer{
  padding: 1rem;
  background-color: var(--light-grey);
  color:  white;
}

footer a{
  color: white;
  text-decoration: underline;
}
@media screen and (min-width: 769px) {
  footer .level .level-left .level-item{
    margin-right: 0.5rem;
  }
  footer .level .level-left .level-item:not(:last-child)::after{
    content: '|';
    margin-left: 0.5rem;
  }
}