@charset "utf-8";
/* CSS Document */
.padmea{
	padding-top: 5vh;
	text-align: center;
}

#overlay {
    position: relative;
}

#overlay::before {
    background-image: linear-gradient( top, 
            rgba( 20, 32, 37, 0 ) 0%, 
            rgba( 20, 32, 37, 1 ) 100% );
        background-image: -moz-linear-gradient( top, 
            rgba( 20, 32, 37, 0 ) 0%, 
            rgba( 20, 32, 37, 1 ) 100% );
        background-image: -ms-linear-gradient( top, 
            rgba( 20, 32, 37, 0 ) 0%, 
            rgba( 20, 32, 37, 1 ) 100% );
        background-image: -o-linear-gradient( top, 
            rgba( 20, 32, 37, 0 ) 0%, 
            rgba( 20, 32, 37, 1 ) 100% );
        background-image: -webkit-linear-gradient( top, 
            rgba( 20, 32, 37, 0 ) 0%, 
            rgba( 20, 32, 37, 1 ) 100% );
    content: "\00a0";
    height: 100%;
    position: absolute;
    width: 100%;
}

video{
	margin: auto;
	width: 80vw;
	overflow: hidden;
	border-radius: 25px;
}


.setme{
	position: absolute;
	width: 100%;
}

.textboxcss{
	color: #f6f6ee;
	margin: 20vw;
	font-family: KortoBook;
	text-align: left;
	font-size: 3rem;
}


.text-box{
	text-align: center;
	color: #f6f6ee;
	background: #AFA18924;
	margin: auto;
	width: 35%;
	border-radius: 25px;
    padding: 20px;
	font-family: KortoBook;
	margin-bottom: 5vw;
}

.text-box a{
	text-align: center;
	color: #f6f6ee;
	font-family: KortoBook;
	text-decoration: none;
}

.padme{
	margin-top: 20vh;
}

.YAPP{
	font-size: 1.2rem;
	color: #f6f6ee;
	font-family: KortoBook;
	text-decoration: none;
	text-align: left;
	margin-top: 5vw;
	text-wrap: balance;
}
.disciplinescss{
	font-size: 1.1rem;
	color: #f6f6ee;
	font-family: KortoBook;
	text-decoration: none;
	text-align: center;
	margin-top: 5vw;
	margin-bottom: 5vw;
}

.WIPENDOFPAGE{
	background: #afa1890f;
	color: #f6f6ee;
	font-family: KortoBook;
	font-size: 1.3rem;
	text-align: center;
	padding: 5vh;
}

.event-link{
	text-decoration-line: none!important;
	color: #e6f36d!important;
}

.event-link:hover{
	text-decoration-line: none!important;
	color: #FFFFFF!important;
}

.event-link:active{
	text-decoration-line: none!important;
  color: #FFFFFF!important;
}
.event-link:visited {
	text-decoration-line: none!important;
  color: #afa189!important;
}

.event-col{
	
}

.text-box2{
	text-align: left;
	color: #f6f6ee;
	margin: auto;
	border-radius: 25px;
    padding: 20px;
	font-family: KortoBook;
	font-size: 1.1rem;
}

.text-box2 a{
	text-align: center;
	color: #f6f6ee;
	font-family: KortoBook;
	text-decoration: none;
	
}

.resize-map{
	padding: 3vh;
	height: 100%;
}

.challangers{
	font-size: 1.2rem;
    color: #afa189;
	font-family: KortoBook;
	text-decoration: none;
	text-align: left;
	text-wrap: balance;
}

.lights{
	animation: lights 5s 750ms linear infinite;
}

.headermain{
	font-size: 1.7rem;
	color: white;
}

.headerlink{
	font-size: 1.2rem;
}
/* The below shows the new half-pipe */

.newminiramptext h3{
	text-align: center;
	font-size: 2rem;
	color: #f6f6ee;
    font-family: KortoBook;
	padding-top: 5vh;
}

.newminiramptext p{
	text-align: center;
	font-size: 1.3rem;
	color: #f6f6ee;
    font-family: KortoBook;
	padding-top: 1vh;
}

.customevideopad{
	text-align: center;
}

.videodivcss{
	position: absolute;
	width: 100%;
	z-index: 1;

}

.customevideopad video{
	margin: auto;
	max-width: 45vh;
	overflow: hidden;
	border-radius: 25px;
	position: relative;
}

#audio-control {
	cursor:pointer;
	margin: 5px 2px;
	border-radius: 50%;
	background: none;
	font-size: 2rem;
	display: inline-block;
	z-index: 1024;
}
/* The Above shows the new half-pipe */
#logoeasteregg {
    opacity: 1;
    transition: opacity 2s ease; /* Ensure the transition duration is set */
}

@keyframes lights {
  0% {
    color: hsl(60, 40%, 80%);
    text-shadow:
      0 0 1em hsla(260, 100%, 50%, 0.2),
      0 0 0.125em hsla(260, 100%, 60%, 0.3),
      -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
  30% { 
    color: hsl(60, 80%, 90%);
    text-shadow:
      0 0 1em hsla(260, 100%, 50%, 0.5),
      0 0 0.125em hsla(260, 100%, 60%, 0.5),
      -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  40% { 
    color: hsl(60, 100%, 95%);
    text-shadow:
      0 0 1em hsla(260, 100%, 50%, 0.5),
      0 0 0.125em hsla(260, 100%, 90%, 0.5),
      -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
      0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
  }
  
  70% {
    color: hsl(60, 80%, 90%);
    text-shadow:
      0 0 1em hsla(260, 100%, 50%, 0.5),
      0 0 0.125em hsla(260, 100%, 60%, 0.5),
      0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  100% {
    color: hsl(60, 40%, 80%);
    text-shadow:
      0 0 1em hsla(260, 100%, 50%, 0.2),
      0 0 0.125em hsla(260, 100%, 60%, 0.3),
      1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
}





@media only screen and (max-width: 1999px){
	.textboxcss {
        text-align: center;
        font-size: 2.5rem;
        margin-top: 20vh;
	}
		.resize-map {
		padding: 2vh;
	}
}

@media only screen and (max-width: 991px){
	.text-box2 {
		padding: 1vh;
	}
	.textboxcss {
		text-align: center;
		font-size: 1.8rem;
		margin-top: 15vh;
	}
	.headermain{
		font-size: 1.4rem;
	}
	.headerlink{
		font-size: 1.1rem;
	}
}

@media only screen and (max-width: 767px){
.event-col{
	padding-bottom: 3vw;
}
	
	.resize-map {
		padding: 0vh;
		padding-bottom: 3vh;
	}
	.challangers{
		text-align: center;
	}
	.headermain{
		font-size: 1.2rem;
	}
	.headerlink{
		font-size: 1rem;
	}
}

@media only screen and (max-width: 700px){
	.textboxcss {
		text-align: center;
		font-size: 1.8rem;
		margin-top: 15vh;
	}
	video{
		width: 90vw;
	}
	
	.YAPP{
		font-size: 1.0rem;
	}
	.disciplinescss{
		font-size: 1.0rem;
	}
	.text-box2 {
		font-size: 1rem;
	}
	.WIPENDOFPAGE{
		font-size: 1.0rem;
	}
}
@media only screen and (max-width: 600px){
	.textboxcss{
		text-align: center;
		font-size: 1.8rem;
		margin-top: 35vh;
	}
	.headermain{
		font-size: 1rem;
	}
	.headerlink{
		font-size: 0.8rem;
	}
}

@media only screen and (max-width: 500px){
	.headermain{
		font-size: 0.9rem;
	}
	.headerlink{
		font-size: 0.8rem;
	}
}

/* Layout for smaller screens */
@media (max-width: 768px){
  section > div {
    display: block; /* Stack items vertically */
    text-align: center; /* Center align text */
  }
  
  section > div > div {
    margin-bottom: 20px; /* Add space between items */
	}
}