/************************************************************************/
/************************************************************************/

/***************              PAGE SETTINGS             *****************/

/************************************************************************/
/************************************************************************/



@font-face {
    font-family: 'Android', Roboto;
    src: url(android-webfont.woff);
    
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;

}

:root{
    box-sizing: border-box;  
    font-family: 'Manrope', Oswald;
    /*background: #000; linear-gradient(109.6deg, rgba(0, 0, 0, 0.93) 11.2%, rgb(63, 61, 61) 78.9%);*/
    --background-color: black;
    --text-color: white;
    --wedge-color: #1c1b1b;
    --box-color: rgba(000,0,0,0.5);
    --drop-down: rgba(000,0,0,0.5);
    --drop-down-sm: rgba(000,0,0,0.7);


    --color-primary: #ab79d6;
    --color-on-primary: #351d4a;
    --color-secondary: #d367c1;
    --color-background: #27272c;
    --color-gray: #8e8e8e;
    --color-yellow: #dedf40;
    --color-green: #62cb5c;
    --color-blue: #00bbcb;
    --color-on-blue: #004a09;
    --gradient: var(--color-secondary) 10%,var(--color-yellow) 25%,var(--color-green) 50%,var(--color-blue) 75%,var(--color-primary) 90%;

}


.dark-theme{
    --background-color: white;
    --text-color: black;
    --wedge-color: #e3e4e4;
    --box-color: rgba(255,255,255,0.5);
    --drop-down: rgba(255,255,255,0.5);
    --drop-down-sm: rgba(255,255,255,0.7);
}


*::before,
*::after {
	/*box-sizing: inherit;*/
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}


blockquote,body { /*taking this away added marging to the page*/
    margin: 0
}

body{
    overflow-x: hidden;
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* Set a minimum height for the body */
	background: var(--background-color);
    color: var(--text-color);

    border-image: linear-gradient(to right,var(--gradient)) 1;
    border-style: solid;
    border-width: .4rem 0 0;

}

.nav{
	background-color: transparent;
	color: var( --text-color);
	display: inline-flex; /*keeps icon aligned with text*/
	align-items: center; 
	justify-content: center;
	font-size: clamp(1em, .7vw + 1rem, 1.3vw);
	padding: .1em .5em .1em .5em;
	width: auto; /*keeps text from overflowing box*/
	text-decoration: none;


}

.nav:hover,
.nav:focus-visible{
    color: #0FFB19;

}

.nav-member:hover,
.nav-member:focus-visible{
    color: #0FFB19;

}

.nav-member{
    background-color: transparent;
    color: var( --text-color);
    display: inline-flex; /*keeps icon aligned with text*/
    align-items: firstbaseline; 
    justify-content: center;
    font-size: clamp(1em, .6vw + 1rem, 1.1vw);
    padding: .1em .5em .1em .5em;
    width: auto; /*keeps text from overflowing box*/
    text-decoration: none;
    gap: 10px;

}

.nav img{
	width:clamp(1.5em, 1vw + 1rem, 2vw);
	margin-right: 10px;
	justify-content: flex-start;

}



#createImg{
	width: 25%;
}

#loginImg{
	width: 25%;


}

/************************************************************************/
/************************************************************************/

/***************                 HEADER                 *****************/

/************************************************************************/
/************************************************************************/



.header{
	background-color: transparent;
	position: relative; /* Keep the footer at the bottom */
    padding: 0 2vw 0 10vw;
    margin-top: auto; /* Push the footer to the bottom */
	display: flex;
	flex-wrap: wrap; /* Allows items to wrap in small screens */
	align-items: center;
	justify-content: space-between;
    font-size: clamp(12px, 2vw, 16px); /* Adjusts between 12px and 16px based on the viewport width */
    display: flex; /* Using Flexbox */
    gap: 5px;

} 

.nav-top{
	background-color: transparent;
	display: flex;
	justify-content: space-evenly; 
	flex: 1 1 auto; /* Adjusts to allow wrapping inside header and footer */

}

.logo-container{
	background: transparent;
	display: inline-flex;
	flex-wrap: wrap;
	white-space: nowrap;
    order: 1;
	
}

.hidden-container{
	display: none;
	background: transparent;
	padding: 0;
	display: inline-flex;
	flex-wrap: wrap;
	white-space: nowrap;
    order: 4;

}

.member-container{
	background: transparent;
	padding: 0;
	display: inline-flex;
	flex-wrap: wrap;
	white-space: nowrap;
    order: 2;

}

.nav-buttons-container{
	background: transparent;
	padding: 0;
	display: inline-flex;
	flex-wrap: wrap;
	white-space: nowrap;
    order: 3;
   

}

#hide{
	display: none;
}


/************************************************************************/
/************************************************************************/

/***************             COUNTRY MENU               *****************/

/************************************************************************/
/************************************************************************/


.dropdown img {
  width: 20px;
  margin-right: 10px;
}

#flag img{
  width: 20px;


}

.dropbtn {
  background-color: transparent;
  color: var(--text-color);
  padding: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 200px;
  margin-top: 9px;
}

.text{
    font-size: 14px; 

}

.country-text{
    font-size: 15px; 


}

.dropbtn::after {
  /*content: "▼";*/
  content: "❯";
  transform: rotate(90deg);
  color: #0FFB19;
  font-size: 17px; 
  margin-left: 2px;
  margin-right: 23px;
  order: 3;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var( --drop-down);
  width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  overflow-y: auto;
  max-height: 200px;
}

.item {
  color: var(--text-color);
  padding: 12px 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.item:hover {
  background-color: #0FFB19;
}

.dropdown-content::-webkit-scrollbar {
  width: 5px;
}

.dropdown-content::-webkit-scrollbar-track {
  background: transparent;
}

.dropdown-content::-webkit-scrollbar-thumb {
  background: var(--text-color);
}

.dropbtn .flag {
  order: 1;
  margin-left: auto;
}

.dropbtn .country-text {
  order: 2;
  flex-grow: 1;
  text-align: left;
}


/************************************************************************/
/************************************************************************/

/***************               OWN TOKEN                *****************/

/************************************************************************/
/************************************************************************/



.own-btn{
    margin: .7em 1em 1em 1em; 
    background: var(--text-color);
    color: var(--background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width:150px;
    height: 40px;
    border-radius: 20px;
    cursor: pointer;
    transform: scale(1);
    transition: transform 1000ms;
}

.own-btn:hover,
.own-btn:focus {
   /* transform: translateY(.35rem);*/
    transition: transform 150ms;
    transform: scale(1.1);
    background-color: #0FFB19;
    color: white;

}

/************************************************************************/
/************************************************************************/

/***************               DARK MODE                *****************/

/************************************************************************/
/************************************************************************/


.nav-buttons-container{
    display: flex;
    gap: -1px;

}

.toggle-btn{
    margin: .7em 1em 1em 1em; 
    background: var(--text-color);
    color: var(--background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    cursor: pointer;
  

}
.toggle-btn img{
    margin-top: .4em .4em .4em .4em;
    width: 25px;
    margin-right: 0;
    
}


/************************************************************************/
/************************************************************************/

/***************                 MAIN                   *****************/

/************************************************************************/
/************************************************************************/



main {
    flex-grow: 1; /* Allows main content to grow and push the footer down */
    /* Ensure there is no fixed height that prevents expansion */
    margin-bottom: 0;

}


.box {
	display: flex;
    /*border: 1px solid white;*/
	flex-direction: column;
	flex-wrap: wrap;
    background-color: transparent;
    width: 50vw;
    margin: 6rem 2rem -18rem 2rem;
    z-index: 1;
    margin-left: clamp(10vw, 5vw, 100vw);
    padding: 1rem 1rem 1rem 1rem;
    /*width: clamp(75vw, 40vw + 5rem, 70vw);*/
    /*height: clamp(30vh, 60vh + 5rem, 90vh);*//* Remove the height constraint to allow box to grow based on content */
   
}


/************************************************************************/
/************************************************************************/

/***************               EQUATION                 *****************/

/************************************************************************/
/************************************************************************/


.box h1{
	font-size: clamp(.1vw, 4.1vw + .6em, 5em);  /***************************************/
	white-space: nowrap;


}

.h3-container h3 {
    position: relative; /* Establishes a new positioning context */
    display: inline-flex; /* Keeps text and images inline */
    align-items: center;

}

.box h3{
	font-size: clamp(.43em, 2.6vw, 2.9em); /***************************************/
	font-weight: 100;
	padding: 5px;


}


.image-wrapper {
    position: relative; /* Needed if the images themselves are positioned absolutely */
    display: inline-block; /* Treat the wrapper inline with text */
    width: 190px; /* Or the actual width of your images */
    height: auto; /* Adjust based on your images */

}

.first-img, .second-img {
    position: absolute;
    margin-top: clamp(-2.5em, -4.6vw + 3.5em, -4.5em);
    left: 10px; /* Adjusted to keep the image close to the text */
    width: clamp(5em, 4.6vw + 2em, 10em); /***************************************/ /* Adjust as necessary */

    transition: opacity 0.5s ease; /* Smooth transition for the hover effect */
}

/* Initial state for the first image */
.first-img {
    opacity: 0; /* Start as invisible */
    visibility: hidden;
    transition: visibility 0s linear 2s, opacity 2s linear; /* Adjust if necessary */
}

/* Initial state for the second image */
.second-img {
    opacity: 0;
    visibility: hidden; /* Initially hidden */
    transition: opacity 4s, visibility 0s linear 4s; /* Extend disappearance duration */
}

/* Hover effect for .h1-container affecting second image */
.h3-container:hover .second-img {
    opacity: 1;
    visibility: visible; /* Become fully visible on hover */
    transform: scale(1.2);
    transition: opacity 2s, visibility 0s linear 0s; /* Immediate visibility change on hover */
}

/* Hover effect for .h1-container affecting first image */
.h3-container:hover .first-img {
    opacity: 0; /* Remains invisible during hover over the container */
    visibility: hidden;
    transition: visibility 0s, opacity 0s; /* Immediate response */
}

/* Adjustments to ensure first image reappears correctly */
.h3-container:not(:hover) .first-img {
    opacity: 1; /* Fully visible when not hovering */
    visibility: visible;
    transition: opacity 2s linear 0.05s, visibility 0s linear 0.05s; /* Delayed visibility and opacity change */

}




/************************************************************************/
/************************************************************************/

/***************             BODY BUTTONS               *****************/

/************************************************************************/
/************************************************************************/


#docs{
    margin-right: 2em;
    /*background-color: #262626;*/

}

/*****   MAIN SLANTED EDGE BUTTON CODE   *****/ 

/* Define custom properties for reusability */
button { 
  --background: var( --background-color); 
  --border: 1px; /* Defines a custom CSS variable for border size */
  --slant: 0.7em; /* Defines a custom CSS variable for slant size */
  --color: var( --text-color); /* Defines a custom CSS variable for color  #06FF3D */

/* Button styling */
  font-size: clamp(.1em, 2vh, 3em);/* Sets the font size of the button */
  width: clamp(10em, 14.2vw + 3em, 22.7em); /* Sets the minimum width of the button */
  height: clamp(2em, 6vh, 4em);
  white-space: nowrap;
  padding: .7em 3em; /* Sets the padding of the button */
  border: none; /* Removes the border of the button */
  cursor: pointer; /* Changes the cursor to a pointer on hover */
  font-weight: 100; /* Sets the font weight of the button to thin/lighter */
  color: var(--color); /* Sets the text color using a custom CSS variable */

 /* Background styling with linear gradients */
  background:
     linear-gradient(to bottom left,var(--color) 50%,#0000 50.1%) top right,
     linear-gradient(to top right,var(--color) 50%,#0000 50.1%) bottom left;
     /* Creates a background gradient using two linear gradients */
  
/* Set background size based on slant and border values */
  background-size: calc(var(--slant) + (1.3 * var(--border))) calc(var(--slant) + (1.3 * var(--border)));
   /* Sets the size of the background image based on calculated values */
  
  background-repeat: no-repeat; /* Prevents repeating of background image */

 /* Apply box shadow for visual effects */
  box-shadow:
    0 0 0 200px inset var(--s,#0000),
    0 0 0 var(--border) inset var(--color); /*border color*/
     /* Applies box shadow with an inset effect and uses custom CSS variables for color and shadow size */

/* Apply clip-path for slanted border effect */
clip-path:
    polygon(0 0, calc(100% - var(--slant)) 0, 100% var(--slant),
            100% 100%, var(--slant) 100%, 0 calc(100% - var(--slant))
             );
   /* Defines a custom clip path shape for the button */

/* Set transition effects for color and background-size */
  transition: color var(--t, 0.3s), background-size 0.3s;
   /* Sets the transition effect for color and background-size properties */
}

/* Styling for button when focused and visible */
button:focus-visible {
   outline-offset: calc(-1 * var(--border));
   outline: var(--border) solid #000c;
   clip-path: none;
   background-size: 0 0;
}
/* Defines styles when the button is in focus-visible state */

/* Styling for button on hover and when active */
button:hover,
button:active {
   background-size: 100% 100%;
   color: var(--background-color); /*text color change color*/
   --t: 0.2s 0.1s; /* Adjust transition timing */
}
/* Defines styles when the button is hovered or active */

/* Styling for button when actively clicked */
button:active {
   --s: #0005; /* Adjust inset shadow color */
   transition: none; /* Remove transition effect */
}
/* Defines styles when the button is active */

/* Apply margin to the second button when it follows another button */
button+button {
    margin: 2rem 0rem 0rem 0rem; /*space beetween buttons*/
}
/* Applies margin to adjacent buttons */

}




/************************************************************************/
/************************************************************************/

/***************             SOCIAL MEDIA               *****************/

/************************************************************************/
/************************************************************************/



.social-media-container {
    display: flex;
    justify-content: center; /* Center the container */

}

.social-media {
    display: flex; /* Enables flex display */
    flex-direction: row-reverse; /* Aligns items from right to left */
    justify-content: flex-start; /* Starts alignment from the right side */
    flex-wrap: wrap;
    list-style-type: none; /* Removes bullet points */
    padding: 0; /* Removes default padding */
    align-items: left;   
    justify-content: left; 
    margin: 3em 2em 2em -.5em;
    row-gap: 10px;   
}

.social img {
    width: clamp(2em, 1.2vw + 1em, 3em);  /* 35px; Adjusts the width of the icons */
    height: clamp(2em, 1.2vw + 1em, 3em); 
    margin: 0 10px; /* Adds spacing between icons */
    transition: transform 200ms; /* Smoothens the hover effect */ 
   
   
}

.social:hover img {
    transform: scale(1.2); /* Enlarges icons on hover */
     
}




/************************************************************************/
/************************************************************************/

/***************        SOCIAL MEDIA - HOVER            *****************/

/************************************************************************/
/************************************************************************/

 

.social-media img:hover{
    opacity: 100%;
    height: clamp(1.3em, 1.3vw + 1.3em, 3.3em);
    width: clamp(1.3em, 1.3vw + 1.3em, 3.3em);

}
.social.twitter:hover img {
  content: url('img/twitter_green.svg'); 
}
.social.tumblr:hover img {
  content: url('img/tumblr_green.svg'); 
}
.social.tiktok:hover img {
  content: url('img/tiktok_green.svg'); 
}
.social.instagram:hover img {
  content: url('img/instagram_green.svg'); 
}
.social.pinterest:hover img {
  content: url('img/pinterest_green.svg'); 
}
.social.linkedin:hover img {
  content: url('img/linkedin_green.svg'); 
}
.social.reddit:hover img {
  content: url('img/reddit_green.svg'); 
}
.social.wubits:hover img {
  content: url('img/wubits_green.svg'); 
}
.social.github:hover img {
  content: url('img/github_green.svg'); 
}
.social.telegram:hover img {
  content: url('img/telegram_green.svg'); 
}

/************************************************************************/
/************************************************************************/

/***************                PRESALE                 *****************/

/************************************************************************/
/************************************************************************/


.presale {
    margin-top: 20px;
    max-width: 340px;
    font-weight: 100;
    line-height: 1.5em;
    margin-bottom: 14px;
    background-color: none;
    padding-top: .1em;
    padding-bottom: .1em;
    padding-left: .1;
    padding-right: .9em;

       
}

.presaleText{
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    color: var(--text-color);
    

}

.whitelist {
    color: var(--text-color);
    text-decoration: none;
    font-size: 16px;
    margin-bottom: 5px;
    display: block; 
    padding: 10px 10px 10px 0;
    transition: transform 1000ms;
}

.whitelist:hover {
    transform: translateY(-0.25rem);
    transition: transform 250ms;
    /*background-color: #0FFB19;*/
    color: #0FFB19;
    border-image: linear-gradient(to right,var(--gradient)) 1;
    border-style: solid;
    border-width: .2rem 0 0 0;
    border-radius: 5px;


}

/************************************************************************/
/************************************************************************/

/***************                 FOOTER                 *****************/

/************************************************************************/
/************************************************************************/


.footer {
	background-color: var( --background-color);
	position: relative; /* position: relative; Keep the footer at the bottom */
    padding: 0 10vw 0 10vw;
    margin-top: auto; /* Push the footer to the bottom */
	display: flex;
	flex-wrap: wrap; /* Allows items to wrap in small screens */
	align-items: center;
	justify-content: space-evenly;
    font-size: clamp(12px, 2vw, 16px); /* Adjusts between 12px and 16px based on the viewport width */
    display: flex; /* Using Flexbox */
    gap: 5px;
	

}

.nav-bottom{
	background-color: transparent;
	display: flex;
	align-items: center; /*puts icon and logo center up and down in div*/
	justify-content: start; 
	padding: .5em;
	margin-top: .5em;
	flex: 1 1 auto; /* Adjusts to allow wrapping inside header and footer */
    transition: transform 1000ms;
}


.footerbar-container{
	background: transparent;
	flex: 1; /*stretched the nav*/
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: space-evenly; 
	white-space: nowrap;

}

.copyright-container{
	background: transparent;
	padding: 5px;
	display: inline-flex;
	flex-wrap: wrap;
	white-space: nowrap;

}

#copyright{
    font-size: 10px;
    white-space: wrap;
}

#copyright img{
    width: 5%;
}


/************************************************************************/
/************************************************************************/

/***************                  WEDGE                 *****************/

/************************************************************************/
/************************************************************************/


.wedge {
	background: var( --wedge-color);
    /* Modify this to suit your design, but ensure it's flexible */
    position: relative; /* Change from fixed/absolute to relative if necessary */
    /* Other styling for the wedge */
    margin: 2rem 0 0 0;
    bottom: 0;
    height: 300px;
    clip-path: polygon(100% 34%, 100% 100%,0%100%,0%75%);
    z-index: -1;
    flex-shrink: 0;
    margin-bottom: -110px;
    border-image: linear-gradient(to right,var(--gradient)) 1;
    border-style: solid;
    border-width: 0 0 1rem 0;

}

/************************************************************************/
/************************************************************************/

/***************                 NFT NAV                *****************/

/************************************************************************/
/************************************************************************/


.section {
    display: flex;
    align-items: center;
    justify-content: right;
    margin-right: 130px;
    height: 100px; /* Adjust height as needed */

}

.nftbar-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    margin-bottom: 60px;

}

.nftbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 10px;


}

.own-nft {
    background-color: var(--text-color);
    color: var(--background-color);
    border: 0;
    width: 150px;
    border-radius: 3px;
    padding: 10px 20px; /* Adjust padding as needed for your design */
    font-size: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: scale(1);
    transition: transform 1000ms;
  

}

a {
    text-decoration: none;
}

.price {
    margin-left: 20px; /* Adjust spacing as needed */
    font-size: 14px;
    color: var(--text-color);
    white-space: nowrap;
}



@media screen and (min-width: 50px) and (max-width: 146px){
    .price{
        font-size: 10px;

    }

}


.price:hover,
.price:focus-visible{
    color: #0FFB19;

}

.own-nft:hover,
.own-nft:focus-visible{
    /*transform: translateY(-0.45rem);*/
    transform: scale(1.1);
    color: white;
    transition: transform 150ms;
    transform: scale(1.1);
    background-color: #0FFB19;
    color: white;
  

}

	/*flex: 1; *//*stretched the nav*/
	

/*.nav-nft{
	background-color: yellow;
	display: flex;
	justify-content: space-evenly; 
	align-items: center;
	padding: .5em;
	margin: .5em;
	flex: 1 1 auto; 


}*/

/************************************************************************/
/************************************************************************/

/***************             PORTAL IMAGE               *****************/

/************************************************************************/
/************************************************************************/


.portal-image {
  display: flex;
  width: 1200px;
  height: 1200px;
  position: fixed;
  right: -37em;
  top: -4.4em;
  z-index: -3;
}



/************************************************************************/
/************************************************************************/

/***************           COMMANDER IMAGE              *****************/

/************************************************************************/
/************************************************************************/


.images{
  position: absolute;
  right: 110px;
  top: clamp(30vh, 70vh + 3em, 38vh); 
  /*top: 280px;*/
  max-width: 100%;
  height: auto; 
  z-index: -2;

}

.man img{
  float: left;
  /*height: 480px;*/
  height: clamp(5vh, 45vh + 6em, 90vh);
  /*position: absolute;
  right: 190px;
  top: 380px;*/
  background-color: none;
  animation: move 1s linear infinite alternate-reverse;
  margin: 0;

  
}

@keyframes move{
  100%{
      margin-left: 40px;
      margin-top: 20px;
      /*opacity: 0.3;*/
  }

}




/************************************************************************/
/************************************************************************/

/***************                MEDIA                 *****************/

/************************************************************************/
/************************************************************************/

@media screen and (min-width: 50px) and (max-width: 700px){
	.portal-image{
		display: none;
	}

	#logoImg{
		display: none;
	}

	.dropdown{
		display: none;
	}
	#equation{
		display: none;
	}
}




	
	

	

/************************** 50-146 **********************************/


@media screen and (min-width: 30px) and (max-width: 149px){
    
    .header{
    padding: 10px 2vw 0 10vw;
    } 

    .nav-buttons-container{ /* own token button container */
    display: flex;
    gap: -1px;
    }

    .own-btn{
    margin: .7em 1em 1em 1em; 
    align-items: center;
    justify-content: center;
    width: 85px;
    height: 30px;
    border-radius: 20px;
    }

    #create img{ /* icon for create account */
    display: none;
    }

    .toggle-btn{ /* dark mode circle button */
    margin: .7em 1em 1em 1em; 
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    }

    .toggle-btn img{ /* dark mode cicle image */
    margin-top: .4em .4em .4em .4em;
    width: 18px;
    }

    .dropdown-content{ /* country drop down */
    background-color: var( --drop-down-sm);
    }

    .dropdown{ /* country drop down */
        margin-top: -20px;
    }

    .dropdown-content, .dropdown, .dropbtn{ /* country drop down */
    width: auto;
    }

    .country-text{ /* country drop down */
    display: none;
    }

    .text{ /* country drop down */
    display: none;
    }

    .box{ /* body content box container */
    width: 90vw;
    margin: 0 2rem -8rem 0;
    /*background: var( --drop-down);*/
    }
    
    h1{ /* Web3 Multiverse */
    font-size: 9vw !important;
    font-weight: 900;
    margin-bottom: -20px;
    }

    h3{ /* Innovating the */
    font-size: 8vw !important;
    font-weight: 700;
    white-space: nowrap;
    margin: -5px;
    }

    h3 img{ /* equation img */
    display: none;
    }

    button{ /* documents & team buttons */
    font-size: 10px;
    width: 70vw;
    }

    .social-media-container{ /* social media icons */
    max-width: 140px;
    margin-left: 6px;
    margin-top: -70px;
    }

    .social:hover img{ /* social media icons */
    height: clamp(1.3em, 1.3vw + 1.3em, 3.3em);
    width: clamp(1.3em, 1.3vw + 1.3em, 3.3em);
    }  

    .social:hover img{ /* social media icons */
    transform: scale(1.6); 
    }

    .presale{ /* presale text */
        width: 70vw;
        margin-top: -20px;
    }

    .compress{ /* browser site link */
    height: 20px;
    width: 100px;
    background-color: blue;
    margin-bottom: -200px;
    margin-top: -30px;
    }

    .section{ /* nft bar container */
    justify-content: left;
    margin-top: -200px;
    }

    .own-nft{ /* own nft button */
    margin-left: 15px;
    width: 90px;
    border-radius: 3px;
    padding: 10px 20px;
    font-size: 12px;
    }

   .price{ /* own nft price */
    font-size: 9px;
    }

    .footer{ /* footer container */
        margin-top: -30px;
    }

    .portal-image{ /* portal image */
    width: 800px;
    height: 800px;
    right: -37em;
    top: 4em;
    }

    .images{
    right: 130px;
    }

    .man img{ /* commander image */
    height: 35vh;
    justify-content: right;
    margin-right: -140px;
    }

     /* position placement in header */
    .logo-container{
    order: 1;
    }

    .hidden-container{
    order: 4;
    }

    .member-container{
    order:2;
    }

    .nav-buttons-container{
    order: 3;
    }

}


/************************** 147 - 183 **********************************/


@media screen and (min-width: 147px) and (max-width: 183px){

    .header{
    padding: 10px 2vw 0 10vw;
    } 

    .nav-buttons-container{ /* own token button container */
    display: flex;
    gap: -1px;
    }

    .own-btn{
    margin: .7em 1em 1em 1em; 
    align-items: center;
    justify-content: center;
    width: 85px;
    height: 30px;
    border-radius: 20px;
    margin-left: 25px;
    }

    #create img{ /* icon for create account */
    display: none;
    }

    .toggle-btn{ /* dark mode circle button */
    margin: -.2em 1em 1em 1em; 
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    }

    .toggle-btn img{ /* dark mode cicle image */
    margin-top: .4em .4em .4em .4em;
    width: 18px;
    }

    .dropdown-content{ /* country drop down */
    background-color: var( --drop-down-sm);
    }

    .dropdown{ /* country drop down */
        margin-top: -20px;
    }

    .dropdown-content, .dropdown, .dropbtn{ /* country drop down */
    width: auto;
    }

    .country-text{ /* country drop down */
    display: none;
    }

    .text{ /* country drop down */
    display: none;
    }

    .box{ /* body content box container */
    width: 90vw;
    margin: 0 2rem -5rem 0;
    /*background: var( --drop-down);*/
    margin-bottom: 0;
    }
    
    h1{ /* Web3 Multiverse */
    font-size: 9vw !important;
    font-weight: 900;
    margin-bottom: -20px;
    }

    h3{ /* Innovating the */
    font-size: 8vw !important;
    font-weight: 700;
    white-space: nowrap;
    margin: -5px;
    }

    h3 img{ /* equation img */
    display: none;
    }

    button{ /* documents & team buttons */
    font-size: 10px;
    width: 70vw;
    }

    .social-media-container{ /* social media icons */
    max-width: 140px;
    margin-left: 21px;
    margin-top: -70px;
    }

    .social:hover img{ /* social media icons */
    height: clamp(1.3em, 1.3vw + 1.3em, 3.3em);
    width: clamp(1.3em, 1.3vw + 1.3em, 3.3em);
    }  

    .social:hover img{ /* social media icons */
    transform: scale(1.6); 
    }

    .presale{ /* presale text */
        width: 70vw;
        margin-top: -20px; 
    }

    .whitelist{
        margin-bottom: 200px;
    }

    .compress{ /* browser site link */
    height: 20px;
    width: 100px;
    background-color: blue;
    margin-bottom: -200px;
    margin-top: -30px;
    }

    .section{ /* nft bar container */
    justify-content: left;
    margin-top: -200px;
    }

    .own-nft{ /* own nft button */
    margin-left: 35px;
    width: 90px;
    border-radius: 3px;
    padding: 10px 20px;
    font-size: 12px;
    }

   .price{ /* own nft price */
    font-size: 9px;
    margin-left: 38px;
    }

    .footer{ /* footer container */
    margin-top: -30px;

    }

    .footerbar-container{
    margin-left: 22px;
    }

    .portal-image{ /* portal image */
    width: 800px;
    height: 800px;
    right: -37em;
    top: 4em;
    }

    .images{
    right: 70px;
    }

    .man img{ /* commander image */
    height: 43vh;
    justify-content: right;
    margin-right: -80px;
    }

     /* position placement in header */
    .logo-container{
    order: 1;
    }

    .hidden-container{
    order: 4;
    }

    .member-container{
    order:2;
    }

    .nav-buttons-container{
    order: 3;
    }

}

/************************** 184 - 295 **********************************/

@media screen and (min-width: 184px) and (max-width: 295px){

    .header{
    padding: 10px 2vw 0 10vw;
    align-items: center;
    justify-content: center;
    } 

    .nav-buttons-container{ /* own token button container */
    display: flex;
    gap: -1px;
    }

    .own-btn{
    margin: .7em 1em 1em 1em; 
    align-items: center;
    justify-content: center;
    width: 85px;
    height: 30px;
    border-radius: 20px;
    
    }

    #create img{ /* icon for create account */
    display: none;
    }

    .toggle-btn{ /* dark mode circle button */
    margin: -.2em 1em 1em 1em; 
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    }

    .toggle-btn img{ /* dark mode cicle image */
    margin-top: .4em .4em .4em .4em;
    width: 18px;
    }

    .dropdown-content{ /* country drop down */
    background-color: var( --drop-down-sm);
    }

    .dropdown{ /* country drop down */
        margin-top: -20px;
    }

    .dropdown-content, .dropdown, .dropbtn{ /* country drop down */
    width: auto;
    }

    .country-text{ /* country drop down */
    display: none;
    }

    .text{ /* country drop down */
    display: none;
    }

    .box{ /* body content box container */
    width: 90vw;
    margin: 0 2rem -10rem 0;
    /*background: var( --drop-down);*/
    
    justify-content: left;
    align-items: left;
    


    }
    
    h1{ /* Web3 Multiverse */
    font-size: 9vw !important;
    font-weight: 900;
    margin-bottom: 10px;
    

    
    }

    h3{ /* Innovating the */
    font-size: 6vw !important;
    font-weight: 700;
    white-space: nowrap;
    margin-left: -5px;
    }

    h3 img{ /* equation img */
    
    }

    button{ /* documents & team buttons */
    font-size: 10px;
    width: 70vw;
    }

    #docs{
    margin-bottom: -15px;
    }

    .action-buttons{
        align-items: left;
    }

    .social-media-container{ /* social media icons */
    width: 85vw;
    margin-top: -20px;
    

    }

    .social:hover img{ /* social media icons */
    height: clamp(1.3em, 1.3vw + 1.3em, 3.3em);
    width: clamp(1.3em, 1.3vw + 1.3em, 3.3em);
    }  

    .social:hover img{ /* social media icons */
    transform: scale(1.6); 
    }

    .presale{ /* presale text */
        width: 70vw;
        margin-top: -20px; 
    }

    .whitelist{
        
    }

    .compress{ /* browser site link */
    height: 20px;
    width: 100px;
    background-color: blue;
    margin-bottom: -100px;
    }

    .section{ /* nft bar container */
    justify-content: left;
   
    
    }

    .own-nft{ /* own nft button */
    margin-left: 80px;
    width: 90px;
    border-radius: 3px;
    
    font-size: 12px;
    }

   .price{ /* own nft price */
    font-size: 9px;
    margin-left: 84px;
    }

    .footer{ /* footer container */
    

    }

    .footerbar-container{
    
    }

    .portal-image{ /* portal image */
    width: 800px;
    height: 800px;
    right: -37em;
    top: 4em;
    }

    .man img{ /* commander image */
    height: 43vh;
    justify-content: right;
    margin-right: -160px;
    }

     /* position placement in header */
    .logo-container{
    order: 1;
    }

    .hidden-container{
    order: 4;
    }

    .member-container{
    order:2;
    }

    .nav-buttons-container{
    order: 3;
    }

}


/************************** 296 - 500 **********************************/

@media screen and (min-width: 196px) and (max-width: 500px){

    .header{
    padding: 10px 2vw 0 10vw;
    align-items: center;
    justify-content: center;
    } 

    .nav-buttons-container{ /* own token button container */
    display: flex;
    gap: -1px;
    }

    .own-btn{
    margin: .7em 1em 1em 1em; 
    align-items: center;
    justify-content: center;
    width: 85px;
    height: 30px;
    border-radius: 20px;
    
    }

    #create img{ /* icon for create account */
    display: none;
    }

    .toggle-btn{ /* dark mode circle button */
    margin: -.2em 1em 1em 1em; 
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    }

    .toggle-btn img{ /* dark mode cicle image */
    margin-top: .4em .4em .4em .4em;
    width: 18px;
    }

    .dropdown-content{ /* country drop down */
    background-color: var( --drop-down-sm);
    }

    .dropdown{ /* country drop down */
        margin-top: -20px;
    }

    .dropdown-content, .dropdown, .dropbtn{ /* country drop down */
    width: auto;
    }

    .country-text{ /* country drop down */
    display: none;
    }

    .text{ /* country drop down */
    display: none;
    }

    .box{ /* body content box container */
    width: 90vw;
    /*background: var( --drop-down);*/
    justify-content: left;
    margin-top: 2em;
    margin-bottom: -10em;
    margin-left: clamp(5vw, 10vw, 15vw);
    margin-right: 2em;
    
    


    }
    
    h1{ /* Web3 Multiverse */
    font-size: 9vw !important;
    font-weight: 900;
    margin-bottom: 10px;
    

    
    }

    h3{ /* Innovating the */
    font-size: 6vw !important;
    font-weight: 700;
    white-space: nowrap;
    margin-left: -5px;
    
    }

    h3 img{ /* equation img */
    
    }

    button{ /* documents & team buttons */
    font-size: 10px;
    width: 70vw;
    }

    #docs{
    margin-bottom: -15px;
    }

    .action-buttons{
        align-items: left;
    }

    .social-media-container{ /* social media icons */
    width: 85vw;
    margin-top: -20px;
    

    }

    .social:hover img{ /* social media icons */
    height: clamp(1.3em, 1.3vw + 1.3em, 3.3em);
    width: clamp(1.3em, 1.3vw + 1.3em, 3.3em);
    }  

    .social:hover img{ /* social media icons */
    transform: scale(1.6); 
    }

    .presale{ /* presale text */
        width: 70vw;
        margin-top: -20px; 
    }

    .whitelist{
        
    }

    .compress{ /* browser site link */
    height: 20px;
    width: 100px;
    background-color: blue;
    margin-bottom: -100px;
    }

    .section{ /* nft bar container */
    justify-content: center;
    margin-left: 150px;
    
   
    
    }

    .nftbar{
    flex-wrap: nowrap;
    



    }

    .own-nft{ /* own nft button */
    
    width: 90px;
    border-radius: 3px;

    
    font-size: 12px;
    }

   .price{ /* own nft price */
    font-size: 9px;
    
    }

    .footer{ /* footer container */
    

    }

    .footerbar-container{
    
    }

    .portal-image{ /* portal image */
    width: 900px;
    height: 900px;
    right: -37em;
    top: -4.4em;
    }

    .man img{ /* commander image */
    height: 43vh;
    justify-content: right;
    margin-right: -160px;
    }

     /* position placement in header */
    .logo-container{
    order: 1;
    }

    .hidden-container{
    order: 4;
    }

    .member-container{
    order:2;
    }

    .nav-buttons-container{
    order: 3;
    }

}


/************************** 500 - 600 **********************************/

@media screen and (min-width: 501px) and (max-width: 700px){

    .header{
    padding: 10px 2vw 0 10vw;
    align-items: center;
    justify-content: center;
    } 

    .nav-buttons-container{ /* own token button container */
    display: flex;
    gap: -1px;
    }

    .own-btn{
    margin: .7em 1em 1em 1em; 
    align-items: center;
    justify-content: center;
    width: 85px;
    height: 30px;
    border-radius: 20px;
    
    }

    #create img{ /* icon for create account */
    display: none;
    }

    .toggle-btn{ /* dark mode circle button */
    margin: -.2em 1em 1em 1em; 
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    }

    .toggle-btn img{ /* dark mode cicle image */
    margin-top: .4em .4em .4em .4em;
    width: 18px;
    }

    .dropdown-content{ /* country drop down */
    background-color: var( --drop-down-sm);
    }

    .dropdown{ /* country drop down */
        margin-top: -20px;
    }

    .dropdown-content, .dropdown, .dropbtn{ /* country drop down */
    width: auto;
    }

    .country-text{ /* country drop down */
    display: none;
    }

    .text{ /* country drop down */
    display: none;
    }

    .box{ /* body content box container */
    width: 90vw;
    /*background: var( --drop-down);*/
    justify-content: left;
    margin-top: 5em;
    margin-bottom: -10em;
    margin-left: clamp(6vw, 12vw, 20vw);
    margin-right: 2em;
    

    }

    #copyright{
        display: none;
    }
    
    h1{ /* Web3 Multiverse */
    font-size: 9vw !important;
    font-weight: 900;
    margin-bottom: 10px;
    

    
    }

    h3{ /* Innovating the */
    font-size: 6vw !important;
    font-weight: 700;
    white-space: nowrap;
    margin-left: -5px;
    
    }

    h3 img{ /* equation img */
    
    }

    button{ /* documents & team buttons */
    font-size: 10px;
    width: 70vw;
    }

    #docs{
    margin-bottom: -15px;
    }

    .action-buttons{
        align-items: left;
    }

    .social-media-container{ /* social media icons */
    width: 85vw;
    margin-top: -20px;
    

    }

    .social:hover img{ /* social media icons */
    height: clamp(1.3em, 1.3vw + 1.3em, 3.3em);
    width: clamp(1.3em, 1.3vw + 1.3em, 3.3em);
    }  

    .social:hover img{ /* social media icons */
    transform: scale(1.6); 
    }

    .presale{ /* presale text */
        width: 70vw;
        margin-top: -20px; 
    }

    .whitelist{
    }

    .compress{ /* browser site link */
    height: 20px;
    width: 100px;
    background-color: blue;
    margin-bottom: -100px;
    }

    .section{ /* nft bar container */
    justify-content: center;
    margin-left: 150px;
    }

    .nftbar{
    flex-wrap: nowrap;
    }

    .own-nft{ /* own nft button */
    width: 150px;
    border-radius: 3px;
    font-size: 18px;
    }

   .price{ /* own nft price */
    font-size: 14px;
    
    }

    .footer{ /* footer container */
    

    }

    .footerbar-container{
    
    }

    .portal-image{ /* portal image */
    width: 1200px;
    height: 1200px;
    right: -37em;
    top: -4.4em;
    }

    .images{
    right: 300px;
    }

    .man img{ /* commander image */
    height: 43vh;
    justify-content: right;
    margin-right: -160px;
    }

     /* position placement in header */
    .logo-container{
    order: 1;
    }

    .hidden-container{
    order: 4;
    }

    .member-container{
    order:2;
    }

    .nav-buttons-container{
    order: 3;
    }

}




/************************** 1600 - 1800 **********************************/

@media screen and (min-width: 1600px) and (max-width: 1800px){

.box{ /* body content box container */
  width: 45vw;
  margin-top: 10em;
  margin-bottom: -10em;
  margin-left: clamp(6vw, 12vw, 20vw);
  margin-right: 2em;
  }


.portal-image {
  width: 1200px;
  height: 1200px;
  right: -31em;

 }


.images{
  position: absolute;
  right: 170px;
  top: clamp(30vh, 70vh + 3em, 38vh); 
  /*top: 280px;*/
  max-width: 100%;
  height: auto; 
  z-index: -2;

 }

.man img{
  float: left;
  /*height: 480px;*/
  height: clamp(5vh, 45vh + 6em, 90vh);
  /*position: absolute;
  right: 190px;
  top: 380px;*/
  background-color: none;
  animation: move 1s linear infinite alternate-reverse;
  margin: 0;

  
}



}


/************************** 1800 - 3000 **********************************/


@media screen and (min-width: 1800px) and (max-width: 3000px){

.box{ /* body content box container */
  width: 45vw;
  margin-top: 10em;
  margin-bottom: -10em;
  margin-left: clamp(6vw, 12vw, 20vw);
  margin-right: 2em;
  }


.portal-image {
  width: 1200px;
  height: 1200px;
  right: -27em;

 }


.images{
  position: absolute;
  right: 195px;
  top: clamp(30vh, 70vh + 3em, 38vh); 
  max-width: 100%;
  height: auto; 
  z-index: -2;

 }

.man img{
  float: left;
  height: clamp(5vh, 45vh + 6em, 90vh);
  background-color: none;
  animation: move 1s linear infinite alternate-reverse;
  margin: 0;

  
}



}



/************************************************************************/
/************************************************************************/

/***************          COUNTRY DROP DOWN MEDIA       *****************/

/************************************************************************/
/************************************************************************/





/************************************************************************/
/************************************************************************/

/***************                 FUZZY                 *****************/

/************************************************************************/
/************************************************************************/


/*.fuzzy-overlay{
    position: absolute;
    inset: -100vw;
    background-color: red;
    background-image: url("img/fuzzy_2.jpg");
    opacity: 12%;
    z-index: -4;
    pointer-events: none;

    animation: shift 0.2s linear infinite both;
}

@keyframes shift{
    0%{
        transform: translateX(10%) translateY(10%);
    }
    100%{
        transform: translateX(-10%) translateY(-10%);

    }
}*/