<style>

@font-face{
	font-family:'vicmonolight';
	src:url(https://heck.computer/fonts/vicmonolight.otf)
}
@font-face{
	font-family:'vicmonolightit';
	src:url(https://heck.computer/fonts/vicmonolightit.otf)
}

.split-screen {
    display: flex;
      font-size: 9px;
    font-family: verdana;
    padding: 0px;
   text-align: center;
    
}

.split-screen__half {
    flex: 1;
}

.same-height-columns {
    display: flex;    
    margin-left: 10px;
    margin-right: 10px;
}

.same-height-columns__column {
    flex: 1;
    /* Space between columns */
    margin: 0 10px;

    /* Layout each column */
    display: flex;
    flex-direction: column;
    border: 1px solid white;
    padding: 35px;
    margin-bottom: 50px;
    margin-top: 10px;
    background-color: #111111;
    border-radius: 100px;
filter: drop-shadow(#333 -5px 0px 0px);
}

.same-height-columns__content {
    /* Take available height */
    max-width: 150px;
    flex: 1;
}


* {
scrollbar-color: #666 transparent;
image-rendering:pixelated; 
font-smooth: unset;
}

body {
  margin: 0;
  padding: 0;
  color: #ccc;
  background: #111;
  font-size: 13px;
  font-family: garamond;
  }
  
a {
  color: #c1cdf1; 
  }
  
p {
  line-height: 150%;
  }
  
/*Set font for headings.*/
h1, h2, h3 {
  text-align:center;
  font-family: garamond;
  letter-spacing: 1px;
  word-spacing: 3px;
  font-weight: 100;
  line-height: 1px;

  }

h2::first-letter {
  color: #fff;
  font-weight: 100;
    font-size: 36px;
    font-style: normal;
        line-height: 24px;

  }

h3::first-letter {
  color: #fff;
  font-weight: 100;
    font-size: 16px;
    font-style: italic;
    margin-right: 2.5px;
    line-height: 16px;
    background-color: transparent;
}
  
h1 {
  font-size: 2.325em;
font-weight: 100;
  } 

h2 {
        font-style: oblique;
    letter-spacing: -.69px;
    font-size: 20px;
}
  
/*h3 is left-aligned and indented.*/
h3 {
  text-align: left;
  font-size: 14px;
line-height: 16px;
  }

.enter a:link {
    font-size: 16px;
    font-family: garamond;
    font-style: oblique;
    color: #ffffff;
    letter-spacing: 1px;
    text-decoration-style: wavy;
}
.enter a:visited {
    font-size: 16px;
    font-family: garamond;
    font-style: oblique;
    color: #ffffff;
    letter-spacing: 1px;
    text-decoration-style: wavy;
}
.enter a:hover {
    font-size: 16px;
    font-family: garamond;
    font-style: oblique;
    color: #ffffff;
    letter-spacing: 1px;
    text-decoration-style: double;
}
  
/*Change color when bold or italic.*/
b {
  color: #aae6ff;
  }
  
i {
  color: #cdf0ff;
  }
  
hr {
  border-bottom: 1px solid #999;
  border-top: 1px solid #999;
 border-right: 1px solid #999;
    border-left: 1px solid #999;
  background: #000 url("https://heck.computer/images/stardust.png") repeat;
background-size: 300px;
  height:10px;
    background-position: center; 
    margin: 1em 1em;
  }
  
blockquote {
  font-style:italic;
  border-left: 1px solid #aae6ff;
  background: rgb(170,230,255,0.15);
  padding: 5px 20px;
  }
  

/***

NOTE: This stylesheet uses elements instead of div classes in a few places (nav1, nav2). 
If you want to use them as classes, put "." in front of all the custom element names in the stylesheet here.
For example: nav1 .navlink {} would be .nav1 .navlink {} instead.

***/

/*Content all goes in here.*/
.wrapper {
  display: block;
  margin: 0 auto;
  width: 800px;
  position:relative;
border-style: solid;
border-width: 1px;
border-color: #555;
  filter: drop-shadow(#222 -9px -9px 0px);}
  
.header {
  display: block;
  background: linear-gradient(rgb(17,17,17,0), rgb(17,17,17,1)), url("https://heck.computer/images/stardust.png") repeat;
  background-size: 900px auto;
  height:100px;
  top: 0;
border: 0px solid #777;

  }
  
.header h1 {
  font-size: 28px;
  text-transform:lowercase;
  padding-top: 80px;
  font-weight: 100;
  }
  
.header h1::first-letter {
  color: #fff;
  }
  
/*Puts "[]" around the title.*/
.header h1:before {
  content: "˖.・";
  font-size: 20px;
  }
  
.header h1:after {
  content: "・.˖";
  font-size: 20px;
  }
  
  
nav1 {
  display: block;
  position: absolute;
  float: right;
  margin-left: 800px;
  top: 100px;
  }
  
nav1 .navlink {
  display: block;
  margin: 15px 0px;
  padding: 5px 2px;
  width: 100px;
  text-align: center;
  background: #000;
  font-family: garamond;
  font-size: 1.5em;
  text-transform: uppercase;
  border-radius: 0 15px 5px 0px;
  }
  
nav1 .navlink a {
  color: #fff;
  text-decoration: none;
  }

nav1 .navlink:hover, nav1 .navlink:focus-within {
  background: #000;
  padding-left:5px;
  transition:ease 0.5s; /*So the tab button appears to 'move' instead of instantly changing and popping outwards.*/
  }
  
/*Nav2 is for the links directly below the header.*/
nav2 {
  display: block;
  width: 100%;
  background: #111;
  text-align: center;
border: 0px solid #777;
    font-size: 13px;
    font-style: italic;
    font-weight: 100;
    font-family: garamond;
    letter-spacing: 1px;
    line-height: 25px;
  }
  
nav2 .navlink {
  display: inline-block;
  margin: 10px 5px;
  padding: 2px;
  font-size: 1.5em;
  text-decoration:none;
  font-family: garamond;
  font-weight:lighter;
  }
  
nav2 .navlink a {
  color: #fff;
  text-shadow: 0 0 2px #c3cdea; 
  }
  
nav2 .navlink a:hover, nav2 .navlink a:focus {
  text-shadow: 0 0 3px #dae1f5;
  transition: ease 5s;
  }
  
/*Main page content goes in here. (Replace the image with your own footer image.)
  The rgb color in the linear-gradient here should match your actual main div background color, so the image
  appears to 'fade in' from the image to solid background. */
.main {
  display: block;
  margin: 0;
  position: relative;
  /*In order: gradient overlay (opacity going from 1 to 0.875), actual background color, footer image*/
  background: linear-gradient(rgb(17,17,17,1), rgb(17,17,17,0)), url("https://heck.computer/images/stardust.png") no-repeat; /*REPLACE ME!*/
  background-size: 900px auto;
  background-position:bottom center;
  }
  
/*Inside div. I don't remember why this was a div and nothing else, but it is. 
  If you do change that, remember to add display:block; to the element first.*/
.inner {  
  padding: 1px 0px 0px 0px; /*The 1px is to prevent paragraph margin overflow from mucking up the background. CSS is weird sometimes.*/
  }
  
/*Prevent image overflow.*/
.inner img {
  max-width: 100%;
  height:auto;
  }
  
/*Footer with small text at the bottom of the page.*/
.footer {
  display: block;
  padding: 0.75em 20px;
  text-align: center;
  font-size: 0.85em;
  background: #111;
  line-height: 150%;
  }
  
.footer a {
  color: #dfdfdf;
  }
  
  
  
/***

For narrower screens that can't handle the full version of the page.

***/

/*For desktop screens that are too narrow for the default width, keep the default layout, but with a narrower column.*/
@media(max-width:1050px) {
  .wrapper {
    width: 600px;
    }
  nav1 {
    margin-left:600px;
    }
  }

/*For smallest screens, switch to percentage-based width, and move the side tab buttons to the space under the header as centered buttons.*/
@media(max-width:900px) {
  .wrapper {
    width: 80%;
    }
  nav1 {
    position:static;
    margin-left:0;
    margin: 0 auto;
    width: 100%;
    text-align:center;
    }
  nav1 .navlink {
    display: inline-block;
    border-radius: 15px 5px;
    margin: 15px 0;
    padding: 5px 15px 10px 15px;
    width: auto;
    }
    
  nav1 .navlink:hover {
    padding-left: 15px;
    }
  }

/*If on mobile, maximize the space available by increasing width to 95%.*/
@media(orientation:portrait) {
  .wrapper {
    width: 95%;
    }
  }
    </style>