@fontSize: 30px;

@light: ~"(prefers-color-scheme: light)";
@dark: ~"(prefers-color-scheme: dark)";

html {
  margin: 0px;
}

body {
  font-family: system-ui;
  font-size: @fontSize;
  margin-left: 20%;
  margin-right: 20%;
  @media (max-width: 500px) {
    margin-left: 20px;
    margin-right: 20px;
  }

}

nav {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
}


footer {
  margin-left: 20%;
  margin-right: 20%;
  @media (max-width: 500px) {
    margin-left: 0px;
    margin-right: 0px;
  }
}

header {
  text-align: center;
}

h2 {
  margin: 0px;
  padding: 0px;
}

a {
  color: @mainColor;
  ::selection {

  }
}

@media @light {
  html {
    background-color: @lightColor;
    color: @darkColor;
  }

  ::selection {
    background-color: @darkColor;
    color: @lightColor;
  }
}

@media @dark {
  html {
    background-color: @darkColor;
    color: @lightColor;
  }

  ::selection {
    background-color: @lightColor;
    color: @darkColor;
  }
}

/*
.prideFlag {
  bottom: 0px;
  margin: 0px;
  margin-bottom: 12px;
  border-color: red;
	background-color: rgba(0, 0, 0, 0);
	background-image: linear-gradient(to right, rgb(52, 0, 60) 0%, rgb(52, 0, 60) 17%, rgb(0, 40, 137) 17%, rgb(0, 40, 137) 33%, rgb(15, 81, 33) 33%, rgb(15, 81, 33) 50%, rgb(189, 179, 61) 50%, rgb(189, 179, 61) 66%, rgb(169, 105, 34) 66%, rgb(169, 105, 34) 83%, rgb(117, 0, 0) 83%, rgb(117, 0, 0) 100%);
	border: 0;
	height: 16px;
	background: #087F28;
  background: linear-gradient(to right, #740D85 0%, #740D85 17%, #064DFE 17%, #064DFE 33%, #087F28 33%, #087F28 50%, #FEEC1A 50%, #FEEC1A 66%, #FE8B0B 66%, #FE8B0B 83%, #E20706 83%, #E20706 100% );
  width: 100%;
}
*/