html {
  overscroll-behavior: none;
}

/* Menu code starts here */

#menuToggle
{
  display: block;
  /* You can also use relative/absolute here if you want to stay on the top */
  position: fixed;
  top: 50px;
  left: 50px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  max-width: 400px;
  width: 100vw;
  max-height: 100vh;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  box-sizing: border-box;
  overflow-y: auto;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

#menu li label
{
  cursor: pointer;
  font-family: 'Mesmerize RG';
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}


body {
  margin:0;
  padding:0;
  width:100%;
  background:#202020;
}

h1 {
  font-family: 'Mesmerize RG';
  text-align: center;
  font-size: 100px;
  color: white;
  text-shadow: #ff0073 5px 1px, #00d5ff -5px -1px;
}

h3 {
  font-family: 'Mesmerize RG';
  text-align: center;
  font-size: 30px;
  color: white;
}

p {
  font-family: 'Mesmerize RG';
  text-align: center;
  color: white;
}

section {
  position:relative;
  overflow:visible;
}

svg {
  position:absolute;
  bottom:-1px;
  overflow:visible;
  width:100%;
  height:150px;
}

.arrows {
  position:fixed;
}



@keyframes move-background {
  from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}
@-webkit-keyframes move-background {
  from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}

@-moz-keyframes move-background {    
	from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}

    @-webkit-keyframes move-background {
	from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}


#starmap {
  background:#0c0057;
  background: radial-gradient(circle,rgba(12, 0, 87, 1) 60%, rgba(112, 241, 255, 1) 70%, rgb(229, 13, 67) 100%);
  width: 100%;
  height: 350px;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: -1;
}

.star {
  animation-name: fade;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
  animation-timing-function: linear;
}


@keyframes fade {
  0% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }
}

.galleryTransparent{
  display: grid;
   grid-template-columns: repeat(auto-fill, minmax(100px, 300px));
  padding: 10px;
  place-items: center;
}

.gallery{
  display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 500px));
  place-items: center;
}

.galleryImage { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  max-width: 500px;
  height: 400px;
  border-radius: 8px;
  object-fit:cover;
  padding: 0%;
}

.galleryCard { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  max-width: 300px;
  height: 500px;
  border-radius: 8px;
  object-fit:cover;
  padding: 0%;
}



#overlay {
    font-family: 'Mesmerize RG';
    text-align: center;
    font-size: 70px;
    color: rgb(140, 37, 230);
    text-shadow: #000000 5px 1px, #000000 -5px -1px;
    position: absolute;
    z-index:100;
}

.button {
  background-color: #3095cb;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  font-family: Cause;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: rgb(0, 0, 0);
   color: white;
   text-align: center;
}