@font-face {
    font-family: 'crafter';
    src: url(/shrines/minecraft/Minecrafter.Reg.ttf);
}

@font-face {
    font-family: 'mine';
    src: url(/shrines/minecraft/Minecraft-Seven_v2.woff2);
}

body {
    font-family: 'mine';
    color: #1D1D21;
    cursor: url(cursor.png), auto;
    font-size: 2.5vw;
}

h1 {
    font-family: 'crafter';
    font-size: 8vw;
    background-image: url(title-background.png);
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px #f27fa5;
    text-align: center;
}

h2 {
    text-transform: lowercase;
    color: #f088a6;
    -webkit-text-stroke: 5px #3c2228;
    paint-order: stroke fill;
    background-image: url(header-background.png);
    padding: 10px;
    font-size: 3vw;
}

a, a:visited {
    color: #F38BAA;
    text-decoration: none;
}

a:hover {
    color: #f088a6;
    -webkit-text-stroke: 5px #3c2228;
    paint-order: stroke fill;
    cursor: url(/shrines/minecraft/diamond_sword.png), auto;
}

::selection {
    background-color: #FFFF55;
}

.skin {
    float: right;
    width: 30%;
    filter: drop-shadow(-1px -1px 0 #fff)
            drop-shadow(1px -1px 0 #fff)
            drop-shadow(-1px 1px 0 #fff)
            drop-shadow(1px 1px 0 #fff);

}

.skins {
    width: 5%;
}

.skinss {
    float: left;
    width: 15%;
    filter: drop-shadow(-1px -1px 0 #fff)
            drop-shadow(1px -1px 0 #fff)
            drop-shadow(-1px 1px 0 #fff)
            drop-shadow(1px 1px 0 #fff);
    padding-right: 10px;
}

#main {
    display: grid;
    grid-template-columns: 1fr 5fr;
}

.container {
    background-color: #c6c6c6;
    border-radius: 5px;
    border: 1px solid black;
}

.box {
    padding: 5px;
    border-radius: 5px;
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
    height: 95vh;
    overflow: auto;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #c6c6c6;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
    outline: 1px solid black;
}

::-webkit-scrollbar-thumb:active {
    background-color: #95a4ff;
    border-right: 2px solid #7380c6;
    border-bottom: 2px solid #7380c6;
}

.menu {
    padding: 5px;
}

.menu button {
    background-color: #c6c6c6;
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
    outline: 1px solid black;
    color: white;
    text-shadow: 2px 2px 0 #443b3c;
    font-family: 'mine';
    padding: 10px;
    width: 100%;
    margin-bottom: 10px;
    font-weight: bold;
}

.menu button:hover {
    background-color: #95a4ff;
    border-top: 2px solid #b0bcff;
    border-left: 2px solid #b0bcff;
    border-right: 2px solid #7380c6;
    border-bottom: 2px solid #7380c6;
    color: #f9fcab;
    -webkit-text-stroke: transparent;
    text-shadow: 2px 2px 0 #514618;
}

.blog {
    border: 50px solid transparent;
    border-image: url(blog-border.png) 17% fill round;
    image-rendering: pixelated;
    width: 65%;
    margin-bottom: 20px;
}

.blog b, .blog2 b {
    color: #AA0000;
}

.blog a, .blog a:visited, .blog2 a, .blog2 a:visited {
    color: #5555FF;
    text-decoration: underline;
}

.blog a:hover, .blog2 a:hover {
    color: #0000AA;
    -webkit-text-stroke: transparent;
}

.blog2 {
    border: 50px solid transparent;
    border-image: url(blog-border.png) 46% fill round;
    image-rendering: pixelated;
    width: 65%;
    margin-left: 26%;
    margin-bottom: 20px;
}

.tooltip {
  position: absolute;
  visibility: hidden;
  padding: 5px;
  background-color: #212121;
  border: 2px solid #555;
  outline: 1px solid black;
  color: white;
  z-index: 1000;
  pointer-events: none;
  width: auto;
  border-radius: 3px;
  cursor: url(cursor.png), auto;
}

.tooltip-visible {
  visibility: visible;
  opacity: 1;
  display: block;
  cursor: url(cursor.png), auto;
}

.blank {
    list-style-type: "☐";
}

.done {
    list-style-type: "☑";
    color: #AAA;
}