@import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

:root {
	--white: #ffffff;
	--dark-purple: #120458;
	--light-purple: #7a04eb;
	--dark-pink: #ff00a0;
	--light-pink: #fe75fe;
	--light-red: #ff2a6d;
	--dark-aqua: #05d9e8;
	--light-aqua: #d1f7ff;
	--dark-blue: #01012b;
	--light-blue: #005678;
	--ligh-yellow: #defe47;
	--light-orange: #ff6e27;
	--dark-green: #083e12;
	--light-green: #1afe49;
	--bg-white: #f0fafb;
	--font-dark: #414d4f;
	--font-white: #f0fafb;
	--bg-menu: #536366;
}

body,
html {
	text-align: left;
	text-decoration: none
}

body {
	-webkit-font-smoothing: antialiased
}

.s10 {
    font-size: 10px;
}
.s12 {
    font-size: 12px;
}
.s14 {
    font-size: 14px;
}
.s16 {
    font-size: 16px;
}
.s18 {
    font-size: 18px;
}
.s20 {
    font-size: 20px;
}
.s22 {
    font-size: 22px;
}
.s24 {
    font-size: 24px;
}
.s26 {
    font-size: 26px;
}
.s28 {
    font-size: 28px;
}
.s30 {
    font-size: 30px;
}
.s32 {
    font-size: 32px;
}
.s34 {
    font-size: 34px;
}
.s36 {
    font-size: 36px;
}
.s38 {
    font-size: 38px;
}
.s40 {
    font-size: 40px;
}
.s42 {
    font-size: 42px;
}
.s45 {
    font-size: 45px;
}
.s60 {
    font-size: 60px;
}
.s62 {
    font-size: 62px;
}
.s64 {
    font-size: 64px;
}

.NotoLight {
	font-family: 'NotoLight';
}
.NotoBlack {
	font-family: 'NotoBlack';
}
.NotoBold {
	font-family: 'NotoBold';
}
.NotoMedium {
	font-family: 'NotoMedium';
}
.NotoRegular {
	font-family: 'NotoRegular';
}
.NotoThin {
	font-family: 'NotoThin';
}

.btn {
	transition: .5s all;
}
.btn:hover {
	transform: scale(1.1);
}
#wrapper {
	width: 100%;
	height: auto;
	overflow-x: hidden;
	overflow-y: hidden;
}

@-ms-viewport {
	width: auto;
	initial-scale: 1
}

@viewport {
	width: device-width;
	initial-scale: 1
}

.nds, .nds:focus, .nds:active, .nds:hover {
	outline: none !important;
	box-shadow: none !important;
}
.shareTechMono {
	font-family: 'Share Tech Mono';
}
.pressStart2P {
	font-family: 'PressStart2P';
}
.electrolize {
	font-family: 'Electrolize';
}

body {
	background-color: var(--bg-white);
	
	color: var(--font-dark);
	font-family: 'Noto Sans JP', sans-serif;
	/*font-family: 'Share Tech Mono', monospace;*/
	font-size: 26px;
	font-weight: 500;
	/*text-shadow: 0 0 5px rgba(25, 255, 71, 0.8);*/
	position: relative;
	height: 100vh
}
.menu-lateral {
	position: fixed;
	left: 0;
	top: 0;
	width: 150px;
	height: 100%;
	background: rgba( 83, 99, 102, 0.5 );
	box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
	border-radius: 0 20px 20px 0;
	border: 0px solid rgba( 255, 255, 255, 0.18 );
	z-index: 101;
}

.btn-menu {
	position: fixed;
	right: -40px;
	top: 50%;
	width: 40px;
	height: 40px;
	background: rgba( 83, 99, 102, 0.5 );
	box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
	border-radius: 0 20px 20px 0;
	border: 0px solid rgba( 255, 255, 255, 0.18 );
	z-index: 101;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}

#logo {
	opacity: 0;
	border: 0px solid rgba( 255, 255, 255, 0.18 );
	transition: 1s all;
}
#contenido {
	opacity: 0;
	border: 0px solid rgba( 255, 255, 255, 0.18 );
	transition: 1s all;
}
.number-case {
	border-right: 1px solid rgba(0, 0, 0, 0.2);
	color: gray;
}
.bg-menu {
	color: var(--font-white);
}
.bg-clear {
	background-color: transparent;
}
.backoverlay {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-image: url('assets/images/02.png');
	opacity: 0.5;
	z-index: 60;
}
.backoverlay_y {
	position: fixed;
	width: 100vw;
	height: 100vh;
/* 	background-color: rgba(0, 0, 0, 0.5); */
	z-index: 61;
}

#video-background,
#video-overlay {
	position: fixed;
	top: 0;
	left: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -1;
}
.logo-container {
	position: relative; 
	background: rgba( 255, 255, 255, 0.25 );
	box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
	border-radius: 10px;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	z-index: 100;
}
.master-container {
	position: relative; 
	background: rgba( 255, 255, 255, 0.25 );
	box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
	border-radius: 10px;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	z-index: 100;
}