* {
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}


html,
body {
  box-sizing: border-box;
  height: 100%;
  padding: 0;
  margin: 0;
}

.align-center {
  align-items: center;
}

.studio-glow {
  background: rgb(102, 255, 212);
  -webkit-box-shadow: 0px 0px 93px 45px rgba(45, 255, 196, 0.9);
  -moz-box-shadow: 0px 0px 93px 45px rgba(45, 255, 196, 0.9);
  box-shadow: 0px 0px 93px 45px rgba(45, 255, 196, 0.9);
}

.stage{
    // This is just a random gradient not the one you have shown
    background: linear-gradient(to right, #1e5799 0%,#7db9e8 100%);
    border-bottom: 4px solid white;
    height: // your height;
    width: // your width
  }
  .stage h1{
      font-size: // your font size
      text-align: center;
      padding: // your padding
      color: white;
      font-weight: bold;
  
  }

.wrapper {
  box-sizing: border-box;
  min-height: 100%;

  display: flex;
  flex-direction: column;
}

.page-header {
  position: unset;
}

header,
footer {
  flex-grow: 0;
  flex-shrink: 0;
}

.footer-meta-navigation ul {
    margin: 0;
}

.navigation {
  width: auto;
}

.navigation-meta {
  position: relative;
}

.main-content {
  flex: 1 1 auto;
  margin-top: 1rem;
  max-width: 1280px;
  min-width: 1024px;
  width: 1024px;
}

.navigation-language:hover:before {
  content: "\e917";
  font-family: "kit-icons" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-right: 0.55556em;
  color: var(--color_brand_primary);
  font-size: 0.9em;
}
/* 
.main-content * {
  padding: unset;
  margin: unset;
  border: unset;

} */

.main-content > ol,
.main-content > ul {
  list-style: inside;
}

body {
    background-color: whitesmoke;
    --angle: 90deg;
  }
  
  .img {
    width: 800px;
  }
  .ray {
    clip-path:polygon(0% 45%, 100% 0%, 100% 100%, 0% 55%);
    transition: 4s;
  transform: translateY(-50%) translateX(-50%) rotate(var(--angle)) translateY(50%) translateX(50%) translateY(-50%); 
    position: absolute;
    top: -30px;
    left: 50%;
    width: 500px;
    height: 100px;
    background: linear-gradient(0.25turn,rgba(255,255,0,0.7), rgba(255,255,100,0));
  }
  
  
  .light1 {
    animation-duration: 10s;
    animation-name: wave;
    animation-iteration-count: infinite;
  }
  
  .light2 {
    animation-duration: 17s;
    animation-name: wave;
    animation-iteration-count: infinite;
  }

  .light3 {
    animation-duration: 15s;
    animation-name: wave;
    animation-iteration-count: infinite;
  }
  
  
  @keyframes wave {
    0% {
      --angle: 90deg;
    }
    
    50% {
      --angle: 110deg;
    }
    100% {
      --angle: 60deg;
    }
  }
/* 
  .neonText {
    animation: flicker 1.5s infinite alternate;
    /*color: #fff;*/
  }
  

  
  /* Flickering animation */
  @keyframes flicker {
      
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
  
        text-shadow:
        0 0 4px #fff,
        0 0 11px #fff,
        0 0 19px #fff,
        0 0 40px #0fa,
        0 0 80px #0fa,
        0 0 90px #0fa,
        0 0 100px #0fa,
        0 0 150px #0fa;
    
    }
    
    20%, 24%, 55% {        
        text-shadow: none;
    }    
  } */