body {
    padding:0;
    margin:0;
    /*background-color:rgb(9,9,9);*/
    background-color:black;
}

.scanline {
    background-image: url('Images/scanlineeffect.png');
}

.container {
    background: rgba(0, 0, 0, 0);
    width:46%;
    padding: 0px;
    margin:auto;  
}
.header {
    height: 100px;
    border-top: 10px solid white;
    border-bottom: 4px solid white;
    position:relative;  
}
/*.header:hover{*/
/*    height:100px;*/
/*    background: url('header.gif') no-repeat center center;*/
/*    background-size: cover;*/
/*    border: none;*/
/*}*/
.links {
    height:65px;
    line-height:65px;
    white-space:nowrap;  
}

.content-wrapper {
    display: flex;
    height:auto;
    gap: 15px;
    width: 46%;
    margin: auto;
    position: relative;
}

.side-bar {
    flex: 0 0 auto; 
    width: 250px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.main-content {
    display: flex;
    flex-wrap:nowrap;
    width:100%;
    height: auto;
    flex-direction: column;
    gap: 15px;
}

.box {
    border: 4px solid white;
    background: rgba(0,0,0,.85);
    font-size: 24px;
    font-family: Monospace;
    text-align: left;
    padding: 4px;
    z-index: 2;
    height: fit-content;
    min-height: 50px;
    width:auto;
    text-wrap: normal;
    
}

h1 {
    font-family:'Neuropol',sans-serif;
    font-size:40px;
    margin: 0;
    position:absolute;
    bottom:0;
    left:0;
    height:auto;
    color:white;  
    z-index: 1;
}
h2 {
    font-family:sans-serif;
    font-size:24px;
    text-align:left;
    margin:0;
    color:white;
}
h3 {
    font-size:20px;
    color:white;  
    margin:0;
}
p {
    font-size:18px;
    color:white;  
}

/* Custom Buttons */

.polybutton {
	  width: 150px;
	  height: 35px;
	  margin: 60px 9px;
	  bottom:0;
	  position:relative;
	  float:right;
	  text-align:center;
	  font-size:24px;
	  font-family:sans-serif;
	  cursor:pointer;
	  border:none;
	  color:white;
	  align-content: flex-end;
    z-index: 1;
	  clip-path: polygon(90% 0, 100% 40%, 100% 100%, 0 100%, 0 0);
}
.polybutton1 {
	background-color:#06d48b;
}
.polybutton1:hover {
	background-color:#28e7bc;
	transition-duration: 0.4s; 
}
.polybutton2 {
	background-color:#e14bdb;
}
.polybutton2:hover {
	background-color:#ec7fe8;
	transition-duration: 0.4s; 
}
.polybutton3 {
	background-color:#03A9F4;
}
.polybutton3:hover {
	background-color:skyblue;
	transition-duration: 0.4s; 
}
.polybutton4 {
	background-color:grey;
	float:left;
	margin:5px;
}
.polybutton4:hover {
	background-color:lightgrey;
	transition-duration: 0.4s; 
}

/* Diagonal Scrolling Grid */

.diagonal-grid-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  overflow: hidden;
}

.diagonal-grid {
  position: absolute;
  width: 200%;
  height: 200%;
  --grid-color: rgb(75,75,75);
  background: 
    linear-gradient(90deg, var(--grid-color) 3px, transparent 1px), /* Vertical */
    linear-gradient( var(--grid-color) 3px, transparent 1px); /* Horizontal */
  background-size: 40px 40px;
  animation: scrollDiagonal 1s linear infinite , color-shift-grid 20s linear infinite;
}

.grid-top-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: -5;
}

@keyframes color-shift-grid {
  0% { --grid-color: rgb(30,190,145);}
  25% { --grid-color: rgb(110,160,110); }
  50% { --grid-color: rgb(180,100,70); }
  75% { --grid-color: rgb(100,50,160); }
  100% { --grid-color: rgb(30,190,145); }
}

@keyframes scrollDiagonal {
  0% { transform: translate(0, 0) } 
  100% { transform: translate(-40px, -40px); }
}

/* Circle Animation*/

  .circle-container {
    --circle-color: rgb(50,210,165);
    background: rgba(0, 0, 0, 0);
    width:100%;
    height:100%;
    z-index: -5;
    
  }
  .outer-circle {
      z-index: -5;
      position: fixed;
      top:45%;
      left:66%;
			width: 50vmax;
      height: 50vmax;
			border-radius: 50%;
			background: rgba(50,210,165,100);
			animation: color-shift-circle 20s linear infinite;
        }

    .inside-circle {
      position: absolute;
      width: 25%;
      height: 25%;
			left: 36.5%;
			top: 36.5%;
			border-radius: 100% 100% 100% 100%;
			z-index: 12;
			background: rgba(50,210,165,100);
			animation: color-shift-circle 20s linear infinite;
        }

    .mid-circle {
      position: absolute;
			width: 75%;
      height: 75%;
			left: 12.5%;
			top: 12.5%;
			border-radius: 50%;
			background: black;
        }

		.sone,.stwo,.sthree,.sfour,.sfive {
      position: absolute;
      width: 100%;
      height: 100%;
			left: 0;
			top: 0;
      background: black;
			border-radius: 105% 100% 105% 100%;
      animation: rotate 15s linear infinite;
      transform-origin: 50% 50%;
		}

		.sone {
			z-index: 2;
      clip-path: polygon(50% 50%, 100% 0, 100% 10%);
      transform-origin: 50% 50%;
		}

		.stwo {
			z-index: 2;
      clip-path: polygon(50% 50%, 100% 0, 100% 10%);
      transform-origin: 50% 50%;
			rotate: 10deg;
		}

		.sthree {
			z-index: 2;
      clip-path: polygon(50% 50%, 100% 0, 100% 30%);
      transform-origin: 50% 50%;
			rotate: 249deg;
		}

		.sfour{
			z-index: 2;
      clip-path: polygon(50% 50%, 100% 0, 100% 30%);
      transform-origin: 50% 50%;
			rotate: 50deg;
		}

		.sfive {
		  z-index: 2;
      clip-path: polygon(50% 50%, 100% 0, 100% 50%);
      transform-origin: 50% 50%;
			rotate: 180deg;
		}

    @keyframes color-shift-circle {
      0% { background-color: rgba(50,210,165,100);}
      25% { background-color: rgba(130,180,130,100); }
      50% { background-color: rgba(200,120,90,100); }
      75% { background-color: rgba(120,70,180,100); }
      100% { background-color: rgba(50,210,165,100); }
    }
    
    @keyframes rotate {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
}


@font-face {
    font-family: 'Neuropol';
    src: url('/Fonts/Neuropol.otf');
    font-weight: normal;
    font-style: normal;
}