/* 
* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
}*/
/*General body CSS*/
html {
      font-family: 'Inter', sans-serif;
      background: linear-gradient(135deg, #0f0f1a, #1c1c2e);
      color: white;
      line-height: 1.6;
}
header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 2rem;
      background-color: rgba(20, 20, 30, 0.8);
      position: sticky;
      top: 0;
      z-index: 10;
}
/*Nav bar link CSS*/
nav a {
      margin: 0 1rem;
      text-decoration: none;
      color: #ccc;
      font-weight: 500;
}

nav a:hover {
      color: white;
}
/*Hero Secton CSS*/
.hero {
      text-align: center;
      padding: 1rem 2rem 1rem;
	  line-height: 1;
}

.hero h1 {
      font-size: 2.75rem;
      margin-bottom: 1rem;
}

.hero p {
      color: #aaa;
      font-size: 1.2rem;
      max-width: 600px;
      margin: 0 auto 2rem;
}

hero .buttons {
      display: flex;
      justify-content: center;
      gap: 1rem;
}
/*Download section*/
.downloads a{
	display:block; 
	margin-top: 0.5rem;
	font-size: 0.9rem; 

}
.btn {
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 6px;
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.3s;
      width: 200px;
}

.btn-primary {
      background-color: #3a5bff;
      color: white;
      margin-top: 1rem; 
      display: inline-block;
      text-decoration: none;
      max-width: 160px;
      vertical-align: middle;
      margin-left: 1rem;
}
.btn-other {
      background-color: #3a5bff;
      color: white;
      margin-top: 1rem; 
      display: inline-block;
      text-decoration: none;
      max-width: 160px;
      vertical-align: middle;

}

.btn-primary:hover {
      background-color: #2741cc;
}

.btn-secondary {
      background-color: rgba(255, 255, 255, 0.1);
      color: #ccc;
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
/*Community section*/
.community{
	padding-left:5%;
}
.community h1{ 
	text-align: center;
	font-size: 2.75rem;
    margin-bottom: 1rem;
}
.community a{
	color: #6fa8dc;
}
/*Discord*/
.discord{
	padding-left:5%;
}
.discord h1{
	text-align: center;
	font-size: 2.75rem;
    margin-bottom: 1rem;
}
#discord-widget .widgetHeader-2Hz_Ln {
	padding:0;
}
/*IDK*/
.i-cant-read {
	font-weight:bold;
	color:red;
	font-size:18px;
}
/*Also Dont know */
blink {
   animation-duration: 0.2s;
   animation-name: blinky;
   animation-iteration-count: infinite;
   animation-timing-function: steps(1, start);
}
/*Help text Popup animation*/
[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);
}

[popover] {
  font-size: 1.2rem;
  padding: 10px;
  color: #ccc;
background-color: #1e202c;
border: transparent;
max-width: 75%;
  /* Final state of the exit animation */
  opacity: 0;
  transform: scaleX(0);

  transition:
    opacity 0.7s,
    transform 0.7s,
    overlay 0.7s allow-discrete,
    display 0.7s allow-discrete;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

/* Needs to be included after the previous [popover]:popover-open
   rule to take effect, as the specificity is the same */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scaleX(0);
  }
}

/* Transition for the popover's backdrop */

[popover]::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition:
    display 0.7s allow-discrete,
    overlay 0.7s allow-discrete,
    background-color 0.7s;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

[popover]:popover-open::backdrop {
  background-color: rgb(0 0 0 / 25%);
}

/* Nesting selectors (&) cannot represent pseudo-elements, so this 
   starting-style rule cannot be nested. */

@starting-style {
  [popover]:popover-open::backdrop {
    background-color: rgb(0 0 0 / 0%);
  }
}



@keyframes blinky {
   50% {
	   visibility: hidden;
   }
}

@media (max-width:620px) {
	figure > img {
		width:100%;
		height:auto;
	}
	.splitpanel > div {
		display:block;
		width:100% !important;
	}
}