@import url('https://fonts.googleapis.com/css2?family=Jacquard+12&display=swap');
.jacquard-12-regular {
  font-family: "Jacquard 12", system-ui;
  font-weight: 400;
  font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Jacquard+12&display=swap');
.dm-mono-light {
  font-family: "DM Mono", monospace;
  font-weight: 300;
  font-style: normal;
}
::selection {
  color:white;
  background:#549e00;
}
body {
  background-color: black;
  background-image: url('checker.png');
  background-size: cover;
  margin-left:200px;
  margin-right:200px;
  }

h10{font-family: "DM Mono", monospace; color:white; font-size:9px;}
h1{
  user-select: none;
  font-family: "Jacquard 12", system-ui;
  font-size: 130px;
  color:white;
  font-weight: 100;
  margin-bottom:3px;
  margin-top:11px;
  }
h2{
  user-select: none;
  color:white;
  font-family: "Jacquard 12", system-ui;
  font-size:30px;
  margin:0px;
  padding-top:2px;
  padding-bottom:2px;
  
  background: black;
  box-shadow: 5px 7px #7d0101;
  transform: skew(-7deg, -7deg);
  }
h3{
  font-family: "Jacquard 12", system-ui;
  font-size:23px;
  color:white;
}
p{
  color:white;
  font-family: "DM Mono", monospace;
  font-size:12.5px;
  }

.topnav {
  z-index: 99;
  border-style: double;
  border-color: white;
  
  /*background-image: linear-gradient(to top, black, #7d0101);*/
  /*background-color: black;*/
  padding: 2px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom:7px;
}
.topnav a {
  /*navbar code: https://templaterr.neocities.org/topbar/*/
  color:white;
  font-family: "DM Mono", monospace;
  font-size: 16px;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  
  display: block;
  width: 100px;
  padding: 7px;
  /*margin: 8px 5px 8px;*/
}
.topnav:hover{
  border-style: solid;
  transition: .4s;
}
.topnav a:hover {
  color: red;
} 

.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
/*grid-column-gap: 0px;*/
grid-row-gap: 0px;
}

.div1 { 
  grid-area:  1 / 1 / 6 / 5; 
  margin-right: -53px;
  margin-left: 7px;
  padding:15px;
  }
  .stamps{
    width:70px;
    height:38px;
    margin:-.3px;
  }
  .marquee {
  height: 40px;
}

.marquee div {
  display: block;
  width: 200%;
  height: 52px;

  position: absolute;
  overflow: hidden;

  animation: marquee 40s linear infinite;
  animation-delay: 2.4s;
}

.marquee  {
  float: left;
  width: 100%;
  overflow: hidden;
  position: relative;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

.div2 { 
  grid-area:   1 / 5 / 4 / 6; 
  background:black;
  margin-right: 7px;
  margin-left: 60px;
  padding-left:15px;
  padding-right:15px;
  padding-top:10px;
  margin-bottom:25px;
  
  box-shadow: 7px 10px #7d0101;
  transform: skew(-7deg, -7deg);
  }
  
  .div2 a{
    color:white;
    font-family: "Jacquard 12", system-ui;
    font-size: 35px;
    text-decoration:none;
  }
  .div2 a:hover{
    color:red;
  }
  
.div3 { 
  grid-area:  4 / 5 / 6 / 6; 
  /*background:black;*/
  margin-right: 7px;
  margin-left: 40px;
  }
  .log{
    margin-top:-6px;
    margin-left:3px;
    margin-right:-1px;
    
    padding-left:6px;
    padding-right:5px;
    padding-top:5px;
    
    background:black;
    
    overflow-y: scroll; height:150px;
  }
  /*· · ─ ·✶· ─ · · Gallery Page · · ─ ·✶· ─ · ·*/
.art{
  object-fit: cover;
  height:150px;
  width:150px;
}
.art:hover{
 /*-webkit-transform:scale(3); */
 /* or some other value */
    transform:scale(3);
    object-fit: contain;
}
/*· · ─ ·✶· ─ · · Media Page · · ─ ·✶· ─ · ·*/
.blog{

}
/*· · ─ ·✶· ─ · · Media Page · · ─ ·✶· ─ · ·*/
.media{
  padding:5px;
}
.MainSec{
  margin-top:3px;
  margin-bottom:3px;
  padding:20px;
  
  user-select: none;
  font-family: "Jacquard 12", system-ui;
  font-size:30;
  color:white;
  background-color:#7d0101;
  }
  .sub{
  opacity:.8;
  margin-top:.6px;
  margin-bottom:.6px;
  padding:12px;
    
  user-select: none;
  font-family: "DM Mono", monospace;;
  font-size:18px;
  font-weight:bold;
  color:white;
  background-color:#873939;
  text-shadow: 2px 1px black;
  }
  .sub:hover{
    opacity:1;
    transition:.5s;
    }
    #game{background-image:url('assets/bars/gaming.png');}
      #BugFables{background-image:url('assets/bars/BugFables.jpg');}
      #HKSS{background-image:url('assets/bars/HKSS.jpg');}
      #katamari{background-image:url('assets/bars/katamari.jpg');}
      #SA2{background-image:url('assets/bars/SA2.jpg');}
      #UTDR{background-image:url('assets/bars/UTDR.jpg');}
      #YN{background-image:url('assets/bars/YN.jpg');}
      #zoo{background-image:url('assets/bars/zoo.jpg');}
    #anime{background-image:url('assets/bars/anime.png');}
      #eat{background-image:url('assets/bars/eat.jpg');}
      #haibane{background-image:url('assets/bars/haibane.jpg');}
      #cub{background-image:url('assets/bars/cub.jpg');}
      #kino{background-image:url('assets/bars/kino.jpg');}
      #star{background-image:url('assets/bars/star.jpg');}
      #cook{background-image:url('assets/bars/cook.jpg');}
      #YKK{background-image:url('assets/bars/YKK.jpg');}
      #yotsuba{background-image:url('assets/bars/yotsuba.jpg');}

/*· · ─ ·✶· ─ · · Resources Page · · ─ ·✶· ─ · ·*/
.section{
  font-family: "DM Mono", monospace;
  display: inline-block;
  vertical-align:top;
  width:350;
}
ul { 
list-style-type: "★"; 
color:white;
}
  .section a{
    color:white;
    text-decoration:none;
  }
  .section a:hover{
    color:red;
  }