:root{
	--responsive_delay:.5s;
}

.double_dj_container{
	margin-top:100px;
	width:100%;
	height:20vw;
	display:flex;
	flex-direction: row;
	justify-content: center;

}
#first_about_title{
	line-height: 2vw;
}
#studio_video{
	width:50vw;
	min-height:30vw;
}

.fake_section_divider{
	height:1px;
	margin-top:12vw;
	width:1px;
	display:block
}

.double_dj_1{
	margin:10px;
	width:20vw;
	height:20vw;
}
.double_dj_2{
	margin:10px;
	width:20vw;
	height:20vw;
}

.double_dj_single{
	
	width:20vw;
	height:20vw;
}



#rarity_box{
	width:100%;
	display:flex;
	flex-direction: row;
	justify-content: center;
	height:20vw;
}

#rarity_image{
	width:20vw;
	height:20vw;
}

body{
	font-family: 'Orbitron';	
	/*background-color:#0c0c25;*/
	background-color: black;
	color:white;
	
}
.title_header{
	cursor:pointer;
	font-size:2vw;
    transition: color 1s linear;
}
.title_header:hover{
	font-size:2.2vw;
    color:#42B84A;
}
#title_upper_iconbar{
    width:100%;
    height:0px;
    top:2.2vw;color:white;
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    font-weight: bold;
    position:relative;
    overflow:visible;
}
#title_lower_textbar{
    width:100%;
    height:0px;
    top:41.8vw;
    color:white;
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    font-weight: bold;
    position:relative;
    overflow:visible;
}
#landing_image{
	width:100%;
	height:48vw;
}
#landing_image_mobile{
	width:100%;
	height:48vw;
	display:none;
}
#landing_page_container{
	width:100%;
	min-height:48vw;
	max-height:48vw;
	
}
#sub_landing_title{
    width:100%;height:120px;
    background-color:black;
    color:white;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size:3vw;
    font-weight: bold;
}
#sub_landing_nft{
	color:#42B84A;
	font-size:4vw;
}
#mobile_menu{
	display:none;

}
.about_more_djs_class{
	color:white;
	font-size:1vw;
	margin-top:0vw;
	background-color:rgba(61, 61, 61, 0.219);
	border-radius:1vw;
	line-height:1.5vw;
	padding:1vw;
	width:50%;
	display:flex;
	flex-direction:row;
}
#about_dj{
	color:white;
	font-size:1vw;
	margin-top:3vw;
	background-color:rgba(61, 61, 61, 0.219);
	border-radius:1vw;
	line-height:1.5vw;
	padding:1vw;
	width:50%;
	display:flex;
	flex-direction:row;
    margin-left:-15vw;
    opacity:0;
    transition: all var(--responsive_delay) ease-out;
}

#about_dj_description{
    font-size:1.2vw;
    line-height:2vw;
}
#about_songs{
	color:white;
	font-size:1vw;
	margin-top:3vw;
	background-color:rgba(61, 61, 61, 0.219);
	border-radius:1vw;
	line-height:1.5vw;
	padding:1vw;
	width:50%;
	display:flex;
	flex-direction:row;
    margin-left:15vw;
    opacity:0;
    transition: all var(--responsive_delay) ease-out;
}
#about_songs_description{
    font-size:1.2vw;
    line-height:2vw;
}
#about_section{
	display:flex;
	background-image:url("/assets/tile_4.png");
	background-position: center; /* Center the image */
  	background-repeat: no-repeat; /* Do not repeat the image */
 	background-size: cover; /* Resize the background image to cover the entire container */
	height:305vw;
}
#about_content{
	
	width:100%;
	height:305vw;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
}
.about_image{
    height:100%;
    max-height:16vw;
    margin-right:3vw;
    border-radius:1vw;
}
#rarity_section{
	background-image:url("/assets/tile_4.png");
	background-position: center; /* Center the image */
  	background-repeat: no-repeat; /* Do not repeat the image */
 	background-size: cover; /* Resize the background image to cover the entire container */
	height:50vw
}
#rarity_content{
	width:100%;
	height:50vw;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
}
#about_rarity{
	color:white;
	margin-left:10vw;
	margin-right:10vw;
	margin-top:3vw;
	width:80vw;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items: center;
	
}
#rarity_img_container{
	min-width:35vw;
	max-height:35vw;
	margin-right:3vw;
}
#rarity_description{
    font-size:1.4vw;
    line-height:2.2vw;
}
#rarity_description_container{
	opacity:0;
	margin-bottom:-15vw; /* -55vw offscreen*/
    
	transition: margin-bottom var(--responsive_delay) ease-out,opacity var(--responsive_delay) linear;
}
#rarity_img{
	width: 100%;
	height:100%;
	opacity:0;
    z-index:3;
	margin-left:-15vw; /* -55vw offscreen*/
	transition: margin-left var(--responsive_delay) ease-out,opacity var(--responsive_delay) linear;
	
}
.green_heading_title{
	font-size:2.2vw;
	color:#42B84A;
	font-weight:bold;
	margin-bottom:1vw;
	line-height: 2vw;
}
.green_section_title{
	font-size:4vw;
	color:#42B84A;
	font-weight:bold;
	margin-bottom:2vw;
}
#royalty_section{
	background-image:url("/assets/tile_4.png");
	background-position: center; /* Center the image */
  	background-repeat: no-repeat; /* Do not repeat the image */
 	background-size: cover; /* Resize the background image to cover the entire container */
	height:50vw

}
#royalty_content{
	width:100%;
	height:100%;;
	display:flex;
	justify-content:center;
	align-items:flex-start;
	flex-direction:column;
}
#royalty_grid{
	display:flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	width:100%;
	height:20vw;
}
#royalty_item_grid{
	min-width:60vw;
	max-width:60vw;
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	justify-content: center;
	align-items: center;
	opacity:0;
	margin-bottom:-15vw; /* -55vw offscreen*/
	transition: margin-bottom var(--responsive_delay) ease-out,opacity var(--responsive_delay) linear;

}
#royalty_title{
    margin-left:0vw; /*10vw normally*/
    opacity:0;
    transition: margin-left var(--responsive_delay) ease-out,opacity var(--responsive_delay) linear;
}
.royalty_item{
	background-color:rgba(37, 13, 30, 0.678);
	width:18vw;
	height:5vw;
	margin:2vw;
	border-radius:2.5vw;
	display:flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	font-size:1vw;
	-webkit-transition: background-color 1s linear;
    -ms-transition: background-color 1s linear;
    transition: background-color 1s linear;
}
.royalty_item:hover{
	background: rgba(243, 191, 20, 0.521);
}
#royalty_disclaimer{
	width:30vw;
	line-height:1.5vw;
	font-size:1vw;
	color:rgba(252, 252, 252, 0.692);
	
}
#royalty_disclaimer_text{
	width:30vw;
	opacity:0;
	margin-left:9vw; /* -55vw offscreen*/
	transition: margin-left var(--responsive_delay) ease-out,opacity var(--responsive_delay) linear;
}
.royalty_item_img{
	border-radius:2.25vw;
	width:4.5vw;
	height:4.5vw;
	margin-left:.25vw;
}

#story_section{
   /* background-image:url("/assets/tile_4.png"); /*tile 8*/
	background-position: center; /* Center the image */
  	background-repeat: no-repeat; /* Do not repeat the image */
 	background-size: cover; /* Resize the background image to cover the entire container */
	height:150vw
}
#story_content{
	height:50vw;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	width:30%;
	margin-left:35%;
	text-align:center;
	font-size:1.5vw;
}
#lore_title{
	font-size:3vw;
	font-weight:bold;
	width:100%;
	text-align:center;
}
#lore_description{
    height:30vw;
    text-align:left;
    width:100%;
}

#roadmap_section{
	background-image:url("/assets/tile_4.png"); /*tile 8*/
	background-position: center; /* Center the image */
  	background-repeat: no-repeat; /* Do not repeat the image */
 	background-size: cover; /* Resize the background image to cover the entire container */
	height:180vw
}
#roadmap_content{
	width:100%;
	height:180vw;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
    font-size:2vw;
}
.roadmap_item{
	width:25vw;
	height:10vw;
	background-color:rgba(140,140,140,.6);
	border-radius:2vw;
	display:flex;
	justify-content: center;
	align-items: center;
	font-size:1.2vw;
	
}
.roadmap_bordered{
	max-width:800px;
    padding:1vw;
    outline-width: 2px;
    outline-color: rgba(128, 128, 128, 0.411);
    outline-style:solid;
    text-align:center;
    margin-top:0vw;
    background:linear-gradient(359deg, rgba(20, 20, 20, 0.85) 0%, rgba(20, 20, 20, 0.47) 100%);
}
.release_box{
    
    
    color:#d333cb;
    font-size:3vw;
    font-weight:bold;
    text-align:center;

}
.roadmap_line_1{
	width:25vw;
	height:2px;
	background-color:gray
}

.roadmap_line_2{
	width:4px;
	height:8vw;
	background-color:gray;
	margin-bottom:2px;
}

.roadmap_line_3{
	width:4px;
	height:4vw;
	background-color:gray; 
	margin-bottom:2px;
}

.roadmap_line_4{
	width:4px;
	height:10vw;
	background-color:gray;
	margin-bottom:2px;
}

.roadmap_line_5{
	width:4px;
	height:15vw;
	background-color:gray;
	margin-bottom:2px;
}


.roadmap_line_6{
	width:4px;
	height:15vw;
	background-color:gray;
	margin-bottom:2px;
}

.roadmap_line_7{
	width:4px;
	height:15vw;
	background-color:gray;
	margin-bottom:2px;
}


#team_section{

background-image:url("/assets/tile_4.png");
background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
 background-size: cover; /* Resize the background image to cover the entire container */
height:70vw
}

#team_content{
width:100%;
height:70vw;

display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}
.team_member{
	position: relative;
color:white;
z-index:10;
/*background: rgba(43,25,47,.8);*/
background: rgba(243, 191, 20, 0.521);
border-radius:10px;
margin:2vw;
margin-top:1vw;
margin-bottom:0;
width:15vw;
opacity:0;
-webkit-transition: background-color 1s linear;
    -ms-transition: background-color 1s linear;
    transition: background-color 1s linear,margin-left .5s ease-out, opacity .5s linear;
}
.team_member:hover{
	background: rgba(243, 191, 20, 0.521);
}
.team_member_cooldown{
    background: rgba(43,25,47,.8);
}
.team_member_img{
width:90%;
margin:5%;
border-radius:5px;
}
.team_member_name{
text-align:center;
font-weight:bold;
margin:10px;
font-size:1.4vw;
color:#42B84A;
}
.team_member_title{
text-align:center;
margin:10px;
margin-bottom:20px;
font-size:1vw;
}
.team_section_row{
width:100%;
display:flex;

flex-direction:row;
justify-content:center;
align-items:center;
}
#footer_section{
	height:100px;
	display:flex;
	justify-content: space-between;
	align-items:center;
	color:#A199A2;
	background-color: black;
	font-size:1.1vw;
}
#footer_section_mobile{
	height:100px;
	display:flex;
	justify-content: space-between;
	align-items:center;
	color:#A199A2;
	background-color: black;
	font-size:1.1vw;
	display:none;
}
#footer_left{
	display:flex;
	flex-direction:row;
	width:500px;
	
}
.footer_social_link{
	margin-left:20px;
}
#footer_right{
	display:flex;
	flex-direction:row;
	justify-content:flex-end;
	width:500px;
}
.footer_link{
	color:#A199A2;
	margin-right:20px;
}
#screen{
	/*scroll-snap-type: y proximity;
	scroll-snap-stop: normal;*/
	width:100%;
	height:100%;
	overflow-y:scroll;
    overflow-x:hidden;
	-ms-overflow-style: none;  /* IE and Edge */
 	 scrollbar-width: none;  /* Firefox */
}
.scroll_none{
	scroll-snap-type: none !important; 
}
#screen::-webkit-scrollbar {
  display: none;
}
#screen .snappable{
	scroll-snap-align: start;
}
#screen .snappable_center{
	scroll-snap-align: center;
}
.dynamic_light_container{
    max-height:0px;
    max-width:0px;
    overflow:visible;
    z-index:1;
    transition: all var(--responsive_delay) ease-out;
}
.fade_sloooow{
    transition: all 10s ease-out;
}

.dynamic_light{
    height:40vw;
    width:40vw;
    background:radial-gradient(circle at 50% 50%, rgba(55, 255, 0, 0.21) 0%, rgba(88, 151, 82, 0) 72%);
}

.green_light{
    background:radial-gradient(circle at 50% 50%, rgba(55, 255, 0, 0.21) 0%, rgba(88, 151, 82, 0) 72%);
}


.purple_light{
    background:radial-gradient(circle at 50% 50%, rgba(247, 0, 255, 0.21) 0%, rgba(88, 151, 82, 0) 72%);
}
.faded{
    opacity:0;
}

.social_icon{
    width:3vw;
    height:3vw;
    border-radius:1.5vw;
    background-color:#181616;
    transition: background-color 1s linear;
    cursor:pointer;
}

.social_icon:hover{
    background-color:rgb(197, 155, 18);
}

.ml-10vw{
	margin-left:10vw;
}