:root {

  --white: #fffdfd;
  --dark_purple: #5f1da2;
  --light_purple: #9c7aea;
  --pink: #e92ef9;
  --blue: #1c87f9;

}

@font-face {
  font-family: "Action Is";
  src: url(../fonts/actionis.ttf);
}

/*Phones*/

@media (max-width: 819px) {

  .container {

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 95%;
    grid-gap: 0.5em;
    max-width: 100%;

  }

  .divider {

    margin: auto;
    margin-left: 1em;
    width: 40%;

  }

  h3 {

    font-size: 2em;

  }

  nav li {

    border-bottom: none;

  }

  .aside_title {

    font-size: 1.4rem;

  }

  .aside_navigation ul {

    padding-left: 1em;
  }

  nav > img {

    width: 80%;

  }

  .flex_container {

    justify-content: center;

  }

  .aside_gif {

    display: none;

  }

}

/*Tablets*/

@media (min-width: 820px) and (max-width: 1432px) {

  .container {

    display: grid;
    grid-template-columns: 1.1fr 2fr 1.1fr;
    grid-template-rows: auto auto auto;
    grid-gap: 1em;
    width: 80%;

  }

  .flex_container {

    justify-content: center;

  }

  .divider {

    margin: 0 auto;

  }

  .post_content {

    padding: 0.2em 1em;

  }

  .title > img {

    width: 90%;

  }


.aside_title {

  font-size: 1.5rem;

  }

.aside_navigation ul {

    padding-left: 0;
    
  }

  nav li {

    border-bottom: 2px solid var(--dark_purple);

  }

  #site_buttons {

    padding-left: 0;

  }

}

/*PCs*/

@media (min-width: 1400px) {

  .container {

    display: grid;
    grid-template-columns: 0.8fr 1.5fr 0.8fr;
    grid-template-rows: auto auto auto;
    grid-gap: 1.5em 2em;
    width: 90%;

  }

  .divider {

    margin: 0 auto;

  }

  .post_content {

    padding: 0.2em 2.5em;

  }

  .title > img {

    width: 100%;

  }

  .aside_title {

    font-size: 1.5rem;

  }

  .aside_navigation ul {

    padding-left: 0;
    
  }

  #site_buttons {

    padding-left: 1em;
  
  }

  nav li {

    border-bottom: 2px solid var(--dark_purple);

  }

}

/*General use*/

body {

  max-width: 1500px;
  margin: 0 auto;
  font-family: 'Courier New', Courier, monospace;
  

}

.container {

  

  height: fit-content;
  margin: 0 auto;

}

.divider {

  display: block;

}

.flex_container {

  display: flex;
  flex-flow: row wrap;
  align-items: center;
  margin-top: 0.5rem;
  width: fit-content;

}

section div {

  scrollbar-width: thin;
  scrollbar-color: var(--dark_purple) var(--white);

}

.scroll_frame {

  max-height: 13em;
  overflow-y: auto;

}

.scroll_frame_small {

  max-height: 10em;
  overflow: auto;  

}

.aside_title {

  margin: 0 0.5em 0.2em 0;
  color: var(--white);
  text-shadow:
    -0.05em -0.05em 0 var(--dark_purple),  
     0.05em -0.05em 0 var(--dark_purple),
    -0.05em  0.05em 0 var(--dark_purple),
     0.05em  0.05em 0 var(--dark_purple);
}

.aside_right_content, main > section, nav, .aside_left_content, #connections > section {

  border: 4px solid var(--dark_purple);

}

h1, h2 {

  font-family: "Pixelify Sans", sans-serif;
  color: var(--white);
  text-align: center;
}

h1 {

  font-size: clamp(3em, 9vw, 4em);
  margin: 0.3em auto 0.3em 0.5em;
  font-optical-sizing: auto;
  font-weight: 700;
  text-shadow: -3px 3px var(--dark_purple), -6px 6px var(--dark_purple);
  -webkit-text-stroke: 2px var(--dark_purple);
}

h2 {

  font-size: min(9vw, 3.5em);
  font-weight: 400;
  color: var(--pink);
  text-shadow: -3px 3px var(--dark_purple), -6px 6px var(--blue);
  -webkit-text-stroke: 0.5px var(--dark_purple);

}

h3 {

  font-family: "VT323", monospace;
  font-weight: 400;
}

h2, h3 {
  margin-bottom: 0;
  margin-top: 0;
}

.marquee ul, .aside_left ul, .aside_right ul, .aside_navigation ul {

  list-style: none;

}

hr {

  color: var(--blue);

}

/*header*/

header {

  grid-area: header;
  margin-top: 30px;

}

.name {

  background-image: url(../images/backgrounds/bg_header.gif);
  background-repeat: repeat;
  border: 2px solid var(--dark_purple);

}

/*Navigation*/

nav > h3 {

  padding-left: 1rem;

}

nav li {

  font-size: 0.8em;

}

nav li:last-child {

  border-bottom: none;

}

nav a {

  display: block;
  padding: 0.5em min(0.5vw, 1rem);
  color: var(--white);

}

nav a:hover {

  background-image: url(../images/backgrounds/bg_nav.gif);
  background-repeat: repeat;
  font-size: 1.3em;
  font-weight: bold;
  color: var(--dark_purple);

}

nav > ul img {

max-width: 0.8em;
min-width: 0.8em;

}

/*Main*/

.post {

  height: fit-content;
  background-color: var(--white);

}

.title {

  margin: 1em auto auto auto;
  width: fit-content;
  text-align: center;
}

.post_content {

  margin: 1em;
  font-size: min(2.6vw, 0.9em);
  font-family: 'Courier New', Courier, monospace;
  line-height: 120%;
  color: var(--dark_purple);

}

/*Left side*/

.aside_left {

  grid-area: aside_left;

  /*its own grid*/
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: max-content;
  
  grid-gap: 1em;
}

.aside_navigation ul {

  margin: 0 auto;

}

nav.aside_navigation, .aside_left_content {

  padding-top: 1em;
  background-color: var(--light_purple);

}

.aside_left_content {

  height: fit-content;
  padding-bottom: 1.5em;

}

#cliques a:link, #cliques a:hover, #cliques a:active, #cliques:a visited, .aside_right_content a:link {

  color: var(--white);

}

/*Aside right*/
.aside_right {

  grid-area: aside_right;

  /*its own grid*/
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: max-content;
  grid-gap: 1em;
}

.aside_right_content {

  background-color: var(--light_purple);
  padding: 1em 1em 1.5em 1em;
  height: fit-content;

}

.aside_right_content ul {

  margin-top: 0;
  margin-bottom: 0.5em;
  line-height: 1.5em;

}

.aside_right_content ul img {

  height: 1.2em;
  width: auto;

}

.currently {

  display: block;
  margin: 0 1.5em 0 auto

}

.aside_left_content, .aside_right_content {

  font-size: 0.8em;

}

/*Footer*/

footer {

  grid-area: footer;

}