@import url("https://cdn.jsdelivr.net/npm/galmuri/dist/galmuri.css");

header, div, section, p, h1, h2, h3, li {
  font-family:"GalmuriMono11";
  color: white;
}

body {
  background-color: black;
  margin: 0%;
  margin-left: 20%;
  margin-right: 20%;
}

button {
  background-color: #00000000;
  border: none;
}

button p{
  margin-top: 0%;
  margin-bottom: 0%;
}

li {
  list-style-type: square;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1.3em;
}

#header {
  display: flex;
  padding: 0 20px 0;
}
#header .logo p {
	transition:background-color 0.2s ease-in-out,color 0.2s ease-in-out;
	background-color:#ffffff;
	color:#000000;
	display:inline-block;
	line-height:1.65em;
	padding:0 0.5em 0 0.5em;
  font-weight: 600;
  font-size: 28px;
}
#header .logo:hover p {
	background-color:#9bf1ff;
}
#header .logo:active p {
	background-color:#9bf1ffbf;
}

#header nav {
  width: 100%;
  display: flex;
  justify-content: right;
  align-items: center;
}

#banner {
  color: white;
  display: flex;
  justify-content: center;
}

#inner {
  width: 100%;
}

#inner .major h1 {
  font-size: 68px;
  margin-top: 5%;
  margin-bottom: 0%;
  text-align: center;
}

#inner .major h3 {
  text-align: center;
}

#inner .major p {
  text-align: center;
}

#animated-hr {
  width: 0%;
  opacity: 0;
  transition: width 1s, opacity 0.5s ease-in-out;
  margin-bottom: 20px;
}

#content {
  display: flex;
  margin-bottom: 20px;
  opacity: 0;
  position: relative;
  transform: translateY(80px);
  transition: opacity 1.5s, transform 0.8s ease-in-out;
}

#index-box {
  width: 300px;
  min-width : 300px;
  border: 3px solid white;
  display: flex;
  justify-content: center;
  margin-right: 30px;
  padding-top: 10px;
}

#index-box h2 {
  font-size: 32px;
  color: white;
}

#content img {
  max-width: 100%;
  height: auto;
}

.las {
  transition: color 0.2s ease-in-out;
  color: #ffffff; 
  font-size:48px;
}

.lab {
  transition: color 0.2s ease-in-out;
  color: gray; 
  font-size:48px;
}

.la-github:hover {
	color: #ffffff;
}

.la-github:active  {
	color: #ffffffbf;
}

.la-instagram:hover {
	color: #fe0f73;
}

.la-instagram:active  {
	color: #fe0f73bf;
}

.la-twitter:hover {
	color:#1d9bf0;
}

.la-twitter:active  {
	color:#1d9bf0bf;
}

.la-steam:hover {
	color: #0a275e;
}

.la-steam:active  {
	color: #0a275ebf;
}

.la-youtube:hover {
	color: #ff0031;
}

.la-youtube:active  {
	color: #ff0031bf;
}

.la-discord {
  color: #ffffff;
}

.la-discord p {
  transition: color 0.2s ease-in-out;
  font-size: 0.3em;
}

.la-discord:hover {
  color: #5662f6;
}

.la-discord:hover p {
  color: #5662f6;
}

.la-discord:active {
  color: #5662f6bf;
}

.la-discord:active p {
  color: #5662f6bf;
}

.la-envelope {
  color: #ffffff;
}

.la-envelope p {
  transition: color 0.2s ease-in-out;
  font-weight: normal;
  font-size: 0.3em;
}

.la-envelope:hover {
  color: #ce3c30;
}

.la-envelope:hover p {
  color: #ce3c30;
}

.la-envelope:active {
  color: #ce3c30bf;
}

.la-envelope:active p {
  color: #ce3c30bf;
}

#toast {
  opacity: 0;
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translate(-50%, 0);
  padding: 10px 50px;
  color: white;
  background-color: #000000;
  border: 3px solid white;
  transition: all 0.5s;
}

#toast.active {
  opacity: 1;
  bottom: 50px;
}