body,
html {
  margin: 0;
  font-family: "Sour Gummy", serif;
}
.scroller {
  height: 100vh;
}
.App{
  height: 100vh;
}
.orange {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: beige;
}

.text {
  color: #fff;
}

.black {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: lightblue;
}

.blue {
  height: 100vh;
  background-color:lightcyan;
}


.text-wrap {
  position: relative;
  overflow: hidden;
  width: 450px;
  height: 80vh;
}

.panel-text {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 1;
  width: 100%;
  height: 100%;
  font-size: 40px;
  text-transform: uppercase;
  font-weight: 900;
  text-align:center;
  background-color: lightblue;
  
  transform:translateY(100%);
  opacity: 0;
}

.panel-text.blue-text {
  color: blue;
}

.panel-text.red-text {
  color: red;
}

.panel-text.purple-text {
  color: purple;
}

.panel-text.orange-text {
  color: orange;
}






.p-wrap {
  position: relative;
  overflow: hidden;
  width: 450px;
  height: 80vh;
}

.panel {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-image: url("../images/5ed12171d9d512cb2feead83_5.jpg");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.panel._2 {
  z-index: 1;
  background-image: url("../images/5f5a5b3515c4dd0c2c455925_110642301_938622823267359_7859124022958180678_n201.jpg");
}
.panel{
  border-radius: 15px;
}
.panel.blue {
  z-index: auto;
  background-image: url('vecteezy_free-teal-website-elements-vector-background_118974.svg');
  background-size: 80%;
  background-position:center;
  background-repeat: no-repeat;
}

.panel.red {
  z-index: auto;
  background-color: lightcoral;
  background-image: url('vecteezy_free-teal-website-elements-vector-background_118974.svg');
  background-size: 80%;
  background-position:center;
  background-repeat: no-repeat;
}

.panel.orange {
  z-index: auto;
  background-color: lightsalmon;
  background-image: url('vecteezy_designer-studio-modern-flat-concept-for-web-banner-design_5878734.svg');
  background-size: 80%;
  background-position:center;
  background-repeat: no-repeat;
}

.panel.purple {
  z-index: auto;
  background-color: lightslategrey;
  background-image: url('vecteezy_digital-marketing-modern-flat-concept-for-web-banner-design_5868051.svg');
  background-size: 80%;
  background-position:center;
  background-repeat: no-repeat;
}
.wrapper{
  border-left: 6px solid black;
  overflow: hidden;
  width: 50%;
}

.edu-au-vic-wa-nt-arrows {
  font-family: "Rampart One", serif;
}
.wrapper h1{
  font-size: 50px;
  color: black;
  margin: 0 0 0 14px;
  padding: 0;
  line-height: 60px;
  letter-spacing: 5px;
}
.wrapper p {
  font-size: 20px;
  margin: 0 0 0 20px;
  font-weight: bold;
}
.panel-text h2 {
  font-size: 40px;
  font-weight: bold;
  color: #030303;
  letter-spacing: 4px;
}
.panel-text p {
  font-size: 20px;
  font-weight: normal;
   color: #030303;
}

.demo-gallery:not(.last) {
  padding-bottom: 1rem;
}

.demo-text .text {
  font-size: 80px;
  line-height: 1;
  font-weight: 900;
  color: #000;
  text-wrap: nowrap;
}
.wrapper2 {
  display: flex;
}

.wrapper2 img {
  width: 450px !important;
  height: 200px !important;
  background: #f0f0f0;
  object-fit: cover;
}

ul.wrapper2 {
  padding-left: 1rem;
  list-style: none;
}

.wrapper2 li {
  flex-shrink: 0;
  width: clamp(500px, 20vw, 800px);
  padding-right: 1rem;
}

.df {display: flex}
.aic {align-items: center}
.jcc {justify-content: center}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
  color: white;
}
.demo-wrapper {
  overflow-x: hidden;
 /* padding: 24rem 0 !important;*/
}
/*cockroach section start*/
.gsap{
  text-align: right;
  margin: 10px 10px 0 0;
  color: green;
}
main{
  position:relative;
  /*padding: 20%;*/
  padding: 10% 30%;
  max-width: 100%;
  z-index: 2;
  overflow: hidden;
}
main p{
  /*font-size: calc(18px + 1vw);*/
  font-size: 20px;
 /* margin: 0 0 100px 0;*/
  margin: 0 0 21px 0;
}
.cocroch{
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height:100%;
  z-index: 1;
}
#theCucas{
  position:absolute;
  top:0;
  left:0;
  overflow:visible;
  z-index: 0;
  
}
.cuca{
  visibility:hidden;
}
main h1, main p {
  z-index: 3;
  position: relative;
}
#mask{
  display: none;
}
/*cockroach section end*/

/*about section start*/
svg
{
  z-index: 100;
}
:root
{
  --padding: 10vmin;
  --color-background: #D0CBC7;
  
  --font-size-large: 8vw;
  --font-size-medium: 4vw;
  --font-size-normal: 2vw;
  
  @media only screen and (min-width: 800px) {
    --font-size-large: 64px;
    --font-size-medium: 32px;
    --font-size-normal: 16px;
  }
  
  @media only screen and (max-width: 500px) {
    --font-size-large: 40px;
    --font-size-medium: 20px;
    --font-size-normal: 14px;
  }
}

.about-content a
{
  color: white;
}

.about-content ul
{
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-content li
{
  margin-top: 10px;
}

canvas
{
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  
  visibility: hidden;
  opacity: 0;
}


.solid
{
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

 .wireframe
{
  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
}

.content
{
  /*position: relative;
  z-index: 1;*/
  padding-top: 45px;
  background-color: #D0CBC7;
  font-family: "Libre Baskerville", serif;
  
  .trigger
  {
    position: absolute;
    top: 0;
    height: 100%;
  }
  
  .section
  {
    position: relative;
    padding: var(--padding);
    --pad2: calc(var(--padding) * 2);
    width: calc(100vw - var(--pad2));
    height: calc(100vh - var(--pad2));
    // min-height: 400px;
    margin: 0 auto;
    z-index: 2;
    
    &.dark
    {
      color: white;
      background-color: black;
    }
    
    &.right
    {
      text-align: right;
    }
    
    
  }
  
  .blueprint
  {
    position: relative;
    background-color:#131C2A;
    background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
    background-attachment: fixed;
    
    svg
    {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      stroke: white;
      pointer-events: none;
      visibility: hidden;
    }
    
    .dark
    {
      background-color: transparent;
    }
  }
  
  .ground-container
  {
    position: relative;
    overflow: hidden;
    // perspective: 2px;
    
    .parallax
    {
      position:absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: -100px;
      background-repeat: no-repeat;
      background-position: top center; 
        background-size: cover;
      transform-origin: top center;
    }
    
    .ground
    {
      z-index: 1;
      background-image: url("/assets/background-reduced.jpg");   
    }
    
    .clouds
    {
      z-index: 1;
      background-image: url("/assets/clouds.png");
    }
  }
  
  
  .scroll-cta, .credits
  {
    position: absolute;
    bottom: var(--padding);
  } 
  .credits li, .credits li a{
    color: #fff;
  }
  
  .scroll-cta
  {
    font-size: var(--font-size-medium);
    opacity: 0;
  }
  
  .sunset
  {
    background: url("/assets/sunset-reduced.jpg") no-repeat top center; 
      background-size: cover;
    transform-origin: top center;
  }
  
   h1, h2
  {
    font-size: var(--font-size-large);
    margin: 0vmin 0 2vmin 0 ;
    font-weight: 700;
    display: inline;
  }
  
  h3,
  {
    font-size: var(--font-size-medium);
    font-weight: 400;
    margin: 0;
  }
  
  .end h2
  {
    margin-bottom: 50vh;
  }
  
  .loading
  {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-medium);
  }
  
}
/*about section end*/