/**FONT**/
@font-face {
    font-family: "Raleway";
    src: url("https://www.rovingoctopus.com/fonts/Raleway-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900; /* Variable font supports multiple weights */
    font-display: swap;
}

/**ROOT VARIABLES**/
:root {
  	--main-color: #999;
	--accent-color: white;
	--font: "Raleway", sans-serif;
	--thin: 200;
	--base: 300;
	--bold: 600;
	--big: 800;
	--trans: all .8s ease;
	--content-vert: calc(97svw - 0px);
	--content-horz: calc(97svh - 0px);
}

/**General**/
html{
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box; /**box-sizing**/
    /** prevent window from scrolling for mobile browser**/
    overflow-y: hidden;
	overflow-x:hidden;
    /** set base font for rem
    font-size: calc(13px + 1vw);**/
	overscroll-behavior: none;

	}
	/**
	@media only screen and (orientation: landscape) {
		html{
			font-size: calc(0px + 4svh);
			font-size: calc(var(--content-vert)*.4);
		}
	
	}
	@media only screen and (orientation: portrait) {
		html{
			font-size: calc(0px + 4svw);
		}
	}
	**/
	@media only screen and (orientation: landscape) and (max-aspect-ratio: 1.5/ 1) {
		html{
			font-size: calc(var(--content-vert) * .0333);
		}
	}
	@media only screen and (orientation: landscape) and (min-aspect-ratio: 1.5/ 1) {
		html{
			font-size: calc(var(--content-horz) * .05);
		}
	}
	@media only screen and (orientation: portrait) and (max-aspect-ratio: 1 / 1.5) {
		html{
			font-size: calc(var(--content-vert) * .05);
		}
	}
	@media only screen and (orientation: portrait) and (min-aspect-ratio: 1 / 1.5) {
		html{
			font-size: calc(var(--content-horz) * .0333);
		}
	}
		
	
	
body{
    transition: all .6s ease;
    margin: 0;
	scroll-behavior: smooth;
	overscroll-behavior: none;
	width: 100vw;
	height: 100vh;	
	display: flex;
	overflow: scroll;
}

body,
button,
input,
select,
optgroup,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
p{
    color: var(--main-color);
	font-family: var(--font);
	font-size: 1rem;
    line-height: 1.5;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important; 
}

/**START**/
.site-main{
	background: white;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
	margin: auto;
	z-index:1;
	position: relative;
	display:grid;
	width: 100%;
	height: 100%;
	gap: 0;
}
	@media only screen and (orientation: landscape) and (max-aspect-ratio: 1.5/ 1) {
		.site-main{
			width: var(--content-vert);
    		height: calc(var(--content-vert) / 1.5);
			grid-template-columns: 1fr .5fr ; 
		}
	}
	@media only screen and (orientation: landscape) and (min-aspect-ratio: 1.5/ 1) {
		.site-main{
			width: calc(var(--content-horz) * 1.5);
			height: var(--content-horz);
			grid-template-columns: 1fr .5fr ; 
		}
	}
	@media only screen and (orientation: portrait) and (max-aspect-ratio: 1 / 1.5) {
		.site-main{
			width: var(--content-vert);
			height: calc(var(--content-vert) * 1.5); 
			grid-template-rows: 1fr .5fr ; 
		}
	}
	@media only screen and (orientation: portrait) and (min-aspect-ratio: 1 / 1.5) {
		.site-main{
			width: calc(var(--content-horz) /1.5);
    		height: var(--content-horz);
			grid-template-rows: 1fr .5fr ; 
		}
	}
	

.render-tiles{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; 
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; 
	gap: 0;
	grid-column: 1; 
	grid-row: 1; 
	position: relative; 
	z-index: 2; 
	background: black; 
	pointer-events: none;
}
	@media only screen and (orientation: landscape) and (max-aspect-ratio: 1.5/ 1) {
		.render-tiles{
			width: calc(var(--content-vert) / 1.5);
			height: calc(var(--content-vert) / 1.5);
		}
	}
	@media only screen and (orientation: landscape) and (min-aspect-ratio: 1.5/ 1) {
		.render-tiles{
			width: var(--content-horz);
			height: var(--content-horz);
		}
	}
	
	@media only screen and (orientation: portrait) and (max-aspect-ratio: 1 / 1.5){
		.render-tiles{
			width: var(--content-vert);
			height: var(--content-vert);
		}
	}
	@media only screen and (orientation: portrait) and (min-aspect-ratio: 1 / 1.5){
		.render-tiles{
			width: calc(var(--content-horz) / 1.5);
			height: calc(var(--content-horz) / 1.5);
		}
	}

.click-tiles{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; 
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; 
	gap: 0;
	grid-column: 1; 
	grid-row: 1; 
	position: relative; 
	z-index: 5; 
}
	@media only screen and (orientation: landscape) and (max-aspect-ratio: 1.5/ 1) {
		.click-tiles{
			width: calc(var(--content-vert) / 1.5);
			height: calc(var(--content-vert) / 1.5);
		}
	}
	@media only screen and (orientation: landscape) and (min-aspect-ratio: 1.5/ 1) {
		.click-tiles{
			width: var(--content-horz);
			height: var(--content-horz);
		}
	}
	
	@media only screen and (orientation: portrait) and (max-aspect-ratio: 1 / 1.5){
		.click-tiles{
			width: var(--content-vert);
			height: var(--content-vert);
		}
	}
	@media only screen and (orientation: portrait) and (min-aspect-ratio: 1 / 1.5){
		.click-tiles{
			width: calc(var(--content-horz) / 1.5);
			height: calc(var(--content-horz) / 1.5);
		}
	}
	
.render-tile{
	position: relative;
}	

.inner-tile{
	position: relative;
}
	.inner-tile:hover {
		background: none;
		box-shadow: 
			0 0 .6rem .3rem rgba(255, 255, 255, 0.8), /* Outer glow */
			inset 0 0 .6rem .2rem rgba(255, 255, 255, 0.5); /* Inner glow */
		cursor:pointer;
		transition: box-shadow 0.6s ease; /* Add box-shadow transition */
	}

.menu{ 
	display: grid; 
	position: relative;

}

	@media only screen and (orientation: landscape) and (max-aspect-ratio: 1.5/ 1) {
		.menu{
			width: calc(var(--content-vert) / 3);
			height: calc(var(--content-vert) / 1.5);
			grid-template-columns: 1fr;
			grid-column: 2; 
	  		grid-row: 1; 
		}
	}
	@media only screen and (orientation: landscape) and (min-aspect-ratio: 1.5/ 1) {
		.menu{
			width: calc( var(--content-horz) * .5);
			height: var(--content-horz);
			grid-template-columns: 1fr;
			grid-column: 2; 
	  		grid-row: 1; 
		}
	}
	
	@media only screen and (orientation: portrait) and (max-aspect-ratio: 1 / 1.5){
		.menu{
			width: var(--content-vert);
			height: calc( var(--content-vert) * .5);
			grid-column: 1; 
	  		grid-row: 3; 
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto auto; 
			grid-template-areas: 
			  	"area1 area4"
				"area1 area2"
			  	"area1 area3";
		}
	}
	@media only screen and (orientation: portrait) and (min-aspect-ratio: 1 / 1.5){	
		.menu{
			width: calc(var(--content-horz) / 1.5);
			height: calc(var(--content-horz) / 3);
			grid-column: 1; 
	  		grid-row: 3; 
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto auto; 
			grid-template-areas: 
			  	"area1 area4"
				"area1 area2"
			  	"area1 area3";
		}
	}
	
.menu{font-size: .55rem !important;  color: black !important; line-height: 1.2 !important;}
.menu-skills{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr; 
	grid-template-rows: 1fr 1fr 1fr 1fr; 
	gap: 0;
	position: relative;
	}
.menu-skills > * {
  aspect-ratio: 1 / 1; /* Make child elements square */
  width: 100%; /* Match grid cell width */
  height: auto; /* Height is set by aspect-ratio */
  box-sizing: border-box; /* Ensure padding/borders don't overflow */
  overflow: hidden; /* Contain content inside the grid cell */
}
/**normal horizontal screen**/
@media only screen and (orientation: landscape) and (min-aspect-ratio: 1.5/ 1){

	.menu-region-info {background:teal; width: calc( var(--content-horz) * .5); height: calc( var(--content-horz) / 9); order: 1;}
	.menu-region-name {background:red; width: calc( var(--content-horz) * .5); height: calc( var(--content-horz) / 11); order: 1;}
	.menu-skills {background: brown; width: calc( var(--content-horz) * .5); height: calc( var(--content-horz) / 2); order: 2;}
	.menu-counter {background:blue; width: calc( var(--content-horz) * .5); height: calc( var(--content-horz) / 3.3559); order: 3;}
}
@media only screen and (orientation: landscape) and (max-aspect-ratio: 1.5/ 1){

	.menu-region-info {background:teal; width: calc( var(--content-vert) / 3); height: calc( var(--content-vert) / 13.5); order: 1;}
	.menu-region-name {background:red; width: calc( var(--content-vert) / 3); height: calc( var(--content-vert) / 16.5); order: 1;}
	.menu-skills {background: brown; width: calc( var(--content-vert) / 3); height: calc( var(--content-vert) / 3); order: 2;}
	.menu-counter {background:blue; width: calc( var(--content-vert) / 3); height: calc( var(--content-vert) / 5.03385); order: 3;}
}
@media only screen and (orientation: portrait) and (max-aspect-ratio: 1 / 1.5){

	.menu-region-info {background:red; width: calc( var(--content-vert) * .5); height: calc( var(--content-vert) / 9); grid-area: area4;}
	.menu-region-name {background:teal; width: calc( var(--content-vert) * .5); height: calc( var(--content-vert) / 11); grid-area: area2;}
	.menu-skills {background: brown; width:  calc( var(--content-vert) * .5); height: calc( var(--content-vert) / 2); grid-area: area1;}
	.menu-counter {background:blue; width: calc( var(--content-vert) * .5); height: calc( var(--content-vert) / 3.3559); grid-area: area3;}
}
@media only screen and (orientation: portrait) and (min-aspect-ratio: 1 / 1.5){

	.menu-region-info {background:red; width: calc(var(--content-horz) / 3); height: calc( var(--content-horz) / 13.5); grid-area: area4;}
	.menu-region-name {background:teal; width: calc(var(--content-horz) / 3); height: calc( var(--content-horz) / 16.5); grid-area: area2;}
	.menu-skills {background: brown; width:  calc(var(--content-horz) / 3); height: calc( var(--content-horz) / 3); grid-area: area1;}
	.menu-counter {background:blue; width: calc(var(--content-horz) / 3); height: calc( var(--content-horz) / 5.03385); grid-area: area3;}
}







/**CONTENT STYLE**/



@media screen and (max-width:725px){
/**mobile starts**/

/**mobile ends**/
}


/**outside frame**/
.frame{
	display: grid;
	grid-template-columns: .25fr 8fr .25fr ; 
	grid-template-rows: .25fr 8fr .25fr ; 
	width: 100%;
	height: 100%;
	gap: 0;
	z-index: 3;
	grid-column: 1;
  	grid-row: 1;
			box-shadow:
			inset 0 0 .6rem .3rem rgba(0, 0, 0, 1); /* Inner glow */
}
	@media only screen and (orientation: landscape) and (max-aspect-ratio: 1.5/ 1) {
		.frame{
			width: calc(var(--content-vert) / 1.5);
			height: calc(var(--content-vert) / 1.5);
		}
	}
	@media only screen and (orientation: landscape) and (min-aspect-ratio: 1.5/ 1) {
		.frame{
			width: var(--content-horz);
			height: var(--content-horz);
		}
	}
	
	@media only screen and (orientation: portrait) and (max-aspect-ratio: 1 / 1.5){
		.frame{
			width: var(--content-vert);
			height: var(--content-vert);
		}
	}
	@media only screen and (orientation: portrait) and (min-aspect-ratio: 1 / 1.5){
		.frame{
			width: calc(var(--content-horz) / 1.5);
			height: calc(var(--content-horz) / 1.5);
		}
	}

#player-box{
	width: 60%;
	height: 60%; 
	background: black;
	margin: auto;
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index: 3;
	border-radius: 50%;
}
#follower-box {
    width: 60%; /* Slightly smaller than the tile */
    height: 60%;
    background-color: orange; /* Different color to distinguish */
    position: absolute;
    top: 0;
    left: 0;
	right:0;
	bottom:0;
	margin: auto;
    z-index: 2; /* Ensure it appears above the tile background */
    border-radius: 50%; /* Optional: make it circular */
    animation: pulse 1.5s infinite; /* Example animation */
}
#follower-box:before{
	width: 10px;
	height: 10px;
	background: black;
	border-radius: 50%;
	position: absolute;
	top:3px; right:3px;
	content: "";
}
/**interactive grid 3x3
#grid{
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.5fr; 
	grid-template-rows: 1.5fr 1fr 1.5fr; 
	gap: 0;
	position: absolute; 
	top:5.5%; 
	left:5.5%; 
	bottom:5.5%; 
	right:5.5%;
	z-index: 3; 
}
**/
/**
.inner{
	position: relative;
}
.inner-arrow {
	background: none;
    box-shadow: 
		0 0 20px 10px rgba(255, 255, 255, 0.8), /* Outer glow 
		inset 0 0 20px 5px rgba(255, 255, 255, 0.5); /* Inner glow 
	position: absolute; 
	opacity: 0;
	cursor:pointer;
	transition: box-shadow 0.6s ease, opacity 0.6s ease; /* Add box-shadow transition 
}
.inner:hover .inner-arrow,
.player-position:hover .inner-arrow{
	/**opacity: 1;*
}
.inner .corner{
	width: 66.666%; 
	height: 66.666%;
}
.inner .side{
	width: 66.666%; 
	height: 100%;
}
.inner .top{
	width: 100%;
	height: 66.666%; 
}

.player-position{
	position: relative;
}
.inner .center{
	width: 100%;
	height: 100%; 
}

*/


/**END**/