/* --- Custom-Properties-Import ---*/


body {
  position: relative;
  display: grid;
  grid-template-columns: auto;
  place-items: center;
}

header {
  position: sticky;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(2rem,5rem,10vh);
  background: var(--clr-grau-700);
}

ul {
  list-style: none;
}

.nav-right a {
  position: absolute;
  right: 0px;
  top: 0px;

  display: flex;
  height: 100%;
  width: clamp(3rem, 8rem, 10vw);
  border-radius: 20px 0px 0px 20px;

  align-items: center;
  justify-content: center;

  font-size: clamp(1.5rem, 3rem, 7vh);
  color: var(--clr-light-200);
  text-decoration: none;

  background:  var(--clr-accent-300);
  box-shadow: -8px 0px 16px rgba(0, 0, 0, 0.75);
  
}

.nav-button{
  position: absolute;
  display: flex;
  height: 100%;
  left: 15%;
  align-items: center;
  justify-content: center;
}

.nav-button a{
  
  height: 75%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 15%;
  background: var(--clr-accent-300);
  flex-grow: 0;
  font-family: 'Raleway', sans-serif;
  color: var(--clr-light-200);
  font-size: clamp(1rem, 1.25rem, 3vh);
  font-weight: 500;
  text-decoration: none;


  border-radius: 1.5rem;
  transition: 200ms ease-in-out;
}

.nav-button a:hover{
  transform: scale(1.05);
  transition: 150ms ease-in-out;
}

.container{
  position: relative;
  grid-column: 1 / -1;
  /*margin-inline: auto;*/
  width: min(95%,75em); 
  
}

.bg {
  background: linear-gradient(360deg, rgba(226, 226, 226, 0.14) 20.31%, #E5E5E5 100%), url(/resources/img/background.jpg);
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.btn:hover{
  cursor: pointer;
}

.no-show{
  display: none;
}