:root {
  color-scheme: dark;
  --color1: #00e1ff94;
  --color2: #c74b4b94;
  --load: glow 500ms ease;
  --font: 'Space Mono', monospace;
}

 /* * { border: 1px solid #fff; }  */

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 1em;
  padding: 3em;
  padding-bottom: 0;
  scroll-behavior: smooth;
  animation: var(--load);
  font-family: var(--font);
  font-weight: bold;
  background: var(--color1);
  overflow-x: hidden;
  height: 50em;
  color: white;
}

div#background {
  background: linear-gradient(
    #16332fb3, 
    #331616b3
  ), url(/images/bg1.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: blur(1em);
  -webkit-filter: blur(1em);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
div.container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
div#c1 > div.info { width: 22em; }
div#c3 { height: 80%; }
div#c4 { height: 60%; }
div#pg { 
  display: flex;
  gap: 1em;
  justify-content: center;
  align-items: center;
  margin-bottom: 2em;
}
div.spacer {
  display: none;
  height: 3em;
}
div#buttons {
  display: flex;
}

img#pfp.offline { border: .3em grey solid }
img#pfp.online { border: .3em lime solid }
img#pfp.dnd { border: .3em red solid }
img#pfp.idle { border: .3em yellow solid }
img#pfp {
  border-radius: 50%;
  width: 5.5em;
  height: 5.5em;
}
img#pfp:hover { animation: spin 1.5s infinite; }
img.stats { width: 100%; }
button > img {
  width: 1.5em;
}

h1, h2, h3, p { font-weight: bold; }
h5 {
  margin-bottom: 0;
  color: #ffffff9d;
}
h3 { 
  filter: none;
  -webkit-filter: none;
  text-align: center; 
  color: var(--color1); 
  font-size: 1.7em;
}
h2 { color: var(--color1); font-size: 2em; }
h1 { color: var(--color1); margin: 10px; }
p { margin: 10px; font-size: 1.5em; }
p#stats { background-color: #000000; font-weight: 600; padding: 10px; }
p, h1, h2, legend, button {
  text-shadow: 0 0 10px #000;
}

span { color: var(--color2); font-weight: bolder; }
span:hover {
  animation: hover 1s ease;
  background: #68686881;
  padding: .2em;
  padding-left: .4em;
  padding-right: .4em;
}

button {
  border: none;
  border-radius: 5px;
  background-color: #cdcdcd;
  color: #ffffff;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: var(--font);
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
button:hover { 
  background-color: #7e7e7e;
  animation: buttonHover 0.5s ease-in-out;
}

button#share, button#pwa {
  font-size: 1em;
  padding: 14px;
  border-radius: 1em;
  background-color: var(--color2);
}
button#share {
  position: fixed;
  bottom: 1em;
  left: 1em;
}
button#pwa {
  position: fixed;
  bottom: 1em;
  left: 5em;
}

button::before { content: "➤ "; color: white; }
button#share::before, button#pwa::before { content: ""; }
button:hover:before { color: #dcdcdc; }
button#discord { background-color: #7d4fe7; }
button#discord:hover { background-color: #8468c5; }
button#github { background-color: #5c5c5c; }
button#github:hover { background-color: #717171; }
button#twitter { background-color: #00e1ff; }
button#twitter:hover { background-color: #6beff1; }
button#email { background-color: #ffd700; }
button#email:hover { background-color: #f9ff86; }

fieldset { 
  border: none;
  border-radius: 5px;
  background-color: #000000;
  padding: 10px;
  margin: 10px;
}
legend { 
  color: var(--color2);
  font-weight: bold;
  font-size: 1.5em;
}

::-webkit-scrollbar { width: 15px; }
::-webkit-scrollbar-track {
  background: #303030;
  border: 1px solid var(--color1);
  border-radius: 20px;
}
::-webkit-scrollbar-thumb {
  background: #404040;
  border: 2px solid #ffffff56;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: #555; }

@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(10px);
  }
  to { 
    opacity: 1; 
    transform: translateY(0px);
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes hover {
  from {
    background: none;
    padding: 0;
  }
  to {
    background: #68686881;
    padding: .2em;
    padding-left: .4em;
    padding-right: .4em;
  }
}

@keyframes buttonHover {
  0% { transform: translateY(0); }
  25% { transform: translateY(10px); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

@keyframes glow {
  from {
    background: #2e2e2e;
  }
  to {
    background: var(--color1);
  }
}

@media screen and (max-width: 900px) {
  div#pg {
    display: block;
  }
  body {
    display: block;
    padding: 0;
  }
  spacer {
    display: block;
  }
  img.skills { width: 5em; }
  p { text-align: center; }
  div.info {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}