@import "/dither.css";
@font-face {
    font-family: 'UglyQua';
    src: url('assets/fonts/UglyQua.ttf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'UglyQua';
    src: url('assets/fonts/UglyQua-Italic.ttf') format('truetype');
    font-style: italic;
}

@font-face {
  font-family: "DOS"; 
  src: url('assets/fonts/Px437_DOS-V_re_ANK24.woff2') format('woff2'), url('assets/fonts/Mx437_DOS-V_re_ANK24.ttf') format('truetype');
}

[hidden] { 
  display: none !important; 
}

.tags {
  margin: 0;
  padding: 0;
  display:inline-block;
}

.tags li {
  display:inline;
  background-color: gray;
  border: 1px dotted black;
  opacity:0%;
  padding:0 0.2em 0 0.2em;
  color: black;
  font-size: 0;
  transition: 0.1s ease-in-out;
}

.highlight{
  background-color: white !important;
  opacity:100%;
}

.card:has(a:hover) li{
  color: black;
  font-size: 80%;
  opacity:100%;
  animation: transition ease-in-out 0.5s reverse;
}

select {
-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; /* hides the native UI */
   display: inline;
  width: fit-content;
  height:1.5em;
  padding-left: 0.25em;
  padding-right: 0.4em;
  vertical-align: top;
  transform: translateY(-1px);
  border: 1px dotted;
  border-radius: 0;
  background-color: white;
  font-size:75%;
  font-family: 'DOS';
  background-size: 0.2em;
  transition: 0.25s ease-in-out
}

select:hover{
  background-color:darkgray;
}


body{
  margin:5vmin 10vmin 2vmin 10vmin;
  font-family: 'DOS';
}

.holder{
  display: flex;
  max-width:100%;
  gap: 10px;
  flex-wrap:wrap;
  align-items: flex-start;
  padding: 0 4px;
  
}

.frame {
  border: 5px solid transparent;
  border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUAQMAAAAmpYKCAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAAgICAkmm5JAAAAAJ0Uk5TAP9bkSK1AAAAoUlEQVR4nI3TwRHAIAgEQKgAOqD/sugAKiAQneTJ5YHrIzOcIksQS6T1wohDZ1fEFJiFK5XCnDBTf5azYO6fVFyLA3IxFZcmiUN+k+QbCHNKdl+Shbl70nZYYJ4y7jyYJzh1nnMvq6e0JRjzlNOcY3Y72SUx96FS/XO4ee5O3VzvPW6e2ZDOI3dOVn+jR5hlsndzDlrvS7vvaPN5af85LH4AAFNc5Eo85m4AAAAASUVORK5CYII=") 28 round;
  border-color: rgb(255, 255, 255, 90%);
  padding: 18px 36px;
  margin-top: 8px;
}

.image{
  padding: 0;
  width: 40%;
  flex-grow: 1;
}

h1{
  font-size:2em;
  color:white;
}

h2{
  font-size:1.25em;
  margin-bottom:0.25em;
  display:inline-block
}

.frame:has(h2):hover:before{
  content: ">> ";
  display: inline-block;
}

li{
  line-height:1.25;
}

body {
  color:white;
}

.frame #hell{
  padding:0;
  margin:0;
  width:min-content;
}

/* unvisited link */
a:link {
  color: gray;
  animation: pulse alternate ease-in-out infinite 2s;
}

@keyframes pulse {
  0%  {color:gray; }
  100%  {color:lightgray}
}

@media screen and (max-width: 800px) {
  body{
    margin:5vmin 2vmin 2vmin 2vmin;
  }
  
  .holder{
    align-items: center;
  }
  
  .frame{
    flex-grow: 1;
  }
	
}