@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,200,1,200');

/* Generllt */
html {
  background-color: #1e272e;
  background-size: 150%;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}

h1 {
  color: #f53b57;
  font-family: 'Roboto Slab', serif;
  font-size: 5em;
  margin-bottom: 0.1%;
  padding-left: 5%;
}

h2 {
  color: #fff;
  font-family: 'Roboto Slab', serif;
  font-size: 1em;
  padding-left: 6%;

}

h3 {
  color: #f53b57;
  font-family: 'Roboto Slab', serif;
  font-size: 2em;
  padding-left: 6%;
}


/* Profilinfo */

#main {
  border: dashed 0px #485460;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 80%;
  margin: auto;
  margin-top: 5%;
  margin-bottom: 5%;
  padding: 0,5%;
  width: 98%;
}

#info {
  flex-grow: 3;
  order: 1;
  width: 50%;
}

#profile {
  flex-shrink: 1;
  order: 3;
  width: 50%;
}

#links {
  margin-left: 6%;
  margin-top: 5%;
}

.profil {
  height: auto;
	width: 60%;
	border-radius: 50%;
}

.svg-link {
  width: 5em;
  height: auto;
  filter: invert(4);
}

.svg-link:hover {
filter: invert(0.18) sepia(1) saturate(7) hue-rotate(306deg) brightness(0.96);
}

.material-symbols-outlined {
  font-variation-settings:'FILL' 1,'wght' 200,'GRAD' 200,'opsz' 48;
  color: #fff;
  font-size: 6em;
}

.material-symbols-outlined:hover {
  color: #f53b57;
}

/* CONTENT */
#content {
  padding: 1em;
  margin-top: 5%;
  order: 5;
  width: 60%;
  color: #f3f3f3;
}

#content ul, b, a {
  color: #f3f3f3;
  font-family: 'Roboto Slab', serif;
  font-size: 1em;
  padding-left: 6%;
  text-decoration: none;
}

#content b, a:hover {
  color: #474787;
  font-family: 'Roboto Slab', serif;
  font-size: 1em;
  padding-left: 6%;
  text-decoration: none;
}

.single-metadata {
  font-size: 0.8em;
  color: #ff5252;
  text-align: right;
  margin-bottom: -40px;
}

.index-metadata {
  font-size: 0.8em;
  color: #ff5252;
  text-align: right;
}

p img {
  float: right;
  margin: 15px;
  max-width: 300px;
  min-width: 10px;
  border: 5px solid #FFC048;
  box-shadow: 5px 5px 1px #474787;
}

.index-post, .single-post-content {
  text-align: left;
  background-color: #2a363e;
  box-shadow: 5px 5px 1px #40515c;
  margin-top: 50px;
  margin-bottom: 3%;
  padding: 2%;
  transform: rotate(1deg);
  margin: auto;
}


.post-content-index {
  text-align: left;
}

.single-metadata a, .metadata a:visited {
  color: #474787;
  text-decoration: none;
  font-weight: bold;
}

.single-metadata a:hover {
  color: #474787;
}

.index-metadata a, .metadata a:visited {
  color: #ff5252;
  text-decoration: none;
  font-weight: bold;
}

.index-metadata a:hover {
  color: #474787;
}