/*Landing page stuff, styles for landing page probably moved to a seperate file at some point*/
body {
  /*I like grid :)*/
  display: grid;
  grid-template-columns: 30% auto;
  grid-gap: 2%;
  color: #E0ECFF;
  font-size: 24px;
  background-image: url("bg/bg-star-tiles.png"), linear-gradient(to bottom, #2C2B36, #211D4D);
  background-attachment: scroll, fixed;
  background-repeat: repeat, no-repeat;
  padding: 0px 5%;
  font-weight: 400;
}

.nav-bar {
  display: flex;
  flex-direction: row;
  background-color: #6266E0;
  border-radius: 10px;
  margin: 10px 25px;
}

.nav-bar a {
  padding: 5px 20px;
  background-color: #6266E0;
}

.nav-bar a:hover {
  background-color: #7384f5;
}

.banner-image {
  max-width: 100%;
  height: auto;
}

.profile-image {
  object-fit: contain;
  max-width:100%;
  margin:10%;
  background-image:url('data:image/svg+xml,<svg viewBox="0 -30 200 200" xmlns="http://www.w3.org/2000/svg"><path fill="%236266E0" d="M35.1,-40C49.5,-29.8,67.8,-22.5,72.5,-10.6C77.2,1.3,68.2,17.7,56.5,27.6C44.8,37.5,30.4,40.8,17.1,44.8C3.7,48.7,-8.6,53.1,-21.9,51.9C-35.2,50.7,-49.5,43.8,-57.4,32.2C-65.2,20.6,-66.7,4.3,-66.4,-14.3C-66.2,-32.8,-64.3,-53.6,-53,-64.4C-41.7,-75.1,-20.8,-75.7,-5.2,-69.4C10.4,-63.2,20.8,-50.2,35.1,-40Z" transform="translate(100 100)" /></svg>');
}

.panel-container {
  display:flex;
  flex-direction: column;
  background-color: #6266E0;
  border-radius: 10px;
  padding: 5px 20px;
  margin: 10px 25px;
}

.panel-horizontal {
  flex-direction: row;
  background-color: #6266E0;
  border-radius: 10px;
  padding: 5px 20px;
  margin: 10px auto;
}

/*OVERWRITING STUFF!!*/

footer {
  min-width: 100%;
  grid-column: 1 / span 3;
  padding:10px;
  border-radius: 10px;
  text-align: center;
  background-color: #6266E0;
}

a {
  color: #F29B8A;
  text-decoration: underline solid transparent;
  transition: text-decoration 0.3s ease;
}
a:visited, a:active {
  color: #DB7162;
}
a:hover {
  color: #FFDECE;
  text-decoration: underline solid Currentcolor;
}

strong {
  color: #61E8D7;
  font-weight: bold;
}

h1 {
  color: #61E8D7;
  font-weight: bolder;
  font-size: 48px;
  text-transform: uppercase;
  padding: 20px 0px;
}

p {
  padding: 10px 20px;
}

/*ID thingys*/

@media (width > 64rem) {
  #bio-column {
    display: flex;
  }
  body {
    grid-template-columns: 30% auto;
  }
}

@media (width <= 64rem) {
  #bio-column {
    display: none;
  }
  body {
    grid-template-columns: auto;
  }
}