/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght,MONO@0,300..800,1;1,300..800,1&display=swap');

.google-sans-code-neocity {
  font-family: "Google Sans Code", monospace;
  font-weight: 300;
  font-style: normal;
}


@font-face {
  font-family: 'Gaz';
  src: url('./Gaz-400.ttf') format('truetype');
}

/* Overall elements */

a {
  color: #24273a; 
}

.shadow {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

* {
  box-sizing: border-box;
}

html,body {
  margin: 0;
  padding: 0;
  background-color: #050305;
  font-family: 'Google Sans Code';
  background-image: url("/resources/brain.svg");
  background-repeat: repeat repeat;
  background-size: 35em;
}

/* Header elements */
header {
  background-color: rgba(0,0,0,0.5);
  font-family: "Gaz";
}

.header-nav {
  font-size: 1.2rem;
  display: flex;
  justify-content: center;
  width: 100%;
}

.header-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 0.5em;
}

.header-nav li {
  position: relative;
}

.header-nav a {
  display: flex;
  padding: 0.5em 2.5em;
  color: #A277FF;
  background-color: rgba(0,0,0,0,.9);
  text-decoration: none;
  justify-content: center;
  align-items: center;
}

.header-nav a:hover {
  background: linear-gradient(45deg, #371184BB, #8471DCBB);
  font-weight: bolder;
}

.header-nav ul .dropdown {
  display: none;
  position: absolute;
  background-color: rgba(0,0,0,0,0.15);
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  z-index: 1000;
  padding: 0;
}

.dropdowntrigger:hover .dropdown {
  display: block;
  width: 100%;
  text-align: center;
}

.dropdown-arrow {
  font-size: 0.8em;
}

.site-title {
  border-top: 1px dashed white;
  border-bottom: 1px dashed white;
  color: #A277FF;
  text-align: center;
  margin: 1px;
  font-size: 2em;
}

/* Body elements */
.container {
  display: flex;
  gap: 20px;
  padding: 0 20px;
  margin: 20px auto;
}

.sidebar, .badge-sidebar {
  width: 250px;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  background-color: #8471DCF5;
  color: whitesmoke;
  padding-bottom: 20px;
}

.badge-sidebar img {
  width: 125px;
  height: auto;
}

.content {
  margin: 20px 20px;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.column .sidebar {
  flex-grow: 1;
}

.main-content {
  flex: 1;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 20px;
  background-color: #8471DCF5; 
  color: whitesmoke;
}

.sidebar h3::after,
.sidebar h2::after, 
.sidebar h1::after,
.main-content h1::after {
  content: "";
  display: block;
  width: 80%; 
  border-bottom: 1px solid #414868;
  margin-top: 5px; 
}

.wrapper { 
  display: grid;
  grid-template-columns: repeat(4, 200px);
  row-gap: 1em;
  column-gap: 1em;
  place-self: center;
}

.container-link {
  flex: 1;
  float: left;
  border: 1px solid #414868;
  border-radius: 20px;
  padding: 20px;
  text-decoration: none;
  text-align: center;
}

.container-link:hover {
  background-image: linear-gradient(to bottom, #8471DCF0, #A277FFE0);
}

.container-link img {
  height: 50px;
  width: auto;
}

.sidebar ul, .badage-sidebar ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.sidebar li, .badge-sidebar li {
  display: inline;
  padding-left: 14px;
}

@media (max-width: 900px) {
  .container {
      flex-direction: column;
  }

  .sidebar {
      width: auto;
  }
}

h1,h2,h3 {
  font-family: 'Gaz';
}

figure {
    display: inline-block;
}

figcaption {
  font-variant: small-caps;
  font-size: 10px;
}

/* Footer elements */

footer {
  flex: 1;
  border-radius: 20px;
  max-height: 10px;
  justify-content: center;
  margin: 20px 20px;
  text-align: center;
}

.footer-img-l {
  width: 150px;
  height: auto;
  z-index: 10;
  position: fixed;
  opacity: .75;
  bottom: 0;
  left: 0;
  transition: 0.75s;
}

.footer-img-l:hover {
  transform: scale(1.5, 1.5);
  transform-origin: bottom left;
  transition: 0.75s;
  opacity: 1;
}


/*body::before {
    content:
      "       _.====.._\A"
      "     ,:._       ~-_\A"
      "         `\\        ~-_\A"
      "           | _  _  |  `.\A"
      "         ,/ /_)/ | |    ~-_\A"
      "-..__..-''  \\_ \\_\\ `_      ~~--..__...----...\A";


    white-space: pre;
    font-family: monospace;
    color: white;

    position: fixed;
    z-index: -1;
    overflow: hidden;
}*/