/*                                     __                             
this code is free to use! please credit me if you're asked where the code comes from, but backwise go
wild o7

thanks for checking it out!
made with love by angel

---------- contact ----------
email: angelnetcast at protonmail dot com
main site: https://angelscake.neocities.org/
layout site: https://angelslayouts.neocities.org/
*/

/* ------------------------ COLOR VARIABLES AND FONTS ------------------------ */
:root {
  --bg: #220d30;
  --accent: #73618f;
  --light: #AA9EBD;
  --blue: #61668F;
  --dark: #0C0A0F;
}

@font-face {
  font-family: poppins;
  src: url(Poppins-Regular.ttf);
}

html >::after {
    content: "";
    background-image: url("img/noise.png");
    opacity: 0.07;
    filter: grayscale(30%);
    position: fixed;
    pointer-events: none;
    inset: 0;
    z-index: 200;
    image-rendering: pixelated;
}

body {
  background-color: var(--bg);
  font-family: monospace;
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  color: white;
}
/* ------------------------ HTML AND BODY DESIGN ------------------------ */
/* --- images --- */
img {
  width: 200px;
}

img.ships{
  width: 130px;
  float: right;
}

/*  border-bottom: 6px solid var(--accent); */

img.shadow{
  
  /* 61668F-blue  #383046-dark p 0C0A0F-black  C2B9CF-light */
  /* 1- right  2-left 3-top r  4-top l      */

  filter: drop-shadow(4px 5px 0 #0C0A0F) drop-shadow(-2px 4px 0 #383046) drop-shadow(3px -3px 0 #61668F) drop-shadow(-3px -4px 0 #C2B9CF);
}

/* --- text --- */
.title {
  font-size: 34px;
  font-weight: bold;
}

.accenttitle{
  color: var(--blue);
  text-shadow: 1.5px 1px var(--dark);
}

h1 {
  font-weight: bold;
  margin-top: 0px!important;
}

/* --- link color attributes --- */
a {
  color: var(--accent);
}

a:hover{
  background-color: var(--light);
  color: var(--dark);
}

/* --- emphasis --- */
i {
  color: var(--accent);
}

mark {
  background-color: var(--accent);
  color: var(--bg);
}

hr {
  border-color: var(--light);
  border-style: solid;
}

/* ------------------------ GRID LAYOUT ------------------------ */
.grid-container {
  display: grid;

  grid-template-areas:
    "back back back back"
    "icon title title title"
    "links links links links"
    "info1 info1 info1 info1"
    "info2 info2 info2 info2"
    "xinfo xinfo xinfo xinfo"
    "images images images images"
    "more more more more";
}

.grid-container > div {
  padding: 15px;
}

/* --- G1 // back --- */
.g1 {
  grid-area: back;
}

/* --- G2 // icon --- */
.g2 {
  grid-area: icon;
  text-align: center;
}

/* --- G3 // title --- */
.g3 {
  grid-area: title;
}

/* --- G4 // links --- */
.g4 {
  grid-area: links;
  text-align: center;
  border: 1px solid var(--accent);
}

/* --- G5 // info --- */
.g5 {
  grid-area: info1;
}

/* --- G6 // info --- */
.g6 {
  grid-area: info2;
}

/* --- G7 // about/extra info --- */
.g7 {
  grid-area: xinfo;
}

/* --- G8 // images --- */
.g8 {
  grid-area: images;
}

/* --- G9 // more 1 --- */
.g9 {
  grid-area: more;
}

/* --- G10 //  --- */
.g10 {
  grid-area: more2;
}

/* ------------------------ back CLASSES ------------------------ */
.links {
  padding: 5px;
  margin: 20px;
}

.previewcontainer {
  text-align: center;
}

.previewimg {
  padding: 3px;
}

#asciimask{
  position: fixed;
  top: -20px;
  left: -400px;
  font-size: 9px;
  line-height: 1.7em;

  z-index: -10;
  color: var(--accent);
}

#asciimog{
  position: fixed;
  top: 65px;
  left: -100px;
  font-size: 5.5px;
  line-height: 1.4em;

  z-index: -10;
  color: var(--accent);
}

#asciihang{
  position: fixed;
  top: -10px;
  left: -10px;
  font-size: 5px;
  line-height: 1.35em;

  z-index: -10;
  color: var(--accent);
}

#asciiswing{
  position: fixed;
  top: -500px;
  right: 20px;
  font-size: 7px;
  line-height: 1.4em;

  z-index: -10;
  color: var(--accent);
}

#asciistand{
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 3.7px;
  line-height: 1.3em;

  z-index: -10;
  color: var(--accent);
}

#asciipull{
  position: fixed;
  bottom: -10px;
  right: 0px;
  font-size: 7px;
  line-height: 1.3em;

  z-index: -10;
  color: var(--accent);
}

#asciifixed{
  position: fixed;
  bottom: 0px;
  right: -40px;
  font-size: 4px;
  line-height: 1.3em;

  z-index: -10;
  color: var(--accent); 
}

#asciinervous{
  display: none;
}

.back{
  padding: 3px;
  background-color: var(--blue);
  color: white;
}

.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

/* ------------------------ mobile ------------------------ */
@media screen and (max-width: 420px){
  
  body{
    width: 380px;  
    }

  .title{
    font-size: 20px;
    z-index: 11;
    text-shadow: -1px 1px var(--bg);
  }

  .subtitle{
    font-size: 10px;
    z-index: 11;
    text-shadow: -1px 1px var(--bg);
  }

  .accenttitle{
    font-size: 10px;
    z-index: 11;
    text-shadow: -1px 1px var(--bg);
  }
  
  .links {
    margin: 5px;
  }

  .g2 {
    text-align: left;
    width: 90px;
    z-index: -1;
    padding: 0px!important;
  }

  .g3{
    text-align: right;
  }

  .stop{
    display: none;
  }

  #asciiswing{
    font-size: 3.5px;
    top: -200px;
    left: -50px;
  }

   #asciipull{
    font-size: 3px;
    bottom: 0px;
    right: 0px;
  }

  #asciinervous{
    display: inherit;
    position: fixed;
    bottom: -10px;
    left: 0px;
    font-size: 4px;
    line-height: 1.3em;

    z-index: -10;
    color: var(--accent);
  }

}