@font-face {
  font-display: swap; 
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../Fonts/merriweather-sans-v26-latin-regular.woff2') format('woff2');
}

@font-face {
font-display: swap;
font-family: 'Domine';
font-style: normal;
font-weight: 400;
src: url('../Fonts/domine-v23-latin-regular.woff2') format('woff2'); 
}

@font-face {
font-display: swap;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: url('../Fonts/poppins-v23-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap; 
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: url('../Fonts/playfair-display-v37-latin-700.woff2') format('woff2'); 
}

html {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

.mobile-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(../Images/Randoms/gira-sitting.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-position-y: 10%;
  background-position-x: 20%;
  z-index: -1;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.mobile-bgSCH {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(../Images/Randoms/shnu-pup.webp);
  background-size:cover;
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-position:0 10%;
  z-index: -1;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.information-container {
  display:flex;
  flex-direction:row;
  justify-content:center;
  justify-self: center;
  position:relative;
  width:80%;
  background-color:rgba(66, 107, 202, 0.7);
  padding:1.5%;
  border-radius:1vw;
  border-style:solid;
  font-family:'Merriweather sans', Arial, Helvetica, sans-serif;
  margin-bottom:20%;
}

.image-containerGER,
.image-containerSCH {
  display:flex;
  margin-right:1vw;
  height:min-content;
  flex:1;
  align-self: center;
  padding:2%;
  background-color:rgb(255, 255, 255);
}

.image- {
  height:auto;
  max-width:100%;
  align-self: center;
  box-shadow: 0vw 0vw 1vw 0.6vw rgba(0,0,0,0.5);
}

.paragraph-container {
  flex:2;
}

.paragraphSCH,
.paragraphGER {
    text-align:center;
    display:inline-block;
    font-size:clamp(16px, 1.75vw, 40px);
    color:white;
    margin-top:1vw; 
    margin-bottom:1vw;
}

@media only screen and (min-width:300px) and (max-width:1100px) {
  .mobile-bg {
    background-position-x: 60% ;
    background-attachment: scroll;
    min-height: 100vh;
    height: 100vh;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  .mobile-bgSCH {
    background-attachment: scroll;
    background-position-y: 0%;
    min-height: 100vh;
    height: 100vh;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  .page-wrapper {
    position:relative;
  }
  .main {
    align-self:center;
  }
  .information-container {
    width:90vw;
    flex-direction: column;
    gap:1.5vw;
  }
  .image- {
    max-height:40vw;
  }
  .image-containerSCH,
  .image-containerGER {
    position:relative;
    right:150%;
    opacity:0;
    transition: opacity 0.15s ease;
  }
  .paragraphGER {
    position:relative;
    right:150%;
    opacity:0;
    transition: opacity 0.15s ease;
  }
  .paragraphSCH {
    padding:1vw;
    position:relative;
    opacity:0;
    left:150%;
    transition: opacity 0.15s ease;
  }
}