@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Days+One&family=Dela+Gothic+One&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500&display=swap');


  * {
    scrollbar-width: auto;
    scrollbar-color: #171a2e #232946;
  }

  *::-webkit-scrollbar {
    width: 0px;
  }

  *::-webkit-scrollbar-track {
    background: #232946;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #171a2e;
    border-radius: 10px;
    border: 3px solid #232946;
  }


  * {
	
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
  }


  body {
    color: #fffffe;
    background-image: url("/images/ooorganize.svg"), url("/images/waves.svg") ;
    background-size: cover;
	  background-repeat: no-repeat;
    background-position-y: -16px;

    background-color: #232946;
    padding: 20px;
    width: 100vw;
    height: 100vh;

    font-size: 18px;


  }

  h1 {
    font-family: 'Dela Gothic One', cursive;
    color: #fffffe;

    align-items: center;

    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    margin-top: 50px;
    font-size: 28px;
    text-align: center;

  }


  .footclass {
    color: #fffffe;

    margin-left: 15px;

    text-decoration: none;

    font-size: 15px;
    font-family: 'Kanit', sans-serif;


    transition: 0.5s;
  }

  .skew {
    text-shadow: -13px 13px 0px #171A2E;
    transform: skew(5deg, 5deg);
  }

  .header {
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;

    max-width: 1400px;
    position: relative;

    z-index: 9;


    margin-top: -10px;
    text-align: center;

    padding: 12px;
    
    transition: 0.5s;
    /* 	    background-color: hsla(230, 33%, 17%, 0.7); */

  }

  .header a {
    font-family: 'Kanit', sans-serif;
    float: left;
    color: #fffffe;


    text-align: center;
	margin-top: 14px;
    margin-left: 19px;
	margin-right: 14px;
	margin-bottom: 14px;
	  
    text-decoration: none;

    
    font-size: 18px;
    line-height: 25px;

    
    transition: 0.5s;
  }

  .header a.logo {
	margin-left: 14px;
    font-size: 25px;
    text-align: center;
    color: #fffffe;
    font-weight: bold;
    font-family: 'Dela Gothic One', cursive;
    transition: 0.5s;
    text-shadow: 4px 4px 0px #171A2E;
  }

  .header a:hover {

    color: #b8c1ec;
    transition: 0.5s;
  }

  .header a.logo:hover {
    color: #b8c1ec;
	
    transition: 0.5s;
  }

 
  .header a.active {

    font-weight: bold;
    color: #b8c1ec;
  }

  .header a.active:hover {

    color: #C59DF1;
    transition: 0.5s;
  }
  .header a.support:hover{
	  color: #FFAED8;
	  transition: 0.5s;
  }

  .header-right {
    float: right;
    text-align: center;
  }

	.header-menu{
		float: right;
    	text-align: center;
	}

  .aclass {
	  opacity: 90%;
    color: #fffffe;
    display: inline-block;
	margin-left: 26px;
    padding: 12px;
    margin-top: 8px;
    margin-bottom: 4px;

    width: 100%;
    max-width: 152px;


    text-decoration: none;

    align-items: center;



    font-size: 16px;
    font-family: 'Kanit', sans-serif;

    
	background-color: #1d213a;
    border-radius: 16px;

/* 	border: 2px solid #202540; */
    transition: 0.5s;
    text-align: center;
  }

  .aclass:hover {
	background-color: #171a2e;

  }







  .loader {
    z-index:1000;
    display: inline-block;
    width: 30px;
    height: 30px;
    position: absolute;
    border: 4px solid #Fff;
    animation: loader 2s infinite ease;
  }

  .loader-wrapper {
	z-index:1000;
    
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #232946;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .loader-inner {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    background-color: #fff;
    animation: loader-inner 2s infinite ease-in;
  }

  @keyframes loader {
    0% {
      transform: rotate(0deg);
    }

    25% {
      transform: rotate(180deg);
    }

    50% {
      transform: rotate(180deg);
    }

    75% {
      transform: rotate(360deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes loader-inner {
    0% {
      height: 0%;
    }

    25% {
      height: 0%;
    }

    50% {
      height: 100%;
    }

    75% {
      height: 100%;
    }

    100% {
      height: 0%;
    }
  }


    .hero{
		
		width: 1405px;
		margin: auto;
		margin-bottom: 36px;
		
  	}

	.center {
		padding: 12px;
		width: 1405px;
		max-width: 100vw;
	   position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		margin-bottom: 36px;
		
  	}
	
	.head{
		font-size: 32px;
		color: #fffffe;
		margin-left: 28px;
		margin-right: 28px;
		font-family: 'Dela Gothic One', cursive;
	}
	
	.copy{
		margin-left: 28px;
		margin-right: 28px;
		font-size: 24px;
	    font-family: 'Kanit', sans-serif;
		
	}
	
 	#typewriter {
		color: #b8c1ec;
        font-size: 32px;
		font-family: 'Dela Gothic One', cursive;
		
      }

      #cursor {
        color: #b8c1ec;
        animation: blink 1s linear infinite;
      }

      @keyframes blink {
        0% {
          opacity: 100%;
        }
        50% {
          opacity: 0%;
        }
      }


	@media screen and (max-width: 750px) {
		.aclass {
		    width: 100%;
		    max-width: 147px;
		  }
		.head{
			font-size: 28px;
			color: #fffffe;
			font-family: 'Dela Gothic One', cursive;
		}
		.copy{
			font-size: 22px;
		    font-family: 'Kanit', sans-serif;
			
		}

		#typewriter {
			color: #b8c1ec;
	        font-size: 28px;
			font-family: 'Dela Gothic One', cursive;
			
	      }
	}

	@media screen and (max-width: 700px) {
		.head{
			font-size: 24px;
			color: #fffffe;
			font-family: 'Dela Gothic One', cursive;
		}
		.copy{
			font-size: 18px;
		    font-family: 'Kanit', sans-serif;
			
		}

		#typewriter {
			color: #b8c1ec;
	        font-size: 28px;
			font-family: 'Dela Gothic One', cursive;
			
	      }

		 .aclass {
		    width: 100%;
		    max-width: 142px;
		  }

		
	}

  @media screen and (max-width: 610000px) {
		.hamburger{
			display: none;
		}
		
	}
  @media screen and (max-width: 610px) {
	  .hamburger{
			display: block;
		}
	.aclass {
		width: 100%;
		max-width: 132px;
	}
	#typewriter {
		color: #b8c1ec;
        font-size: 24px;
		font-family: 'Poppins', sans-serif;
		
    }  
	.head{
		font-size: 24px;
		color: #fffffe;
		font-family: 'Poppins', sans-serif;
	}
	.copy{
		font-size: 18px;
		font-family: 'Kanit', sans-serif;		
	}
    .header a {
        float: none;
        display: none;
    }
    .header a.logo {
        font-family: 'Poppins', sans-serif;
        display: block;
	    float: left;
    }
    .header-right {
        float: none;
    }
    h1 {
        font-family: 'Poppins', sans-serif;
    }
}
	@media screen and (max-width: 480px) {

		
	}

	.moveLeft{
		opacity: 90%;
		margin-left: 4px;
		background-color: #b8c1ec;
		color: #1d213a;;
	}
   .moveLeft:hover{
		opacity: 100%;
		background-color: #b8c1ec;
	}
	
	

	
	.glow-support:hover {
	  
	  box-shadow: 0 5px 15px rgba(184, 193, 236, .4);
	}
	.glow-join:hover {
	  
	  box-shadow: 0 5px 15px rgba(0, 0, 0, .4);
	}
	
	* {
	  margin: 0;
	  padding: 0;
	  box-sizing: border-box;
	}
	
	.menuItem {
	  font-family: 'Dela Gothic One', cursive;
	  text-decoration: none;
	  display: block;
	  margin: 2rem 4rem;
	  font-size: 1.8rem;
	  color: white;
	  text-decoration: none;
		transition: 0.5s;
	}
	
	.menuItem:hover {
	  text-decoration: none;
	  
	}
	
	.hamburger {
	  text-decoration: none;
	  position: fixed;
	  z-index: 100;
	  top: 1rem;
	  right: 1rem;
	  font: size 32px;
	  color: #b8c1ec;
	  padding: 18px;
	  border: none;
	  border-radius: 18px;
	  background: none;
	  cursor: pointer;
	}
	
	.closeIcon {
	  display: none;
	}
	
	.menu {
	  position: fixed;
	  transform: translateY(-100%);
	  transition: transform 0.2s;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  z-index: 99;
	  background: #232946;
	  backdrop-filter: blur(5px);
	  
	  color: white;
	  list-style: none;
	  padding-top: 4rem;
	}
	@supports (backdrop-filter: blur(5px)) {
	  .menu {
		background: hsla(230, 33%, 1%, 0.1);
	    backdrop-filter: blur(5px);
	  }
	}
	
	.showMenu {
	  transform: translateY(0);
	}
	.material-icons {

	    font-size: 30px;
	}

	  .menu a.logo {

	  }
	
	  .menu a:hover {
		text-decoration: none;
	    color: #b8c1ec;
	    transition: 0.5s;
	  }
	
	  .menu a.logo:hover {
	    color: #b8c1ec;
		text-decoration: none;
	    transition: 0.5s;
	  }
	
	 
	  .menu a.active {
		text-decoration: none;
	    font-weight: bold;
	    color: #b8c1ec;
	  }
	
	  .menu a.active:hover {
		text-decoration: none;
	    color: #C59DF1;
	    transition: 0.5s;
	  }
	  .menu a.support:hover{
		  text-decoration: none;
		  color: #FFAED8;
		  transition: 0.5s;
	  }
	
	  .menu-right {
		  text-decoration: none;
	    float: right;
	    text-align: center;
	  }

	.menu-menu{
		text-decoration: none;
		float: right;
    	text-align: center;
	}