/* palette: https://coolors.co/cb997e-ddbea9-ffe8d6-b7b7a4-a5a58d-6b705c + AAAA88 for saturated bg + 484E37 for darker links*/

body {
  background:#AAAA88 url('https://unhumans.neocities.org/graphics/canvas23.png');
  /*background: url('https://unhumans.neocities.org/graphics/canvas23.png'), url('https://i5.glitter-graphics.org/pub/2738/2738725ojjbyqn8r1.gif');*/
  background-blend-mode: darken;
  background-repeat: no-repeat, repeat;
  background-attachment: fixed;
  background-position: bottom left 50px;
}


.main {
  z-index:100;
  width:30vw;
  position:absolute;
  right:10vw;
  background-color:#ffe8d6;
  color:#6b705c;
  max-height:70vh;
  overflow:auto;
  border-radius:20px;
  margin-top:10vh;
}

i, strong, b {
  color:#B37D60;
}

p a {
  color: #484E37;
  text-decoration: none;
  background-position-y: -0%;
  background: linear-gradient( #ffe8d6 50%, #B7B7A4 50%);
  transition: background 500ms ease;
  background-size: 2px;
  background-size: auto 175%;
}

p > a:hover, a:focus {
  background-position-y: 100%;
}

/*nav:after {
  position:absolute;
  bottom:0;
  left:0;
  content:' ';
  background-image:url('http://dl10.glitter-graphics.net/pub/571/571010givwu00no9.gif');
  background:red;
}*/

nav::before {
    background: url('https://i10.glitter-graphics.org/pub/571/571010givwu00no9.gif');
    content: '';
    
    /* Position */
    top: -45px;
    left: 79px;
    position: absolute;
    

    /* Size */
    width:83px;
    height:89px;
    
}

nav {
  background-color: #ffe8d6;
  position: fixed;
  /*left:40vw;
  top:20vh;*/
  top: 175px;
  left:34vw;
  padding: 10px;
  width: 120px;
  border-radius:20px;
  border:solid 5px #DDBEA9;
}

.midimg {
  background: rgba(255, 0, 0, 0) url('https://unhumans.neocities.org/graphics/canvas.png') no-repeat;
  background-size:auto;
  mix-blend-mode:darken;
    content: '';
    
    /* Position */
    top: 200px;
    left: 38vw;
    position: fixed;
    
    width:418px;
    height:600px;
    
    z-index:1;
    pointer-events: none;
}

@supports not (mix-blend-mode:darken) {
  
 .midimg {display:none;}
  
}

.hearts {
  background: #AAAA88 url('https://unhumans.neocities.org/graphics/hearts.png') no-repeat;
  background-blend-mode:darken;
  opacity:0.75;
  content:'';
   position:fixed;
   bottom:0;
   right:10px;
   height:441px;
   width:456px;
   z-index:-99;
}

.extra {
  /*background:#ffe8d6;*/
  width:300px;
  height:100px;
  left:100px;
  top:10vh;
  position:fixed;
  content:'';
  z-index:-1;
  }
  
  .texting {
    padding:5px;
    height:100%;
  text-align:center;
  background:#ffe8d6;
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 47% 100%, 50% 75%, 0% 75%);
  }
  
  .extra::before {
    background:#AAAA88 url('https://i7.glitter-graphics.org/pub/546/546677m95gpbskkb.gif');
    content:'';
    background-blend-mode:darken;
  width:150px;
  height:160px;
  left:420px;
  top:10vh;
  position:fixed;
  border-radius:10px;
  }
  
  .extra::after {
    background:#AAAA88 url('https://i10.glitter-graphics.org/pub/1119/1119540s3m4f9qfe2.gif');
    content:'';
    background-blend-mode:darken;
  width:138px;
  height:110px;
  left:100px;
  top:200px;
  position:fixed;
  clip-path: ellipse(50% 46% at 50% 50%);
  }

.navlink{
  display: block;
  padding: 5px;
  margin: 8px 5px 8px;
}

.navlink a {
  color:#484E37;
  transition: 50ms ease;
  background:#ffe8d6;
}

.navlink a:hover {
  color:#ffe8d6;
  background:#A5A58D;
  text-decoration:none;
}

#button-box {
  max-height:200px;
  overflow:auto;
  z-index: 99;
  background-color: #ffe8d6;
  position: fixed;
  left:35vw;
  top:600px;
  padding: 10px;
  border-radius:20px;
  border:solid 2px #DDBEA9;
  text-align:center;
  width:300px;
  /*clip-path: polygon(0 0, 85% 0%, 100% 15%, 100% 100%, 15% 100%, 0% 85%);*/
}

@media only screen and (max-width: 1200px) {
  nav::before {top: 5vh;
    left: calc(90vw - 42px);
    z-index:2;
    position: absolute;}
    

  #button-box {
    padding:20px;
  width:100%;
  width:90vw;
  margin:auto;
  margin-top:2vh;
  text-align:center;
  /*display:flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;*/position:static;z-index:1;
  }
  
  nav {padding:20px;
  width:100%;
  width:90vw;
  margin:auto;
  margin-top:5vh;
  display:flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;position:static;z-index:1;}
  
  
  .navlink {display: block;
  float:left;
  padding: 5px;
  margin: 8px 5px 8px;
  z-index:3;}
  
  .main{width:90vw;margin:auto;position:static;max-height:100%;}
  
  .midimg, .extra, nav::before, .hearts {display:none;}
}