@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');

@font-face {
  font-family: Bebas;
  src: url('../fonts/BebasKai-Regular.otf');
}

@font-face {
    font-family: "Druk Web Bold Regular";
    src: url('../font/druk.woff2')format("woff2"),
    src: url('../font/druk.woff2')format("woff"),
}

:root {
	--aligner: 3.5;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: #000;
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-weight: 700;
  overflow-x: clip;

    

}

@media (pointer: fine) {
    html, body{
        scroll-behavior: smooth;
        scroll-snap-type: y mandatory;
    }
}



img {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}


a {
  text-decoration: none;
  color: #fff;
}

p {
	color: #fff;
	font-family: "Inter", sans-serif;
	font-size: calc(1vh + 1vw);
}

.accent_t {
	color: #FDDA25;
}

.accent_b {
	background-color: #FDDA25;
	position: relative;
	color: black;
	font-family: 'Inter'
}

.accent_b span {
	position: relative;
	font-size: calc(0.7rem + 0.5vh + 0.5vw);
	text-align: justify;
}

.btn {
	display: inline-block;
  border: 1.5px solid black;
  border-radius: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-size: 1.5rem;
  transition: all 0.3s ease-in-out;
  color: #000;
  background-color: #fdda25;
  border: 1px solid transparent;
  width: fit-content;
}

.btn:hover {
  color: #fdda25;
  border-color: #fdda25;
  background-color: rgb(253 218 37 / 10%);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: color 0.3s;
  transition: background-color 0.3s;
  transition: border-color 0.3s;
}
/*
.wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 300px;
  transform-style: preserve-3d;
 
}

.snapper {
  transform-style: preserve-3d;
} 


/*
.wrapper {
  
  transform-style: preserve-3d;
   
}
 */
 
 .wrapper{
  position:relative;
  /*pointer-events:none;*/
  display:inline-block;
  z-index:1;
  width: 100%;
}



@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);
	}
}

.stars {
 background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;
 position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
  	z-index: 0;
}

.twinkling{
	width:10000px;
	height: 100%;
	background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;
	background-size: 1000px 1000px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
    
    -moz-animation:move-background 70s linear infinite;
  -ms-animation:move-background 70s linear infinite;
  -o-animation:move-background 70s linear infinite;
  -webkit-animation:move-background 70s linear infinite;
  animation:move-background 70s linear infinite;
	
}




section {
	width: 100%;
	min-height: 100vh;
	position: relative;
	scroll-snap-align: center;
	overflow: hidden;
	z-index: 10;

}

.divider {
	min-height: 3rem;
	position: relative;
	z-index: 9;
	background-color: black;
}

#fluid {
  position: fixed;
  top: 0; left: 0;
  width: 100dvw;
  height: 100dvh;
  z-index: 1;
} 

#comet_wrap_outter {
	position: relative;
	z-index: 9;
	
}

#comet_wrap_inner {
	z-index: 1;
}

canvas{
  width: 100%;
  height: 100%;
  position:fixed;
  inset:0;
  z-index:-1;
}

.navbar {
	position: absolute;
	top: 0;
	width: 100%;
	height: 3.5rem;
	margin-top: 2rem;
	z-index: 35;
	scroll-snap-align: center;
}

.sctn.zero {
	background: linear-gradient(
    rgba(105, 211, 252, 0.25) 0%,
    rgba(255, 116, 161, 0.25) 86%,
    rgba(1, 0, 0, 0.25) 100%);
	height: 100vh;
    overflow: clip;
}



.sctn.one {
	z-index: 10;
    display: flex;
}

.sctn.two {
	z-index: 10;
	
}

.sctn.three {
	z-index: 10;
	display: flex;
	
}

.sctn.four {
	z-index: 10;
	display: flex;
	
}

.zoomer {
  max-height: 100vh;
  height: 100%;
  left: 0;
  right: 0;
  object-fit: cover;  
  position: absolute;
  
}


.hero-image{
  height: 100%;
  object-fit: cover;
  zoom: normal; /* Initial zoom level */
  transition: zoom 0.3s ease; /* Transition effect */
  position: absolute;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%) scale(1);
}


#screen_protector {
    z-index: 11;
    width: 100%;
    height: 100%;
    position: absolute;
}

.sctn.zero img:nth-child(1){
	z-index: 1;
}

.sctn.zero img:nth-child(2){
	z-index: 2;
}
.sctn.zero img:nth-child(3){
  z-index: 3;
  bottom: 0;
  right: 0;
}
.sctn.zero img:nth-child(4){
	z-index: 4;
	bottom: 0;
}
.sctn.zero img:nth-child(5){
	z-index: 5;
	bottom: 0;
}
.sctn.zero img:nth-child(6){
	z-index: 6;
	bottom:0;
}

.parallax__layer {
  max-width: 100vw;	
}

.y.proximity-scroll-snapping {
  scroll-snap-type: y proximity;
}




.hero-text {
	position: relative;
  background: linear-gradient(
    rgba(0, 0, 0, 0.25) 0%,
    rgba(255, 116, 161, 0.25) 50%,
    rgba(1, 0, 0, 0.25) 100%
  );
  background-size: cover;
  height: 100%;
  transform: translateZ(0) scale(1);
  z-index: 25;
}

.year-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 25rem;
  width: 50%;
  
}


.hero-text h2 {
  font-size: 1.25rem;
  position: absolute;
  left: 2.5rem;
  top: 2.5rem;
}

.navbar .name_logo, ul {
  position: absolute;
  list-style-type: none;
}

.rght_nav {
  right: 2.5rem;	
}

.name_logo {
  left: 1.5vw;
  max-height: 3.5rem;
  position: absolute;
  width: fit-content;
  display: inline-block;
  
}

.name_logo {
display: flex;
font-size: calc(var(--aligner) * 1rem);
font-family: 'Druk Web Bold Regular';
width: min-content;
}

.name_logo {
	display: inline-block;
	font-size: calc(var(--aligner) * 1rem);
	font-family: 'Druk Web Bold Regular';
}



.name_logo a {
display: flex;
gap: 1rem;
align-items: center;
}


.name_logo a:nth-of-type(2) {
    position: absolute;
    top: 50%;
    margin-left: 1rem;
    transform: translateY(calc(-1 * (var(--aligner)) * 10%));
    text-align: center;
}

/*
.name_logo a:nth-of-type(2) {
    position: absolute;
    top: 50%;
    margin-left: 1rem;
    transform: translateY(-40%);
    text-align: center;
    
}*/


.name_logo a img {
	height: 100%;
	width: 100%;
}

.hero-text ul li {
   list-style-type: none;
}



.hero-text ul li:nth-of-type(3) {
  visibility: visible;
}

.year-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 70%;
  
}

.year-container h1 {
  font-family: "Druk Web Bold Regular";
  font-weight: 400;
  position: absolute;
  
}


.right_blink,.left_blink {
        opacity: 0;
    }

.year-container .left_blink {
  top: 30%;
    
}

.year-container .right_blink {
  bottom: 30%;
  right: 0;
}


.social-container {
  position: absolute;
  left: 2.5rem;
  bottom: 2.5rem;
}

.social-container i {
  font-size: 1.25rem;
  margin-right: 0.25rem;
}

.inner_wrap {
	display: flex;
	align-items: center;
    justify-content: center;
}

.info-container {
 /* background: #000; */
  z-index: 11;
  transform: translateY(50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0;
  gap: 2rem;
}



.lunch-container {
    display: block;
    margin: 0 auto;
    position: relative;
}

.info-container[data-scroll='in'], .info-container-flex[data-scroll='in'], .lunch-container[data-scroll='in'] {
	animation: reveal 1.5s 1.5s forwards;
}




.info-container img {
  width: 75%;
  margin-bottom: 2.5rem;
 /* filter: saturate(0.65); */
}


.sexion_name {
	font-family: "Druk Web Bold Regular";
	font-size: calc(15vh + 15vw);
	letter-spacing: 1rem;
	position: absolute;
	color: #FDDA25;
	opacity: 0.5;
}

.sexion_name {
  position: absolute; 	
  top: 50%;
  width: 200vw;
  transform: translateY(-50%);
  animation-duration: 3s;
  animation-fill-mode: forwards;
  
}


.slide-from-left {
	left: -100%;
	text-align: left;
}

.slide-from-right {
	right: -100%;
	text-align: right;
}

.slide-from-left[data-scroll='in'] {
  animation-name: slideFromLeft;
  transition-timing-function: cubic-bezier(.38,.82,.82,.38)
}

.slide-from-right[data-scroll='in'] {
  animation-name: slideFromRight;
  transition-timing-function: cubic-bezier(.38,.82,.82,.38)
}

.info-container .h3ader {
	width: 100%;
	margin: 0 auto;
	text-align: left;
}

.h3ader {
	font-size: calc(1rem + 2.75vh + 2.75vw);
	font-family: 'Druk Web Bold Regular';
	grid-area: A;
	width: 100%;
}

.descripto {
	width: 100%;
}

.text-container {
	width: 100%;
    justify-self: center;
    margin: 0 0;
    grid-area: B;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.text-container p {
	font-size: clamp(0.5rem, 10vw, 1.1rem);
    font-weight: 500;
}

#space {
  position: absolute;
  top: 0;
  left: 0;
}

#astro_fade {
	position: absolute;
	height: 80vh;
	width: 100%;
	grid-area: C;
}

#astro_fade img {
    transform-origin: center center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    mix-blend-mode: hard-light;
}

#astro_fade img:nth-of-type(1){
	
}

.astrum {
	display: block;
	position: absolute;
}

.as1 {
	top: 1%;
	right: 3%;
	
}

.as2 {
	top: -3%;
	right: 38%;
}

.as3 {
	bottom: 20%;
	right: 20%;
}

.as4 {
	bottom: 25%;
	left: 20%;
}

.as5 {
	bottom: -3%;
	left: 3%;
}

.astrum:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	background-size: cover;
	
}

.astrum[data-scroll='in']:before {
   animation: glare 2.5s 1.5s cubic-bezier(0.65, 0.2, 0.26, 0.89) infinite; 
}

.as1:before {
	background-image: url('../img/glare.svg');
}

.as2:before {
	background-image: url('../img/glare.svg');
}

.as3:before {
	background-image: url('../img/glare.svg');
}

.as4:before {
	background-image: url('../img/glare.svg');
}

.as5:before {
	background-image: url('../img/glare.svg');
}



#astro_fade img[data-scroll='in'] {
	animation: supernova 2.5s 1.5s ease-in-out infinite;
}

.astrum:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: cover;
    background-image: url('../img/halo.svg');
    mix-blend-mode: color-dodge;
}

.astrum[data-scroll="in"]:after {
    animation: halo 2.5s 1.5s cubic-bezier(0.44, 0.13, 0.62, 0.94) infinite; 
}



/*
.bentogrid > *[data-bento] {
  background-color: #0000ff12;
  backdrop-filter: blur(30px);
}
*/

.bentogrid .bento-filler {
  background-image: url('../img/filler3.jpg');
  background-size: cover; 
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    /* border: 1px solid rgba(123, 123, 123, 0.38); */
    border-bottom: 3px solid #4e4e4e4d;
    border-right: 3px solid #4e4e4e4d;
    border-left: 3px solid #4e4e4e4d;
 /* background: url(../img/filler4.webp) no-repeat; */
}

div.bento-filler[data-bento="1x1"] {
	background-image: url('../img/filler1.jpg');
	background-size: cover;
	background-color: orange;
}

div.bento-filler[data-bento="2x1"] {
	background-image: url('../img/filler2.jpg');
	background-size: cover;
}


div[data-bento] {
    padding: 0.8rem;
  border-radius: 1rem;
  backdrop-filter: brightness(0.3);
  /* From https://css.glass */
  background: rgba(61, 90, 96, 20%);
  border-radius: 1rem;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  /*border: 1px solid rgba(123, 123, 123, 0.38);*/
  border-bottom: 3px solid #4e4e4e4d;
  border-right: 3px solid #4e4e4e4d;
  border-left: 3px solid #4e4e4e4d;
  display: flex;
  flex-direction: column;
  gap: 1rem;
	/*padding: 0.8rem;*/
	/*border-radius: 1rem;*/
	/*backdrop-filter: brightness(0.3);*/
	/* From https://css.glass */
 /*   background: rgba(61, 90, 96, 20%);*/
 /*   border-radius: 1rem;*/
 /*   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);*/
    /*border: 1px solid rgba(123, 123, 123, 0.38);*/
	/*border-bottom: 3px solid #4e4e4e4d;*/
 /*   border-right: 3px solid #4e4e4e4d;*/
 /*   border-left: 3px solid #4e4e4e4d;*/
}

.sushi {
	position: relative;
	
}

.sushi dd {
	font-family: "Druk Web Bold Regular";
  color: #FDDA25;
  font-size: clamp(1rem, 10vw, 2rem);
}

.soy dt {
	 font-family: 'Inter';
  font-size: clamp(0.5rem, 10vw, 1.1rem);
  font-weight: 400;
}


.free_d {
	height: 60%;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.free_d_full {
	height: 100%;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.rainbow {
  text-align: center;
  color: black;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.75rem 1.25rem;
  overflow: hidden;
  border-radius: 0.5rem;	
  box-shadow: 0 5px 5px rgb(245 245 244 / 10%), 0 5px 10px rgb(221 217 101 / 10%), 0 10px 15px rgb(186 190 124 / 10%);
  background: conic-gradient(from 0deg at 50% 50%, #D3D7E9 0%, #B3B6E3 5%, #CEB8EC 10%, #B0CBDA 15%, #D5E5EC 20%, #B3B6E3 25%, #AED8D5 30%, #C8E1DE 35%, #AED8D5 40%, #A3CEDB 45%, #D3D7E9 50%, #C8E1DE 55%, #A2CDD8 60%, #C1E2DA 70%, #A3CEDB 75%, #E5F4FA 80%, #D5E5EC 85%, #D1D3E4 90%, #D3D7E9 95%, #D3D7E9 100%);
  transition: all 0.88s ease-in-out;
}
.rainbow:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background: conic-gradient(from var(--start-angle) at 50% 50%, #E4E7F7 0%, #FFFFFF00 5%, #FFFFFF00 20%, white 25%, #FFFFFF00 30%, #FFFFFF00 40%, #E4E7F7 45%, #FFFFFF00 50%, #FFFFFF00 70%, white 75%, #FFFFFF00 80%, #FFFFFF00 95%, #E4E7F7 100%);
  animation: rotateBack 0.33s ease-in-out forwards;
  transition: all 0.18s ease-in-out;
}
.rainbow span {
  position: relative;
  top: 0.25rem;
  font-size: 2.5rem;
  font-family: "Druk Web Bold Regular";
}
.rainbow:hover {
  cursor: pointer;
  color: white;
  box-shadow: 0 5px 5px rgb(164 173 90 / 8%), 0 10px 10px rgb(255 255 255 / 8%);
}
.rainbow:hover:before {
  opacity: 0.66;
  animation: rotateTo 0.55s ease-in-out forwards;
}

.rainbow::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: #FDDA25;
  mix-blend-mode: multiply;
}

.rainbow:hover:after {
  animation: rotateHue 0.88s ease-in-out forwards; 	
}

.info-container-flex {
  display: flex;
  transform: translateY(50%);
  width: 87.5%;
  margin: 0 auto;
  z-index: 11;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  
}

.inner-wrap-flex {
	height: 100%;
	width: 100%;
	position: relative;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.he {
	height: auto;
	width: 100%;
	position: relative;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	
}

.inner-wrap-flex h3, p {
	z-index: 10;
	position: relative;
}


.info-container-flex .h3ader, p {
	margin: 0 auto;
	position: relative;
    display: block;
}
/*
.info-container-flex p {
	margin-bottom: 6rem;
} */

/*
#red_shift {
	width: 85%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
} */

.experience {
    position: absolute;
	bottom: 0;
    left: 50%;	
	transform: translateX(-50%);
	width: 100vw;
    height: 80vh;
	z-index: -1;
	overflow: visible;
	opacity: 0.5;
}


.text-container.lays {
	z-index: 2;
	width: 100%;
	height: 70%;
	
}


.event_horizon {
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15rem;
    /* margin: 100px auto 0 auto; */
    perspective: 800px;
}

.carousel {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rotate360 60s infinite forwards linear;
}

.rotator {
  position: absolute;
  
  background: rgba(61, 90, 96, 20%);
    border-radius: 1rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(123, 123, 123, 0.38);
  display: flex;
  text-align: center;
  backface-visibility: hidden;
}

.cuff {
  margin: auto;
  font-size: calc(0.7rem + 0.25vh + 0.25vw);
  font-family: 'Inter'
}

.guilds {
	position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -60%);
    z-index: 1;
	text-align: center;
    
}

.guilds span {
	font-size: 4rem;
	font-family: "Druk Web Bold Regular";
	color: #FDDA25;

}

.cuff.ling {
	font-size: 2.5vw;
	font-family: "Druk Web Bold Regular";
	color: #FDDA25;
}

.pringles {
    display: grid;
  align-items: center;
  text-align: left;
  justify-items: center;
  grid-template-columns: repeat(auto-fill, minmax(min(270px,100%), 1fr));
  gap: 1.25rem;
	/*display: grid;*/
	
 /*   align-items: center;*/
 /*   text-align: left;*/
 /*   justify-items: center;*/
	/*grid-gap: calc(1vw + 1vh);*/

}

.threes {
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
	backdrop-filter: brightness(0.3);
    background: rgba(61, 90, 96, 20%);
    border-radius: 1rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(123, 123, 123, 0.38);
	flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

}

.kart {
     position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
	/*padding: 2rem;*/
	/*position: relative;*/
	
}

.kart_icon {
	
}

.kart_head {
     font-family: 'Druk Web Bold Regular';
  font-size: clamp(1rem, 10vw, 2rem);
  color: #FDDA25;
	/*font-family: 'Druk Web Bold Regular';*/
	/*font-size: calc(1rem + 1.25vw + 1.25vh);*/
	/*color: #FDDA25;*/
}

.kart_desc {
     font-family: 'Inter';
  font-size: clamp(0.5rem, 10vw, 1.1rem);
  font-weight: 400;
	/*font-family: 'Inter';*/
	/*font-size: calc(1rem + 0.3vw + 0.3vh);*/
}


.kart_icon {
  filter: drop-shadow(0 0 0px white);
  transition: filter 0.3s ease-in-out;
  height: calc(4rem + 1vw + 1vh); 
  margin: 2rem 0;
}

.kart_icon img {
   height: calc(4rem + 1vw + 1vh); 	
}

/* Apply glow effect on hover */
.threes:hover .kart_icon {
  filter: drop-shadow(0 0 0.8rem #FDDA25) brightness(150%);
}



@keyframes rotate360 {
  from {
    transform: rotateY(360deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}

.rotator:nth-child(1) {
  transform: rotateY(0deg) translateZ(450px);
}
.rotator:nth-child(2) {
  
  transform: rotateY(36deg) translateZ(450px);
}
.rotator:nth-child(3) {
  
  transform: rotateY(72deg) translateZ(450px);
}
.rotator:nth-child(4) {
  
  transform: rotateY(108deg) translateZ(450px);
}
.rotator:nth-child(5) {
  
  transform: rotateY(144deg) translateZ(450px);
}
.rotator:nth-child(6) {
  
  transform: rotateY(180deg) translateZ(450px);
}
.rotator:nth-child(7) {
  
  transform: rotateY(216deg) translateZ(450px);
}
.rotator:nth-child(8) {
  
  transform: rotateY(252deg) translateZ(450px);
}
.rotator:nth-child(9) {
  
  transform: rotateY(288deg) translateZ(450px);
}
.rotator:nth-child(10) {
  
  transform: rotateY(324deg) translateZ(450px);
}
.rotator:nth-child(11) {
  
  transform: rotateY(360deg) translateZ(450px);
}


/* ANIMATIONS SECTION */

@keyframes supernova {
	0% {opacity: 0; transform: translate(-50%, -50%) rotate(0deg);}
	75% {opacity: 1; transform: translate(-50%, -50%) rotate(30deg);}
	100% {opacity: 0; transform: translate(-50%, -50%) rotate(30deg);}
}

@keyframes glare {
	0% {opacity: 0; transform: translate(-50%, -50%) rotate(0deg);}
	75% {opacity: 1; transform: translate(-50%, -50%) rotate(-12deg);}
	100% {opacity: 0; transform: translate(-50%, -50%) rotate(-12deg);}
} 

@keyframes halo {
	0% {opacity: 0; transform: translate(-50%, -50%) rotate(0deg);}
	33%, 66% {opacity: 0.3; transform: translate(-50%, -50%) rotate(-12deg);}
	100% {opacity: 0; transform: translate(-50%, -50%) rotate(-12deg);}
} 

@keyframes jumbo {
    from {
        background-position: 50% 50%, 50% 50%;
    }
    to {
        background-position: 350% 50%, 350% 50%;
    }
}

@keyframes slideFromLeft {
  from {
    left: -100%; opacity: 1;
  }
  to {
    left: 100%; opacity: 0;
  }
}

@keyframes slideFromRight {
  from {
    right: -100%; opacity: 1;
  }
  to {
    right: 100%; opacity: 0;
  }
}

@keyframes reveal {
	from {opacity: 0; transform: translateY(50%);}
	to {opacity: 1; transform: translateY(0);}
}

@property --start-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotateTo {
  to {
    --start-angle: 28deg;
  }
}
@keyframes rotateBack {
  from {
    --start-angle: 28deg;
  }
  to {
    --start-angle: 0deg;
  }
}



/* MEDIA QUERIES SECTION */


@media (min-width: 300px) {
  .name_logo {
      font-size: 2rem;
  }
  
  .name_logo span {
      height: 1.5rem;
  }
  
  .name_logo a {
      min-width: 3.5rem;
      height: 2rem;
  }
  
      .one, .two, .four {
      margin-bottom: 3rem;
  }
  
   .info-container, .info-container-flex, .lunch-container {
     width: 95%;
     
 }
  
   .astrum {
     width: 7rem;
     height: 7rem;
 }
 
 #astro_fade img {
     width: 4rem;
     height: 4rem;
 }
  
  
  
    .descripto {
        font-size: 1.15rem;
    }
    
    .rotator {
  height: 3.5rem;
  top: 1.25rem;
  left: 0.625rem;
  right: 0.625rem;
    }
    
    .cuff {
        font-size: 0.7rem;
    }
}

@media (min-width: 440px) {
     .name_logo {
      font-size: 2.5rem;
  }
  
  .name_logo span {
      height: 2rem;
  }
  
  .name_logo a {
      min-width: 3.5rem;
      height: 2.5rem;
  }
   
   
    .year-container h1 {
        font-size: 2.5rem;
 }

 
 .bentogrid {
--bento-row-height: 7rem;
}
 


 .descripto {
     margin-bottom: 2rem;
     font-size: 1.3rem;
 }

}


@media (min-width: 760px) {
   .name_logo {
      font-size: 3.5rem;
  }
  
  .name_logo span {
      height: 2.75rem;
  }
  
  #astro_fade img {
	height: 6rem;
    width: 6rem;
}

.astrum {
	width: 9rem;
	height: 9rem;
}
  
  
  
  .name_logo a {
      min-width: 3.5rem;
      height: 3.5rem;
  }
      
 .bentogrid {
--bento-row-height: 10rem;
}
  
  .hero-text ul li {
    visibility: visible;
  }
  
    .info-container, .info-container-flex, .lunch-container {
     width: 90%;
 }
 


.soy td {
	font-size: 1rem ;
}  


  .info-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
	grid-template-areas: 'A A' 'B C';
    align-items: center;
    text-align: left;
}


 .year-container h1 {
     font-size: 3.5rem;
 }

  .lunch-container {
	  width: 87.5%;
	  transform: translateY(50%);
	  opacity: 0;
  }

  .lunch-container .h3ader {
	  margin: 2rem 0;
  }

  .info-container img {
    justify-self: center;
    width: 75%;
}
}


@media (min-width: 1126px) {
   .one, .two, .four {
       margin-bottom: 4rem;
   }
   
     #astro_fade img {
	height: 8rem;
    width: 8rem;
}

.astrum {
	width: 12rem;
	height: 12rem;
}
   
  
.bentogrid {
--bento-row-height: 15rem;
}
   
  .info-container, .info-container-flex, .lunch-container {
     width: 87.5%;
 }
  
  
   .year-container h1 {
      font-size: calc(4.25rem + 1vw);;
  }

  

  .descripto {
     margin-bottom: 4rem;
     font-size: 1.5rem;
 }
 
 .rotator {
     height: 7.5rem;
  top: 1.25rem;
  left: 0.625rem;
  right: 0.625rem;
 }
  
} 

