/* Design system */

h1 {
  font-size: 3rem;
  font-family: "Pixelify Sans", sans-serif;
  font-weight: 400;
  margin: 15px;
  line-height: 40px;
  text-decoration: none;
}

h2 {
  font-size: 2rem;
  font-family: "Pixelify Sans", sans-serif;
  font-weight: 400;
  margin: 0px;
  text-decoration: none;
}

h3 {
  font-size: 1.5rem;
  font-family: "Pixelify Sans", sans-serif;
  font-weight: 400;
  text-decoration: none;
  margin: 0px;
}

p {
  font-family: "Roboto Mono";
  font-size: 1rem;
}

hr {
  border: none;
  border-bottom: #030029 dotted;
  margin-bottom: 20px;
}

a {
  text-decoration: none;
  color: black;
}

li {
  font-family: "Roboto Mono";
}

table {
  font-family: "Roboto Mono";
  border-collapse: collapse;
  margin: 30px;
  width: 100%;
}

td,
th {
  border: 1px solid #000000;
  padding: 15px;
  background-color: #eeeeee;
}

th {
  padding: 15px;
  text-align: left;
  background-color: #260954;
  color: white;
}

.link {
  font-weight: 500;
}

.link:hover {
  text-decoration: underline;
}

.text-block {
  margin: 15px;
}

.text-block>p {
  margin: 0px;
}

.second-text-block {
  background-color: #bac7df;
  padding: 10px;
  border-radius: 8px;
}

.icon {
  max-width: 22px;
  margin-right: 5px;
}

.background {
  background-image:
    url('https://sadhost.neocities.org/images/tiles/stars.gif');
  max-height: 1080px;
  max-width: 100%;
}

/* Container */

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 0.9fr 1.1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 1fr 1fr 0.2fr;
  grid-auto-columns: 1fr;
  gap: 20px 20px;
  margin: 40px 250px 40px 250px;
  grid-auto-flow: row;
  grid-template-areas:
    "Logo Logo Logo . Navbar Navbar Navbar Navbar Navbar Navbar"
    "Profile Profile Profile Content Content Content Content Content Content Content"
    "Links Links Links Content Content Content Content Content Content Content"
    "Counter Counter Counter Footer Footer Footer Footer Footer Footer Footer"
}

.content-container {
  grid-area: Content;
  background-color: #D9D9D9;
  border-radius: 15px;
  align-items: left;
  padding: 22px 22px 22px 22px;
  border-radius: 15px;
  max-height: 550px;
}

.row {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
}

/* Logo */

.logo-container {
  grid-area: Logo;
}

.logo {
  max-width: 150px;
  margin: 5px;
}

/* Navbar */

.navbar-container {
  grid-area: Navbar;
  background-color: #D9D9D9;
  border-radius: 15px;
  margin: 0px;
}

.navbar {
  list-style: none;
  display: flex;
  justify-content: space-around;
  padding: 0px;
  margin: 5px;
}

.navbar>li {
  margin: 15px;
}

.menu:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* Profile */

.profile-container {
  grid-area: Profile;
  background-color: #D9D9D9;
  padding: 22px 22px 22px 22px;
  border-radius: 15px;
  max-height: 250px;
}

.profile-picture {
  height: 150px;
  border-radius: 8px;
}

.profile-text {
  margin-left: 15px;
  display: flex;
  line-height: 25px;
}

.tags-container {
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  flex-wrap: wrap;
  margin-top: 10px;
}

.tags-container>p {
  list-style: none;
  background-color: #030029;
  color: #FFFFFF;
  text-align: center;
  border-radius: 8px;
  padding: 4px 12px 4px 12px;
  margin: 5px;
}

/* Links */

.links-container {
  grid-area: Links;
  background-color: #D9D9D9;
  border-radius: 15px;
  align-items: left;
  padding: 22px 22px 22px 22px;
  border-radius: 15px;
  max-height: 250px;
}

.link-row {
  display: flex;
  flex-direction: row;
}

.link-row a>p {
  margin: 10px;
}


/* Counter */

.counter-container {
  grid-area: Counter;
  background-color: #1b199d;
  border-radius: 15px;
  margin: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.counter-container > p, span {
  color: #ffffff;
}

.counter {
  font-weight: 600;
}


/* Footer */

.footer-container {
  grid-area: Footer;
  background-color: #D9D9D9;
  border-radius: 15px;
  max-height: 100px;
  margin: 0px;
}

.footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
}

/* Iframe */

.iframe {
  height: 100%;
  width: 100%;
  background-color: #D9D9D9;
}

/* Gamedev */

.game-collection {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.gamecard {
  margin: 10px;
  filter: drop-shadow(16px 16px 10px rgba(0, 0, 0, 0.585))
}

.gamecard:hover {
  transform: rotate(5deg);
}

.game-header {
  max-height: 150px;
  background-color: #8ccdff71;
  padding: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;
  gap: 25px;
  border-radius: 15px;
}

.game-section {
  background-color: #8e8cff71;
  padding: 20px;
  display: flex;
  gap: 25px;
  align-items: center;
  justify-content: left;
  border-radius: 15px;
  justify-items: flex-start;
}

.game-detail {
  text-align: left;
}

.game-detail>h2 {
  margin-bottom: 10px;
}

.game-detail>p {
  margin-top: 0px;
  line-height: 10px;
  margin-left: 15px;
}

.game-picture {
  width: 33%;
  border-radius: 10px;
}

/* Blog */

.blog-text-block {
  background-color: #c9d6ed;
  padding: 30px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.blog-text-block div>hr {
  padding-top: 10px;
  max-width: 300px;
  margin-left: 0px;
}

.blog-header {
  display: flex;
  align-items: center;
  gap: 15px;
}

.blog-tags {
  font-family: "Pixelify Sans", sans-serif;
}

.blog-date {
  font-family: "Roboto Mono";
  font-size: 20px;
  margin: 0px;
}

.blog-text {
  font-weight: 500;
  font-size: 18px;
  margin: 0px;
}

/* Music */

.music-section {
  display: flex;
  flex-direction: column;
  justify-content: left;
}

.music-box {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}

.music-box div>h2 {
  margin: 15px 0px;
}

.artist-picture {
  width: 45px;
  border-radius: 50%;
}

.artist {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  border-radius: 4px;
  width: 250px;
}

.music-inner-box {
  display: flex;
  flex-wrap: wrap;
}