.fontm{
font-family: "Trebuchet MS", Helvetica, sans-serif;
letter-spacing: 0px;
line-height: 1;
word-spacing: 2px;
font-weight: 700;
text-decoration: none solid rgb(68, 68, 68);
font-style: normal;
font-variant: normal;
text-transform: none;
}
html{
scroll-behavior: smooth;
  }
  .stuck{
      animation:stuck 3s;
  }
  @keyframes stuck{
      0%{
      }
      1%{
          overflow: hidden;
      }
      100%{
          overflow: hidden;
      }
  }
   /*body.unscrollable {
    overflow: hidden;
  }*/
  .haha{
        transform: translate(0,0);
      }
  .words{
	  display:none;
  }
  body{
      background-color: #000000;
                opacity: 1;
                animation: bodyanim 2s;
                animation-fill-mode: forwards;
               --scrollbarBG: #CFD8DC;
  --thumbBG: #90A4AE;

  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
              }
       
  /*:not(.zeiten) {
    visibility: hidden;
  */
 .msgdevelop{
     visibility: hidden;
 }
 .mainlg{
        position: absolute;
        height: 100px;
        width: 100px;
        top: 3%;
        left: 5%;
        border-radius: 50%;
        background-color: transparent;
        overflow:hidden;
        border: 0px solid transparent;
        z-index: 1;
       }
.s7511932245709721028479229324715933942291721013488863{
  position:fixed;
  display:flex;
  height:1000px;
  width:100%;
  top:-20%;
  left:0;
  background-color:#00000038;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:visible;
  clip-path: circle(1000px at 52% 100%);
  -webkit-clip-path: circle(1000px at 52% 100%);
  animation:dddf 3s;
  animation-fill-mode:forwards;
  z-index:134;
}
@keyframes dddf{
  0%{
    
  }
  80%{
        display:flex;
  clip-path: circle(1000px at 52% 100%);
  -webkit-clip-path: circle(1000px at 52% 100%);
  }
  100%{
    display:none;
  clip-path: circle(0px at 50% 100%);
  -webkit-clip-path: circle(0px at 50% 100%);
  }
}
    .mainlg img{
        height: 100%;
        width: 100%;
        object-fit: cover;
       border-radius: auto;
       }
  .main-img-1{
position: fixed;
overflow-x:hidden;
display: block;
top: 0px;
left: 0%;
height: 900px;
width: 100%;
background-image: url("/imgs/main/moschee.webp?v=1f");
background-size: cover;
transition: 1s all ease-in-out;

/*background:linear-gradient( rgb(111, 111, 111) ,rgb(245, 245, 245),rgb(153, 153, 153))*/
  }
  /*.main-img-1 img{
    height: 100%;
    width: 100%;
    
    transition: 1s all ease-in-out;
  }*/
  .main-img-1 video{
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
  .blackpass{
      display: flex;
      position: fixed;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      z-index:0.5;
      background-color: rgba(0,0,0,0.5);
      backdrop-filter:blur(5px);
     -webkit-backdrop-filter:blur(5px);
  }
    .blackpass img{
        height: 100%;
        width: 100%;
        opacity: 0;
    }
.lines{
        display:flex;
        position:fixed;
        height:70px;
        width:30px;
        left:90%;
        top:38px;
        background-color:transparent;
        z-index:4;
        flex-direction:column;
    }
.line{
  position:absolute;
  display:flex;
  height:4.5%;
  width:90%;
  background-color:transparent;
  border-radius:60px;
  z-index:-2;
}
.line::before{
  content:"";
  position:absolute;
  display:flex;
  height:100%;
  width:100%;
  top:-50%;
  background-color:#e4e4e4;
  border-radius:60px;
  z-index:2
}
.line::after{
  content:"";
  position:absolute;
  display:flex;
  height:100%;
  width:100%;
  top:300%;
  background-color:#e4e4e4;
  border-radius:60px;
}
.linefunc{
}
.linefunc::before{
  top:-50%;
  animation:linefuncbe 0.3s;
  animation-fill-mode:forwards;
}
.linefunc::after{
  top:300%;
  animation:linefuncaf 0.3s;
  animation-fill-mode:forwards;
}
@keyframes linefuncbe{
  0%{
    display:flex;
    top:-50%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transform:rotate(0deg);
  }
  100%{
    top:-50%;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transform:rotate(0deg);
  }
}
@keyframes linefuncaf{
  0%{
    top:300%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transform:rotate(0deg);
  }
  100%{
    top:300%;
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    transform:rotate(0deg);
  }
}
  .menu{
          display: flex;
          position: fixed;
          height: 100%;
          width: 100%;
          left: 0%;
          top: 0%;
          background-color: rgba(0, 0, 0, 0.5);
          backdrop-filter:blur(10px);
	      -webkit-backdrop-filter:blur(10px);
          flex-direction: column;
          overflow:hidden;
          clip-path: circle(0px at 90% -20%);
          transition: all 0.4s ease-out;
          pointer-events: none;
          z-index:4;
          animation: menuactivere 0.4s;
          animation-fill-mode: forwards;
      }
.menuactive{
      animation: menuactive 0.4s;
      animation-fill-mode: forwards;
      animation-delay:0.1s;
      clip-path: circle(0px at 90% -20%);
      pointer-events: all;
      z-index:4;
      
}
@keyframes menuactive{
  0%{
  }
  100%{
    clip-path: circle(1000px at 90% -10%);
  }
}
@keyframes menuactivere{
  0%{
    clip-path: circle(1000px at 90% -10%);
  }
  100%{
    clip-path: circle(0px at 90% -20%);
  }
}
.menucross{
        display:flex;
        position:fixed;
        height:70px;
        width:30px;
        left:90%;
        top:38px;
        background-color:transparent;
        z-index:123;
        flex-direction:column;
}
.menucross::before{
  content:"";
  position:absolute;
  display:flex;
  height:4.5%;
  width:100%;
  top:10%;
  background-color:#e4e4e4;
  border-radius:60px;
  transform:rotate(-45deg);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  animation:menucross 0.5s;
  animation-fill-mode:forwards;
}
.menucross::after{
  content:"";
  position:absolute;
  display:flex;
  height:4.5%;
  width:100%;
  top:10%;
  background-color:#e4e4e4;
  border-radius:60px;
  transform:rotate(45deg);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  animation:menucross 0.5s;
  animation-fill-mode:forwards;
}
.menucrossactive{
}
.menucrossactive::before{
  transform:rotate(-45deg);
  animation:menucrossacbe 0.5s;
  animation-fill-mode:forwards;
  animation-delay:0.4s;
}
.menucrossactive::after{
  transform:rotate(45deg);
  animation:menucrossacaf 0.5s;
  animation-fill-mode:forwards;
  animation-delay:0.4s;
}
@keyframes menucrossacbe{
  0%{
  }
  100%{
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
  }
}
@keyframes menucrossacaf{
  0%{
  }
  100%{
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
  }
}
.menuitems{
    position:fixed;
    display:flex;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color:#00000000;
    flex-items:column;
    z-index:4;
    
}
.itemdiv::before{
  content:"+";
  position:absolute;
  display:flex;
  height:100%;
  width:20%;
  left:10%auto;
  top:0%;
  left:78%;
  background-color:transparent;
  color:#e0e0e0;
  justify-content:flex-end;
  align-items:center;
  font-size:27px;
  z-index:-1;
}
     .item1{
        position:absolute;
        display:flex;
        background-color:transparent;
        height:10%;
        width:100%;
        left:%;
        top:110px;
        justify-content:start;
        align-items:center;
        animation: linksupitem1Reverse 0s ease-in-out;
        animation-fill-mode: forwards;
        }
        .item2{
        position:absolute;
        display:flex;
        background-color:transparent;
        height:10%;
        width:100%;
        left: 0%;
        top:225px;
        justify-content:start;
        align-items:center;
        animation: linksupitem2Reverse 0s ease-in-out;
        animation-fill-mode: forwards;
        }
        .item3{
          position:absolute;
          display:flex;
          background-color:transparent;
          height:10%;
          width: 100%;
          left: 0%;
          top:336px;
          justify-content:start;
          align-items:center;
          animation: linksupitem3Reverse 0s ease-in-out;
          animation-fill-mode: forwards;
          }
        .item4{
          position:absolute;
          display:flex;
          background-color:transparent;
          height:10%;
          width:100%;
          left: 0%;
          top:447px;
          justify-content:start;
          align-items:center;
          animation: linksupitem4Reverse 0s ease-in-out;
          animation-fill-mode: forwards;
          }
.item5{
          position:absolute;
          display:flex;
          background-color:transparent;
          height:10%;
          width: 100%;
          left: 0%;
          top:550px;
          justify-content:start;
          align-items:center;
          animation: linksupitem4Reverse 0s ease-in-out;
          animation-fill-mode: forwards;
          }
        .itemdiv a{
            font-family: SF Pro Text,SF Pro ons,Helvetica Neue,Helvetica,Arial,sans-serif;
            text-decoration:none;
            transition:1s;
            color: #e0e0e0;
            visibility: visible;  
            font-weight:510;
            font-size: 30px;
            line-height: 2rem;
            letter-spacing:-.01em;
            margin-left:0.5%;
            width:100%;
        }
.itemdiv a::before{
  content:"";
  position:absolute;
  display:flex;
  height:3%;
  width:100%;
  left:0;
  top:80%;
  background-color:#e0e0e0;
}
 a.itemsafter{
          color:#feedbd;
}
.m404{
  position:absolute;
  display:flex;
  height:100%;
  width:90%;
  background-color:transparent;
  left:5%;
  top:0;
  overflow:hidden;
}
.m404o{
  position:absolute;
  display:flex;
  height:40%;
  width:100%;
  top:10%;
  background-color:transparent;
  justify-content:start;
  align-items:center;
}
.m404o h1{
  font-size:2.5em;
  color:#e4e4e6;
}
.m404otxt{
  position:absolute;
  display:flex;
  height:40%;
  width:100%;
  top:20%;
  background-color:transparent;
  justify-content:start;
  align-items:center;
}
.m404otxt h1{
  font-weight:500;
  font-size:1.5em;
  color:#e4e4e6;
}