:root{
  --accent:#7133AB;
  --link:#B876D6;
  scroll-behavior:smooth;
}
::selection{color:#7133AB;background-color:#111;}
body{
  user-select:none;
  margin:0;
  background-color:#111;
  color:#eee;
  text-align:center;
  font-family:Arial;
}
h1,h2{text-align:center;}
p{
  max-width: min(60ch, 90%);
  margin:auto;
  text-align:left;
}
.rule{margin-bottom:6px}
:any-link{
  color: #b876d6;
  text-decoration:none;
  transition:text-shadow 0.2s,text-decoration 0.2s;
}
:any-link:hover{
  text-decoration:underline dotted var(--accent) 2px;
  color:var(--accent);
  text-shadow:0 0 5px var(--accent);
}
img{image-rendering:pixelated;-webkit-user-drag:none;}
.content{
  margin:30px auto;
  display:inline-block;
  background-color:#222;
  background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), 
  url("https://web.jae.gg/images/wallpaper.webp");
  background-size:cover;
  height:fit-content;
  min-height:80vh;
  padding-bottom:30px;
  width:60vw;
  box-shadow:
    -2px 0 10px var(--accent),
    2px 0 10px var(--accent),
    0 2px 10px var(--accent),
    0 -2px 10px var(--accent),
    inset -2px 0 10px var(--accent),
    inset 2px 0 10px var(--accent),
    inset 0 2px 10px var(--accent),
    inset 0 -2px 10px var(--accent);
  border-radius:12px;
}
.codeblock{
  color:#eee;
  background-color:#15151590;
  width:280px;
  height:60px;
  padding:4px;
  border:none;
  resize:none;
  outline:none;
  border:1px solid #333;
  border-radius:8px;
  font-family:monospace;
  display:inline-block;
  text-align:left;
  user-select:text;
}
table{
  margin:20px auto auto auto;border-spacing: 0;
  width: min(60ch, 90%);
}
caption,th,td{
  border:1px solid #333;
  padding:8px 12px;
  height:31px;
}
.slug{
  padding:8px 12px 8px 12px;width:fit-content
}
td{
  text-align:left;
  text-overflow: ellipsis;
  background-color:#15151590;
}
td.btn{
  text-align:center;
}
td.btn > img{
  width:88px;
  height:31px;
}
table tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}
table tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}
table caption{
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
table tr td, table th{
  border-bottom:none
}
table th:nth-of-type(2){
  border-left:none;border-right:none
}
table tr td:nth-of-type(2){
  border-left:none;border-right:none
}
table tr:last-child td{
  border-bottom:1px solid #333
}
caption{text-align:center;border-bottom:unset;
}
caption,th{
  background-color:#15151590;
}
.logo{pointer-events:none;}
.logo1{
  position:fixed;
  top:0px;
  margin:auto;
  margin-top:50px;
  font-family:Arial;
  font-size:28px;
  font-weight:bold;
  display:block;
  line-height:37px;
  text-align:center;
  border:none;
  width:130px;
  height:37px;
  color:#eee;
  text-shadow:0 0 5px #222;
}
.logo2{
  margin-left:2px;
  font-family:Arial;
  font-size:28px;
  font-weight:bold;
  color:#111;
  border:none;
  border-radius:2px;
  background:var(--accent);
  padding:0px 2px 0px 2px;
  outline:none;
  box-shadow:0 0 5px #222;
}
.ver{font-family:monospace;font-weight:100;font-size: 10px;margin-top:0;display:inline;position:relative;bottom:20px}
/* mobile */
@media only screen and (max-width:600px){
  body{
    background-color:#222;
  }
  .logo1{
    margin-top:10px !important;
  }
  .content{
    margin:unset;
    border-radius:unset;
    width:100vw;
    box-shadow:unset;
  }
  p,table{width:90vw;}
}
.pulse{
  animation: alternate 2s pulse ease-in-out infinite;
}
@keyframes pulse {
  0%{color:#eee}
  50%{color:#c00}
  100%{color:#eee}
}