@charset "utf-8";
/* CSS Document */

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(128, 128, 128, 128);
}

::-webkit-scrollbar-thumb {
    background: #666;
}

body {
	background-color: #111;
	color: #EEE;
	font-size: 0vw;
	margin: 0vw;
}

.dark-mode {
	background-color: #111;
	color: #EEE;
	transition-property: all;
    transition-duration: 0.5s;
}

.light-mode {
	background-color: #EEE;
	color: #333;
	transition-property: all;
    transition-duration: 0.5s;
}

.dark-mode-element{
    color: #333;
    background-color: #EEE;
}

.light-mode-element{
    color: #EEE;
    background-color: #333;
}

.purplink{ /* used in dark mode */
    color: #ceabee;
    transition-property: all;
    transition-duration: 0.5s;
}

.darkpurplink{ /* used in light mode */
    color: #9853d8;
    transition-property: all;
    transition-duration: 0.5s;
}

.bluelink{ /* used in dark mode */
    color: #57a9e0;
    transition-property: all;
    transition-duration: 0.5s;
}

.darkbluelink{ /* used in light mode */
    color: #3d59d3;
    transition-property: all;
    transition-duration: 0.5s;
}

.title {
  text-align: center;
  font-size: 3.6vw;
  font-family: Roboto, sans-serif;
  font-weight: bold;
}

.nav-list {
	background-color:#333;
    list-style-type: none;
	height: 6vw;
    margin: 0vw 0vw 0vw 0vw;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
	transition-property: all;
    transition-duration: 0.75s;
	width: 100%;
    z-index: 1000;
}

.gap {
    display: flex;
    width: 12.6vw;
	height: 6vw;
    border: none;
    background-color: #333;
	padding: 0px;
    font-size: 1.5vw;
    cursor: pointer;
    text-align: center;
    color: #FFF;
    font-family: Roboto, sans-serif;
    text-decoration: none;
    font-weight: bold;
    transition-property: all;
    transition-duration: 0.75s;
}

.block {
    display: block;
	position: relative; 
    width: 10.6vw;
    height: 6vw;
    line-height: 1.5vw;
    border: none;
    background-color: #333;
    padding: 2.1vw 0vw 2.1vw 0vw;
    font-size: 1.275vw;
    cursor: pointer;
    color: #FFF;
    font-family: Roboto, sans-serif;
    text-decoration: none;
    transition-property: all;
    transition-duration: 0.75s;
	font-weight: bold;
}

.block:hover{
  background-color: #666;
  color: #FFF;
  transition-property: all;
  transition-duration: 0.75s;
}

.hoverUp{
    transition-property: all;
    transition-duration: 0.75s;
    transform: translateY(0.15vw);
    pointer-events: none;
}

.icon {
    display: block;
    width: 5.6vw;
    border: none;
    background-color: #333;
    padding: 1.54vw 0vw 1.34vw 0vw;
    font-size: 1.275vw;
    cursor: pointer;
    text-align: center;
    color: #FFF;
    font-family: Roboto, sans-serif;
    text-decoration: none;
    transition-property: all;
    transition-duration: 0.75s;
    filter: brightness(100%);
}

.icon:hover{
  filter: brightness(75%);
}
.mail:hover{
	background-color:#008EFF;
}

.youtube:hover{
	background-color:#F00;
}

.lightOff{
	background-color:#333;
	display: block;
    width: 5.6vw;
    border: none;
    padding: 1.54vw 0vw 1.34vw 0vw;
    font-size: 1.275vw;
    cursor: pointer;
    text-align: center;
    font-family: Roboto, sans-serif;
    text-decoration: none;
    transition-property: all;
    transition-duration: 0.5s;
}

.lightOn{
	background-color:#EEE;
	display: block;
    width: 5.6vw;
    border: none;
    padding: 1.55vw 0vw 1.35vw 0vw;
    font-size: 1.275vw;
    cursor: pointer;
    text-align: center;
    font-family: Roboto, sans-serif;
    text-decoration: none;
    transition-property: all;
    transition-duration: 0.5s;
}

.lightOff:hover{
	background-color:#666;
    filter: brightness(75%);
}

.lightOn:hover{
	background-color:#CCC;
    filter: brightness(75%);
}

.instagram:hover{
	background-color:#8134AF;
}

a:link { text-decoration: none; }


a:visited { text-decoration: none; }


a:hover { text-decoration: none; }


a:active { text-decoration: none; }

#mainLogo{
	margin: 0vw 0vw 0vw 0vw;
    transform: translate3d(0,0,0);
    transition-property: all;
    transition-duration: 0.75s;
}

.sticky {
	position: fixed;
	top: 0;
}

.content {
	padding: 1vw;
}

#mainTitleID{
    transform: translateX(0.4vw);
    pointer-events: none;
}

.mainTitleTop{
    pointer-events: none;
}

.mainTitle{
    font-size: 8vw;
    margin: auto;
    width: 5%;
    padding: 1vw;
    margin-top: 0vw;
    margin-bottom: 2vw;
    width: 90vw;
    text-align: center;
    transition-duration: 0.75s;
}

.mainTitle:hover{
    letter-spacing:1vw;
    transform: translateY(0.5vw) translateX(0.4vw);
    opacity: 0.6;
}

.paddingtop {
	padding-top: 7vw;
}

.divGap{
	display: flex;
	flex-direction: column;
    font-size: 0;
}

#topVideo{
	padding: 0;
	margin: 0;
    font-size: 0;
}

.footer{
    background-color:#333; 
    color:white; 
    display:flex;
    padding:0vw;
}

.footertext{
    padding:0.75vw;
    margin:0;
    font-size: 1vw;
    transition-property: all;
    transition-duration: 0.75s;
}

.footertext:hover{
    filter: brightness(50%);
    transform: translateX(1vw);
}

hr {
    display: block;
    unicode-bidi: isolate;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: auto;
    margin-inline-end: auto;
    overflow: hidden;
    border-style: inset;
    border-width: 0.1vw;
}

.THICK{
    height: 0.5vw;
    border: none;
    transition-property: all;
    transition-duration: 0.75s;
}

.LESSTHICK{
    height: 0.4vw;
    border: none;
    transition-property: all;
    transition-duration: 0.75s;
}

.LESSTHICK:hover{
    opacity: 0.6;
}

.footerMargin{
    margin-top: 2.5vw;
}

.break{
    height: 2.5vw;
}


.navbarLogo{
    position: relative;
	margin: 0vw 0vw 0vw 0vw;
    align-items: center;
    transform: rotate(180deg) rotateY(90deg) translateY(6.5vw);
    transition-property: all;
    transition-duration: 0.75s;
    height:auto; 
    width: 80%;
    z-index: -1;
    pointer-events: none;
}

.iconTransform{
    transform: translateY(0vw);
}

.downArrow{
    position: absolute;
    width: 5vw;
    height: 5vw;
    top: 49vw;
    left: 47.5vw;
}

/*
.scrollInit{
    opacity: 1;
    transform: translateY(0vw);
    transition-duration: 0.75s;
    transition-property: transform, opacity;
  
    &.scrollAnimate {
      opacity: 0;
      transform: translateY(5vw);
    }
  }
  */

.loadertext{
    position: absolute;
    text-align: center;
    width: 80vw;
    top: 30vh;
    left: 9vw;
    font-size: 3vw;
    transition-property: all;
    transition-duration: 0.5s;
    opacity: 0;
    transform: translateY(-2vh);
}

.loadertext2{
    position: absolute;
    text-align: center;
    width: 60vw;
    top: 68vh;
    left: 19vw;
    font-size: 1.5vw;
    transition-property: all;
    transition-duration: 0.5s;
    opacity: 0;
    transform: translateY(2vh);
}

.pointerevents{
    pointer-events: all;
}

.nopointerevents{
    pointer-events: none;
}

.hoverdarken:hover{
    filter: brightness(50%);
}

.hoverspaceout:hover{
    letter-spacing: 0.1vw;
}

.padding02vw{
    padding: 0.2vw;
}

[data-aos="out-down"]{
    opacity: 1;
    transform: translateY(0vw);
    transition-duration: 1.5s;
    transition-property: transform, opacity;
  
    &.aos-animate {
      opacity: 0;
      transform: translateY(2vw);
    }
}

.disabledswitch{
    background-color:#B00;
}

.disabledswitch:hover{
    background-color:#800;
}

#blackout {
    position: fixed;
    opacity: 0;
    width: 200vw;
    height: 200vh;
    left: 49.3%;
    top: 48.8%;
    transform: translateX(-50%) translateY(-50%);
    background-image: radial-gradient(circle at center, transparent, #000 10%);
    pointer-events: none;
    z-index: 9999;
  }

#blackout.showblackout{
    opacity: 1;
}

#hiddenvideo{
    opacity: 0;
}

#hiddenvideo.showblackout{
    opacity: 1;
}

.eastereggvideo{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.full{
    height: 79vh;
    padding-top: 15.5vh;
    position: relative;
    left: 20vw;
    width: 62vw;
    display: inline-grid;
    align-items: center;
    align-content: center;
}

.transitioneffects{
    transition-duration: 0.75s;
    transition-property: all;
}

.error{
    padding: 0vw 3vw 0vw 3vw;
}

.error:hover{
    padding: 0vw 0vw 0vw 0vw;
}