@import url('https://fonts.cdnfonts.com/css/call-of-ops-duty-ii');


[data-scroll-container] {
  overflow: visible;
  will-change: transform;
}
/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #FFEB3B;
  border-radius: 4px;
}
html {
 scroll-behavior: smooth;

 }

body{
   margin:0px;
   padding:0px;
   background-color:#000000;
   color:#FFEB3B;
   font-family: 'Call of Ops Duty II', sans-serif;
  max-width:100%;
  width:100%;

  
}


.hid{
overflow: hidden;

}

.pageContainer{
  max-width:100%;
  width:100%;
  overflow:hidden;
}
.container{
   min-width:95vw;
  min-height:95vh;
  position:relative;
  margin:auto;
  display:flex;

   text-align: center;
  justify-content: center;
  flex-direction: column;
}
h1{
  font-family: 'Call of Ops Duty II', sans-serif;
  color: #FFF;
  text-shadow: 2px 2px 2px #000000;
  font-size:72px;
}
#article{
  position:relative;
  height:auto;
  display:block;
}
header{
  position:fixed;
  left: 0;
  top: 0;
  z-index:10;
  width:100%;
overflow:hidden;
}
.header{
  background-color: #000;
  color:#FFEB3B;
  width: 100%;
  padding:20px;
  transition:all 0.5s ease-in-out;
}
.trig-scroll-down .slide{
  transform:translateY(calc(-100% + 10px));
}
.trig-scroll-top .slide, .trig-scroll-bottom .slide,.trig-scroll-up .slide{
  transform:translateY(0px);
}
.logo{
  font-size:34px;
  color: #ff0066;
}
.menu, .logo{
  width:calc(50% - 20px);
  display:inline-block;
}
.menu ul{ 
  list-style:none;
  float: right;
  margin-right: : 50%;

}
.menu ul li{ 
  display:inline-block;
  padding:0px 10px;
  color:#FFEB3B;
}
.menu ul li.mobileMenu{
  line-height:20px;
  font-size:32px;
  display:none;
  color:#FFEB3B;
}
.progress{
  background-color: #ccc;
  width: calc(100% - 0px);
  height: 10px;
  transition: all 0.5s ease-in-out;
  position: absolute;
  left: 0;
  bottom: 0;
  color:#FFEB3B;
}
.progressBar{
  background-color: #FFEB3B;
  width: 100%;
  height: 10px;
}
.progressBar:after{
  content:"";
  height:10px;
  width:100%;
  transform:scaleX(var(--trig-article));
  transform-origin:left;
  background-color:#FFEB3B;
  display: block;
  transition:transform ease-out 0.3s;
}
.item {
  width: 90%;
  height: 90%;
  margin: 50px auto;
  padding-top: 75px;
  background: #000;
  text-align: center;
  color: #ffcc00ff;
  font-size: 3em;
}

.bu{
color:#FFEB3B;
}
#title{
  perspective-origin: 25% 75%;
  transform-style: preserve-3d;
  transform: translateY(var(--trig));
  transition: transform ease-out 0.3s;
}
@media screen and (max-width: 921px) {
  .menu ul li{
    display:none;
  }
  .menu ul li.mobileMenu{
    display:inline-block;
    
  }
}