/* General Universal Website Css */

/* Global General */
body {
    padding: 0;
    margin: 0;
    width:100vw, 100vh;
    background-size: 100vw; height:100%;
    font-family:  Helvetica, sans-serif, consolas;
    color: #000000;
}
  

/*Font*/


/* Text links */
a {text-decoration: none; color:#F83F7A;}


/* Text highlight */
::selection {
color:#000000;
background-color:#FFB861;  
}

::selection a {
color:#000000;
background-color:#FFB861;
}

/* 12 Grid Layout*/

* {
  box-sizing: border-box;
}

.gridframe {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 20px;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
 .nav {
  grid-column: col-start / span 12;
}

.hero {
  grid-column: col-start / span 12;
}

.gamecardwidget {
  grid-column: col-start /span1 12;  
}


.footer {
  grid-column: col-start / span 12;
}

.circles {
 grid-column: col-start / span 12;
}

/*Scrollbar*/
::-webkit-scrollbar {
  overflow-x: hidden;
}

}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

/*Scrollbar*/
::-webkit-scrollbar {
  overflow-x: hidden;
}

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  
/*Scrollbar*/
::-webkit-scrollbar {
  height: 1.5vh;
  border-style:solid;
  border-width:0.5vh;
  border-color:#ffffff;
  
}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.nav {
  grid-column: col-start / span 12;
}

.hero {
  grid-column: col-start / span 12;
}

.main {
 grid-column: col-start / span 12;
}

.gamecardwidget {
  grid-column: col-start /span1 12;  
}

.footer {
  grid-column: col-start / span 12;
}

.circles {
 grid-column: col-start / span 12;
}
}



/*Scrollbar*/
::-webkit-scrollbar {
  height: 1.5vh;
}

/* Track */

::-webkit-scrollbar-track {
  background: #000000;
  border-style:solid;
  border-width:0.3vh;
  border-color:#ffffff;
  
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #92B8FF;
 
}


/*decorative divs*/
/*divider line*/

.decoline {
justify-content: center;
margin-left:auto;
margin-right:auto;
height:2px; 
background-color:#000000;
}


/* Upper Navigation Bar*/

.nav {
    position: sticky;
    top: 0;
    background-color:rgba(255,255,255,1);
    /*box-shadow: 0 4px 4px 0 rgba(185, 201, 219, 0.2), 0 3px 10px 0 rgba(185, 201, 219, 0.2);*/
}
/* LAH User profile nav */
.userprofile {
  float:left;
}
/* Icon nav */
.iconnav ul{
   list-style-type: none;
   background-color: rgba(255,255,255,0);
   overflow: hidden;
}
.iconnav a:hover{
  background-color:#414E72;  
}
.iconnav li{
  float:right;
}

/* Lower Navigation bar */
.navbar ul{
  list-style-type: none;
  background-color: rgba(255,255,255,0);
  overflow: hidden;
  margin-top:0%;
  width:90%;
  justify-content: center;
  margin-left:auto;
  margin-right:auto;
}
.navbar a{
  color: #000000;
  text-decoration: none;
  padding: 10px;
  padding-left: 16px;
  padding-right: 16px;
  display: block;
  text-align: center;
}
.navbar a:hover{
  color:#000000;
  background-color:#92B8FF;
}
.navbar li{
  float: left;
  margin-left:0px;
}


/* Footer */

.footer {
  background-color: rgba(255, 255, 255, 0);
  border-radius: 20px;
}

.footerlinkcontainer {
  display:flex;
  align-content:center;
  justify-content: space-between;
  width:90%;
}

.footersocials ul{
  list-style-type: none;
  display:flex;
  margin-top:0%;
}

.footersocials li{
  float:left;
  margin-right:10px;
  margin-left:10px;
}

.footerlinks ul{
  list-style-type: none;
  display:flex;
}
.footerlinks a{
  color: #000000;
  text-decoration: none;
  padding: 10px;
  padding-left: 16px;
  padding-right: 16px;
  display: block;
  text-align: center;
}
.footerlinks a:hover{
  color:#000000;
  background-color:#FFB861;
}
.footerlinks li{
  float: right
}

/* Website elements*/

.classicdiv {
  width:90%;
  justify-content: center;
  margin-left:auto;
  margin-right:auto;
}

/*black row button*/
.blackrowdiv {
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-left:auto; 
  margin-right:auto;
  background-color:#000000;
}

.blackrowbutton {
  width:35%;
  height:100%;
  float:right;
  margin-left:auto;
  background-color:#92B8FF; 
  color:#000000;
}
.blackrowbutton:hover{
  color:#000000;
  background-color:#FFB861;
}
.blackrowbutton a{
color:#000000;  
}

/*splitcontent 50%*/
.splitcontainer {
  display: flex;
  gap: 2%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  background-color:#ffffff;
  border-style:solid;
  border-color:#000000;
  border-width:2px;
  border-bottom:0px;
}

.split:nth-child(1),
.split:nth-child(2) {
  flex-grow: 1;
}

/**/


/* homepage project widgets*/
.gamewidget {
  display: flex;
  gap: 4vw;
  margin:auto;
  padding-bottom:2vh;
  width: 90%;
  overflow-x: auto;
}

.item:nth-child(1),
.item:nth-child(2),
.item:nth-child(3),
.item:nth-child(4),
.item:nth-child(5),
.item:nth-child(6) 
 {
 
  flex-shrink: 0;
  border-radius: 20px;
  text-align: center;
  aspect-ratio: 1/1;
}

.gamewidgetcard {
  width: 256px;
  height: 256px;
  border-radius:20px;
  border-style:solid;
  border-color:#D4D4D4;
  border-width:2px;
  background-color: #ffffff;
  Display :flex;  
  align-items: center;  
  justify-content: center;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
}

.gamewidgetcard:hover {
  
  
}

.gamewidgetcover {
  width:215px;
  height:215px;
  border-radius:10px;
}

/* portfolio landing page vertical ladder layout */


/* Website background */

/* Animated Shapes CSS */
  
.circles {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.circles li {
	position: absolute;
	display: block;
	list-style: none;
	width: 20px;
	height: 20px;
	background: rgba(96, 183, 199, 0.1);
	animation: animate 25s linear infinite;
	bottom: calc(-150px - 40vh);
}

/*Triangle*/
.circles li:nth-child(1) {
	left: 25%;
	animation-delay: 0s;
	animation-duration: 20s;
	background: rgba(47, 44, 92, 0.1);
	
  --r: 13px; /* the radius */
  
  width: 60px;
  height: 60px;
  aspect-ratio: 1/cos(30deg);
  mask:
    conic-gradient(from -30deg at 50% calc(200% - 3*var(--r)/2),#000 60deg,#0000 0)
     0 100%/100% calc(100% - 3*var(--r)/2) no-repeat,
    radial-gradient(var(--r) at 50% calc(2*var(--r)),#000 98%,#0000 101%),
    radial-gradient(var(--r),#000 98%,#0000 101%) space no-repeat
     0 100%/calc(2*tan(60deg)*var(--r)) calc(2*var(--r));
  clip-path: polygon(50% 0,100% 100%,0 100%);
}

.circles li:nth-child(2) {
	left: 10%;
	width: 20px;
	height: 20px;
	animation-delay: 0s;
	animation-duration: 25s;
	border-radius: 50%;
	background: rgba(96, 183, 199, 0.1);
}

.circles li:nth-child(3) {
	left: 70%;
	width: 20px;
	height: 20px;
	animation-delay: 0s;
	animation-duration: 20s;
	border-radius: 50%;
	background: rgba(47, 44, 92, 0.1);
}

.circles li:nth-child(4) {
	left: 40%;
	width: 60px;
	height: 60px;
	animation-delay: 0s;
	animation-duration: 15s;
	border-radius: 50%;
	background: rgba(114, 63, 145, 0.1);
}

.circles li:nth-child(5) {
	left: 65%;
	width: 20px;
	height: 20px;
	animation-delay: 0s;
	animation-duration: 20s;
	border-radius: 50%;
	background: rgba(96, 183, 199, 0.1);
}

/*Pill Shape*/
.circles li:nth-child(6) {
	left: 75%;
	width: 20px;
	height: 60px;
	animation-delay: 0s;
	animation-duration: 25s;
	border-radius: 20px;
	background: rgba(114, 63, 145, 0.1);
}

.circles li:nth-child(7) {
	left: 35%;
	width: 30px;
	height: 80px;
	animation-delay: 0s;
	animation-duration: 30s;
	border-radius: 20px;
	background: rgba(47, 44, 92, 0.1);
}

.circles li:nth-child(8) {
	left: 50%;
	width: 25px;
	height: 25px;
	animation-delay: 0s;
	animation-duration: 35s;
	border-radius: 50%;
	background: rgba(114, 63, 145, 0.1);
}

.circles li:nth-child(9) {
	left: 20%;
	width: 15px;
	height: 15px;
	animation-delay: 0s;
	animation-duration: 40s;
	border-radius: 50%;
	background: rgba(47, 44, 92, 0.1);
}

.circles li:nth-child(10) {
	left: 85%;
	width: 50px;
	height: 50px;
	animation-delay: 0s;
	animation-duration: 45s;
	border-radius: 50%;
	background: rgba(96, 183, 199, 0.1);
}

@keyframes animate {
	0% {
		transform: translateY(100vh) rotate(0deg);
		opacity: 0;
	}
	50% {
		transform: translateY(-50vh) rotate(360deg);
		opacity: 1;
	}
	100% {
		transform: translateY(-100vh) rotate(720deg);
		opacity: 0;
	}
}

.background {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: white;
  background: radial-gradient(125% 125% at 50% 10%, #fff 50%, #E6E6E6 100%);
  z-index: -10;
}