/* welcome to spaghetti code hell */

/* font setup */
@font-face {
    font-family:ds;
    src: url(fonts/Nintendo-DS-BIOS.ttf);
    /* source: https://www.dafont.com/emoji.font */
}

@font-face {
    font-family:vcr;
    src: url(fonts/VCR_OSD_MONO_1.001.ttf);
    /*source: https://www.dafont.com/vcr-osd-mono.font 
    this is the ultrakill font apparently it jumpscared me */
}

@font-face {
    font-family:kirby;
    src:url(fonts/kirby-super-star-dialogue.otf)
    /* source: https://fontstruct.com/fontstructions/show/2466905/kirby-super-star-dialogue */
}

@font-face {
    font-family:utdr;
    src: url(fonts/PixelOperatorMono-Bold.ttf);
}

/* general */
html{
    font-size:23px;
    font-family: ds, sans-serif;
    color:black;
    background-image: url(images/bg/bgbase.png);
}

div{
    background-color: white;
    border:3px solid rgb(238, 104, 180);
}

.header{
    top:0;
    left:0;
    position: fixed;
    width: 100%;
    background:rgb(238, 104, 180);
    border:none;
    padding:8px;
}

.main{
    margin:auto;
    margin-top:30px;
    width:700px;
    padding:15px 25px 15px 25px;
    overflow:auto;
}

.first{
    margin-top:60px;
}

.last{
    margin-bottom:30px
}

.shadow{
    box-shadow: 10px 10px rgb(0,0,0,0.8);
}

.sitelinks{
    border:none;
    background: none;
    position: fixed;
    width:250px;
    min-height:60px;
    margin-left:25px;
}

.blank{
    border:none;
    background:none;
}


/* might be fun to reuse this for something else */
/* .buttonhome{
    right:0;
    margin-right:25px;
} */

.linkbox{
    margin-bottom:30px;
    padding:15px;
}


/* these are the two worst tags oh my god */
.linkbox > p > a, .linkdecor > p > a, .linkdecor > li > a, .linkdecor > ul > li > a, .linkdecor > h2 > a, .linkdecor > ul > li > p > a, .linkdecor > div > a, h3 > a{
    color:rgb(223, 78, 160);
    text-decoration:dotted 2px rgb(238, 104, 180) underline;
}

.linkbox > p > a:hover, .linkdecor > p > a:hover, .linkdecor > li > a:hover, .linkdecor > ul > li > a:hover, .linkdecor > h2 > a:hover, .linkdecor > ul > li > p > a:hover, .linkdecor > div > a:hover , h3 > a:hover{
    color:rgb(235, 137, 193);
}

.scroll{
    height:400px;
    width:600px;
    margin:auto;
    padding:4px;
    overflow:auto;
    border:3px dotted rgb(238, 104, 180);
}

.footerimage{
    position: fixed;
    right:0;
    bottom:0;
    width:150px;
    height:150px;
    border: none;
    background:none;
    background-image:url(images/cornerimage.png)
}

.textcenter{
    text-align: center;
}


/* marquee taken from https://ryanmulligan.dev/blog/css-marquee/ */
.marquee{
    --gap:10px
    display:flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
    
}

.marqueecontent{
    list-style-type: none;
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    min-width: 100%;
    gap:var(--gap);
    animation: scroll 16s infinite linear;
}

@keyframes scroll{
    from{
        transform:translateX(0)
    }
    to{
        transform: translateX(-100%);
    }
}

.block{
    display: block;
}

.center{
    margin: auto;
}

.right{
    float: right;
}

.left{
    float: right;
}
/* art gallery */
/* EZ Gallery by netfriend - https://netfriend.neocities.org/ez-gallery/
Released under the Unlicense - https://unlicense.org/ */

.ezgallery.horizontal { 
  display: grid;
  border: none;
  grid-gap: 5px;
  gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: minmax(100px, auto);
}

.ezgallery.horizontal a {
  text-align: center;
}

.ezgallery.horizontal img {
  text-align: center;
  vertical-align: middle;
  margin: 0 5px 5px 0;
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
  object-position: bottom;
}

/* page specific stuff */

/* enter */

.htmlenter{
    background-image: url(images/bg/bgenter.png);
}

.enter{
    margin:auto;
    margin-top:10vh;
    width:680px;
    height:467px;
    border: none;
    background: none;
    background-image: url(images/enter.png);
}

.enterlink{
    height:100px;
    width:200px;
    margin: auto;
    margin-top:15px;
}

.enterlink > a > p, .enterlink > a{
    text-align:center;
    font-size: 60px;
    color:rgb(223, 78, 160);
    text-decoration:none;
    margin-top:5%;
}

.enterlink > a > p:hover{
    color:rgb(235, 137, 193);
}

/* home */

/* about */

/* kirby */

.htmlkirby, .htmlstarman{
    font-family:kirby,ds,sans-serif;
    font-size:19px;
    background-image: url(images/bg/bgkirby.png);
}

.htmlkirby > body > h3 > a, .htmlkirby > body > div > h1 > a{
    color:rgb(223, 78, 160);
    text-decoration:dotted 2px rgb(238, 104, 180) underline;
}

.htmlkirby > body > h3 > a:hover, .htmlkirby > body > div > h1 > a:hover{
    color:rgb(235, 137, 193);
}

/* starman */

.htmlstarman{
    background-image: url(images/bg/bgstarman.png);
}

.htmlstarman > body > div{
    background:none;
    border:none;
}


/* ultrakill */

.htmlultrakill{
    font-size: 20px;
    font-family:vcr, ds, sans-serif ;
    color:white;
    background-image: url(images/bg/bgultrakill.jpg);
}

.htmlultrakill > body > div{
    background-color: black;
    border-color: white;
}

.htmlultrakill > body > div > p > a, .htmlultrakill > body > h3 > a{
    color:white;
    text-decoration: underline white solid 2px;
}

.htmlultrakill > body > div > p > a:hover, .htmlultrakill > body > h3 > a:hover{
    color:rgb(157, 157, 157);
}

/* utdr */

.htmlutdr{
    font-family:utdr, ds, sans-serif;
    color:white;
    background-color: black;
    background-image: url(images/bg/bgutdr.gif);
    background-size:cover;
}

.htmlutdr > body > h3 > a{
    color:white;
    text-decoration:underline white solid 2px;
}

.htmlutdr > body > h3 > a:hover{
    color:rgb(157, 157, 157);
    text-decoration:underline white solid 2px;
}

.htmlutdr > body > div{
    background-color: black;
    border-color:white;
}

/* recipes */

.htmlbaking{
    background-image: url(images/bg/bgbaking.png)
}

.htmlbaking > body > div{
    border-color:rgb(255, 149, 186);
}

.headerbaking{
    background: rgb(255, 149, 186);
}

.baking{
    border-color:rgb(255, 149, 186);
}

.htmlbaking > body > div > ul > li > a{
    color:rgb(47, 144, 255);
    text-decoration:dotted 2px rgb(47, 144, 255)underline;
}

.htmlbaking > body > div > ul > li > a:hover{
    color:rgb(172, 211, 255);
}

/* jester shrine */

.htmljester{
    background-image: url(images/bg/test.jpg);
}

/* emu */

.htmlemu{
    background-image:url(images/bg/bgemu.jpg)
}

.htmlemu > body > div{
    border-color:rgb(77, 45, 25);
    background-image:url(images/bg/bgemudiv.JPG)
}

.htmlemu > body > div > ul > li > a, h3 > a{
    color:rgb(49, 29, 16);
    text-decoration:dotted 2px rgb(49, 29, 16) underline;
}

.htmlemu > body > div > ul > li > a:hover, h3 > a:hover{
    color:rgb(91, 64, 47);
    text-decoration:dotted 2px rgb(91, 64, 47) underline;
}


/*mobile site
 from https://eggramen.neocities.org/code/css/more/r_test */
/*For narrow screens*/
@media (max-width: 1100px) {
    .sidebar {
      width: 275px;
      margin-left: 10px;
      }
    .main, .main-first {
      width: 420px;
      margin-left: 315px;
      }
  }
  
/*Mobile compatibility.*/
@media (orientation: portrait) {
  .sitelinks {
    margin: 0 auto;
    position: static;
    margin-top: 60px;
    margin-bottom: 15px;
    width: 90%;
    }
    
  .main{
    margin: 0 auto;
    margin-top: 20px;
    width: 80%;
    }
    
  .footer {
    width: 80%;
    padding: 5%;
    margin: 0 auto;
    }
    
  .top-bar {
    font-size: 13.5px;
    letter-spacing: 4px;
    font-size: 90%; /*To help reduce height if it overflows the first line.*/
    }

    .hide{
        display: none;
    }
  }