@font-face { 
    font-family: "dotgothic"; 
    src: url('font/dotgothic16.regular.ttf');
    
}

@font-face {
    font-family: "pixelta";
    src: url('font/pixelta.regular.ttf')
}

@font-face {
    font-family: "coral-pixels";
    src: url('font/coral-pixels.regular.ttf');
}

:root {
    --gap: 8px;
    --content-width: 900px;
    --content-bg: #16151c;
    --padding: 8px;
    --aside-width: 200px;
    --title-font-family: "pixelta", serif;
    --title-font-size: 32pt;
    --body-font-family: "dotgothic", sans-serif; 
    --body-font-size: small;
    --anchor-color: rgb(255, 137, 255);

    
    --bg-color: #16151c;
    --banner-image: url(./img/banner.jpg);
    --color-text: rgb(254, 254, 254);
    
    --cursor-default: default;
    --cursor-pointer: pointer;



}

.munch-mode {
    --cursor-default: url(cursor/opposum-default.png), default;
    --cursor-pointer: url(cursor/opposum-pointer.png), pointer;
}

/* Layout ************************************************/

body {
    cursor: var(--cursor-default);
    margin: 0;
    font-family: var(--body-font-family);
    font-size: var(--body-font-size);
    font-weight: normal;
    background-position-x: 0;
    
    /* background-color: var(--bg-color); */
    background-image: url(img/pinkhrtsbg.gif);
    background-attachment: fixed;

    color: var(--color-text);
}

label, input {
    cursor: var(--cursor-default);
}

a {
    cursor: var(--cursor-pointer);
    color: var(--anchor-color);
}


/* header {
    background-image: var(--banner-image);
    background-size: cover;
    background-repeat: no-repeat;
} */

h1 {
    font-family: var(--title-font-family);
    font-size: var(--title-font-size);
    font-weight: normal;
}

h2 {
    font-weight: normal;
}

/* Navbar */

nav li {
    display: inline;
}

nav li:not(:last-child)::after {
    content: " - "
}



/* Figures ***********************************************/

figure {
  border: thin silver solid;
  display: flex;
  flex-flow: column;
  padding: 5px;
  max-width: 220px;
  margin: auto;
}

figure img {
  max-width: 220px;
  /* max-height: 150px; */
  object-fit: cover;
}

figcaption {
  background-color: #222222;
  color: white;
  padding: 3px;
  text-align: center;
}


/** Text Layout */



.text-center {
    text-align: center;
}

/** Layout ***********************************************/

.float-right {
    float: right;
}

.float-left {
    float: left;
}

.clear, section {
    clear: both
}

.flex {
    display: flex;
}

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

.flex-column {
    flex-direction: column
}

.gap {
    gap: var(--gap);
}

.outer {
    gap: var(--gap);
    margin: auto;
    max-width: var(--content-width);
    
    flex-direction: column;
}

.inner {
    flex-direction: row;
    gap: var(--gap);
}


main {
    padding: var(--padding);
    flex-grow: 1;
    background: var(--content-bg);
}

.sticky {
    position: sticky;
    top: 0
}

aside {
    background: var(--content-bg);
    padding: var(--padding);
    max-width: var(--aside-width);
    
    border-right: thin silver solid;
    align-self: flex-start;
    
}

@media screen and (max-width: 700px) {
    .inner {
        flex-direction: column;
    }

    aside {
        display: none;
        position: relative;
    }
}

/* Blinkies */

@keyframes scroll-anim {
    from { background-position-x: 0px;}
    to { background-position-x: -150px;}
}

.scroll {
    animation: 2s linear 0s infinite scroll-anim
}

.eatshit-banner {
    background-image: url(img/eatshit.gif);
    height: 20px;
}

.transrights-banner {
    background-image: url(img/transrights.gif);
    height: 20px;
}

input, textarea, button, select {
    border-radius: 0;
    border-width: 2px;
    border-color: white;
}

input, textarea, select:active, button:active {
    border-style: inset;
}

button, select {
    border-style: outset;
}