/*Css stuff begins here */
*{
  /* 'Ubuntu', 'Noto Sans SC', 'Noto Sans Arabic', 'Noto Sans Devanagari', 'Noto Sans Malayalam', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Font EU', 'Font SC', */
  font-family: 'Ubuntu', 'Noto Sans SC', 'Noto Sans Arabic', 'Noto Sans Devanagari', 'Noto Sans Malayalam', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Font EU', 'Font SC','arabic langbutton', 'arabic full',  sans-serif;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.04vw;
}

@font-face {
  font-family: 'latin langbutton';
  src: url('fonts/latin_langbutton.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'arabic langbutton';
  src: url('fonts/arabic_langbutton.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF;
}

@font-face {
  font-family: 'other langbutton';
  src: url('fonts/other_langbutton.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'arabic full';
  src: url('fonts/arabic_full.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Font EU';
  src: url('fonts/font_eu.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Font SC';
  src: url('fonts/font_sc.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



body {
  background:
    radial-gradient(
    201vh 201vh at 50% 50%,          
    rgba(255, 255, 253, 0.5),      
    rgba(215, 224, 238, 0.48) 60%,  
    rgba(210, 225, 240, 0.5) 80%
  ),
  radial-gradient(
    90vh 90vh at 50% 4.65vh,         
    rgb(255, 255, 255),     
    rgba(255, 255, 255, 0.3) 50%
  );

  background-color: #f8f8f8;         /* sehr heller Grundton */
  backface-visibility: hidden;
  background-attachment: fixed;

  display: flex;
  align-items: center;
  flex-direction: column;
  
  /* text and elements */
  direction: ltr; /* for arabic and persian */

  margin-top: 0;
}


/*---------- page ----------*/
#page {
  width: 95.8vw;
  margin: 0;
  min-height: 101vh;
  justify-content: center;
} 

/*---------- header ----------*/
#headerbox {
  margin: 0 auto;
  display: flex;
  text-align: center;
  justify-content: center;
  max-width: 91%;
}

#headerbox h1 {
  font-size: 5vw;
  margin: 8vw 0;
}

/*---------- middlebox ----------*/
#middlebox{
  min-height: 100vh;
}


.b {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/*------------- smallbox (for example for ) ------------- */ 
#smallbox {
  width: 100%;
}

/* --------------- footer --------------- */
.bottombox {
  width: 95.5vw; 
  text-align: center;
  text-justify: center;
  justify-content: center;
  padding-top: 2.5vw;
  padding-bottom: 7.5vw;
  display: flex;
  margin: 0 auto;           /* center the container itself */
}

.bottombox a{
  font-size: 2.72vw;
  opacity: 0.78;
}

/*----------- content elements ----------- */
.c {
  background-color: rgba(255, 255, 255,0.96);
  width: 100%;
  margin: 0 auto;
  margin-bottom: 1.75vw;
  border: none;
  box-shadow: 0 0.28vw 1.850815851vw rgba(0, 1, 3, 0.12);
  border-radius: 2.7vw;
  overflow: hidden;
}
.ct-hart{
  box-shadow: 0  0.1vw 1vw rgba(0, 1, 3, 0.14);
}

.t {
  height: 19.14vw;
  font-size: 4.37vw;
}


/* ---------------- alles rund um buttons ---------------- */
button {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* -------language button --------- */
.l {
  text-align: left;
  padding:0;
}

.l span {
  display: inline-block;
  flex-grow: 1;
  max-width: 32vw;
}

.l img {
  width: 8.1vw;
  height: 5.4vw;
  margin: 0 6.87vw;
  border-radius: 0.8vw;
  opacity: 0.89;           /* leicht transparent */
  box-shadow: 0 0.0.04vw 0.32vw rgba(0, 0, 0, 0.03);
}

.greytext {
  color: rgba(0, 0, 0, 0.33);
}

/* -------- normaler button --------- */
.normalbutton {
  justify-content: center;
}

#languagesearch {
  padding: 0 6.87vw;
  box-sizing: border-box;
  outline: none;
}

/* ---------- textelemente ---------------*/
h2,p{
  font-size: 3.8vw;
  margin-left: 4.33vw;
  margin-right: 4.33vw;
}

h2 {
  margin-top: 4.33vw;
}


p, h1, h2, h3, h4, span, input {
  color: rgba(30, 30, 30, 0.91); 

}

.text-wrapper a{
  text-decoration: none;
  opacity: 0.85;
}

hr {
  height: 0.12vw; /* line thickness */
  margin-top: -0.24vw;
  margin-bottom: -0.24vw;
  margin-left: 4.33vw;
  margin-right: 4.33vw;
  
  padding: 0;
  border: none;
  background-color: rgba(0, 0, 0, 0.3);
}


@media screen and (min-width: 600px){

  *{
    letter-spacing: 0.03vh; /* tiny tweak */ 
  }

  body{
      background-color: #fefefe;         /* sehr heller Grundton */
  }

  p, h1, h2, h3, h4, span, input {
    color: rgba(35, 35, 35, 0.9); 
  }

    /* --------------- header ---------------- */
  #headerbox h1 {
    font-size: 2.3vh;
    margin: 3.5vh 0;
  }

  /* --------------- footer --------------- */
  .bottombox {
    width: 41.9vh; 
    padding-top: 1.1vh;
    padding-bottom: 3.31vh;
  }

  .bottombox a{
    font-size: 1.24vh;
  }

  /* ----------------- content elements --------------- */
  .c {
    box-shadow: 0 0.12vh 0.794vh rgba(0, 1, 3, 0.09);
    border-radius: 1.2vh; 
    margin-bottom: 0.76vh;
    border: 0;
  }
  .ct-hart{
    box-shadow: 0 0.12vh 0.794vh rgba(0, 1, 3, 0.11);
  }

  .t {
    height: 8.24vh;
    font-size: 1.9vh;
  }

  .l span {
    max-width: 13.1vh;
  }

  .l img {
    width: 3.65vh;
    height: 2.43vh;
    margin-right: 2.8vh;
    margin-left: 2.8vh;
    border-radius: 0.353vh; 
    box-shadow: 0 0.1vh 0.7vh rgba(0, 0, 0, 0.03);
  }

  /* -------- normaler button --------- */
  #languagesearch {
    padding: 0 2.8vh;
  }

  /* ---------------- sonstiges dinge ---------------------- */

  h2,p{
    font-size: 1.65vh;
    margin-left: 2vh;
    margin-right: 2vh;
  }

  h2{
    margin-top: 2vh;
  }

  hr {
    height: 0.051vh; /* line thickness */
    margin-top: -0.1vh;
    margin-bottom: -0.1vh;
    padding: 0;
    margin-left: 1.95vh;
    margin-right: 1.95vh;
  }

  #smallbox{
    width: 40.9vh;
    margin: 0 auto;
  }

}

@media screen and (min-width: 800px){

  #page{
    max-width: 95vw;
    width: 94vh; /* 394.8px */
  }

  .headerbox{
    max-width: 90vw;
    width: 94vh; /* 394.8px */
  }
}