/* 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.bunny.net/css?family=aleo:300,700|rubik-dirt:400);


:root {
  --highlight: darkslategray;
  --background: black;
  --background2: rgb(25, 25, 25);
  --paper: var(--background2);
  --text: white;
  --textaccent: turquoise;
}

@media (prefers-color-scheme: light) {
  :root {
    --highlight: moccasin;
    --background: white;
    --background2: aliceblue;
    --text: black;
    --textaccent: teal;
    }

}

body {
  background-color: var(--background);
  background: linear-gradient(var(--background), var(--background2));
  background-image: url(https://zoyander.cc/img/background.png);
  background-repeat: repeat;
  color: var(--text);
  font-family: 'Aleo', serif;
  font-size: 14pt;
  padding-bottom: 5em;
}

@media (prefers-color-scheme: light) {
  body {
    background-image: none;
  }
}

.content {
  margin: 10px;
  padding: 20px;
  width: 80vw;
}

.container {
  display: flex;
  width: 95vw;
  border: 0; padding: 0; margin: 0;
  background-color: var(--background2);
  mix-blend-mode: screen;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
}

.container:has(.card){
  align-items: stretch;
}

.center {
  flex: 100%;
  text-align: center;
}

.center p {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

div.title {
  display: flex;
  width: 90vw;
  border: 0; 
  padding: 0; 
  margin: auto;

  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  align-self: 
  order: -1;
  
  /*background: rgba(5, 0, 5, 0.8);*/

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



.menu {
 display: flex; 
 flex-flow: row wrap; 
 justify-content: space-between; 
 align-items: center; 
 align-content: space-around; 
}

.bottom-menu {
 background-color: var(--paper); 
 margin:-10px;
}

.bottom-menu a {
  color: var(--text);
}

.bottom-menu .name {
  order: -10;
  font-size: 36px;
}

.bottom-menu #mini-monogram {
  margin-right: 0.5em;
  vertical-align: middle;
  height: 36px;
  opacity: 0.7;
}

#neocities {
  order: -1;
}

div.menu div {
 margin: 10px; 
}

h1, h2, .name {
  font-family: 'Rubik Dirt', display;
  font-size: 2em;
  font-weight: normal;
}


a {
  text-decoration: none;
  color: var(--textaccent);
}

a:hover {
  text-shadow: 1px 1px 2px rgb(255,238,39), 0 0 25px rgb(255,163,0), 0 0 5px rgb(255,0,77);
  color: var(--text);
}

a:has(img):hover {
  background: var(--highlight);
  mix-blend-mode: difference;
}

h4.feed-item-title {
  margin-bottom: 0px;
}

p.feed-item-desc {
  margin-top: 0px;
}

dt {
  font-weight: bold;
}

ul.tiled {
  max-width: 600px;
  display: flex; 
  flex-flow: row wrap;
  justify-content: center;
  list-style: none; 
  font-size: medium;
  gap: 10px;
  padding: 3em 0 0 0;
}

.tiled li {
  padding: 1em;
  background-color: hsla(108, 50%, 50%, 0.1);
  border-radius: 3px;
}

.tiled li:has(a:hover) {
  background-color: var(--background);
  scale: 1.1;
}

#logo-grid { 
  display: grid; 
  grid-template-columns: 100px 100px 100px 100px; 
  grid-template-rows: 100px;
  gap: 1em;
  padding: 5px;
  border-radius: 10px;
  margin-bottom: 1em;
  color: white;
}


#logo-grid img {
  filter: invert(100%);
  padding: 5px;
}

@media (prefers-color-scheme: light) {
  #logo-grid img {
    filter: invert(0%);
  }
}

#logo-grid a:hover {
  text-shadow: none;
  scale: 1.1;
}

.card {
  background: var(--highlight); 
  display: grid; 
  border-radius: 10px;
}

.card img, .card video {
  width: 100%;
  max-height: 200px; 
  border-radius: 10px;
  object-fit: cover;
}

section {
  border-top: 2px solid gray;
}

main section:nth-child(odd){
  background: var(--background2);
}

ul.yesnomaybe  {
  list-style: none;
}

.yesnomaybe li {
  padding-left: 1rem;
  text-indent: -0.75rem;
}

.yesnomaybe li.no {
  opacity: 0.5;
}

.yesnomaybe li.maybe {
  opacity: 0.5;
}
  
.yesnomaybe li.no:before {
  content: "❌ ";
}

.yesnomaybe li.maybe:before {
  content: "⚠️ ";
}

.yesnomaybe li:before {
  content: "✅ ";     
}




@media screen and (min-width: 720px) {
  
  
  div.title{
    height: 60vw;
    width: 90vw;
    
  font-size: xx-large;
  }
  
  .bottom-menu {
    width:100%; 
    position:fixed; 
    bottom:0;
    z-index: 200;
  }
  
  #neocities {
    order: 99;
  }
}

@media screen and (min-width: 1000px) {
  
  
  div.title {
    height: 600px;
    width: 800px;
  }
  
  .content {auto
  padding: 20px;
  width: 500px;
  }
  
  .card {
    width:40%; 
    grid-template-columns: 230px auto; 
  }
  
  .card img, .card video {
    max-height: none;
    height: 100%;
    max-width: 200px; 
  }
  
  .gridlist {
    display: grid; 
    grid-template-columns: auto 250px 250px 250px auto; 
    grid-template-rows: auto auto; 
    column-gap: 30px; 
    row-gap: 10px;
    margin: auto;
  }
  
  .gridlist .gridlistitem {
    background: var(--highlight);
    border-radius: 10px;
    padding: 10px;
  }
}