body {
  background-image: url("bg.jpg");
  color: black;
  font-family: "Oprah",Verdana;
  cursor: url('https://pixelarticons.com/free/cursors/default.png') 4 1, auto;
}
a:hover{
  cursor: url('https://pixelarticons.com/free/cursors/pointer.png') 4 1, auto;
}
header,content,footer {
  width:70%;
  margin-left:15%;
  background-color:#fff;
  border-radius:20px;
  margin-top:10px;
  margin-bottom:10px;
  padding:10px;
}
header{
  text-align:center;
  height:150px;
  background-image: url("header-bg.jpg");
  color:#fff;
  background-size: cover;
  background-position-y: center;
  display: grid;
  align-content: center;
}
header h1{
  font-size:60px;
  font-family: "Jackdrift";
    text-shadow: 5px 5px 0 #ff005e, 10px 10px 0 #00d4ff;
    animation: shadow-dance 2s infinite;
}
content h2{
  text-align:center;
  }
@keyframes shadow-dance {
    0%, 100% {
        text-shadow: 5px 5px 0 #ff005e, 10px 10px 0 #00d4ff;
    }
    50% {
        text-shadow: -5px -5px 0 #00d4ff, -10px -10px 0 #ff005e;
    }
}
@keyframes hover-rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(3deg);
    }
}
@keyframes hover-rotate-back {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(-3deg);
    }
}
content{
  display:grid;
  grid-template-columns:1fr 4fr;
  min-height:70vh;
}
content p{
text-indent:15px;
margin:10px 0;
}
footer{
  text-align:center;
}
#left-column{
  font-family: "Caveat";
  font-size:22px;
  }
#left-column li a{
  text-decoration:none;
  color:#000;
}
#left-column li a small{
 color:darkgray; 
 display: block;
  margin-top: -10px;
}
.eng {
 color:gray;
 display:inline-block;
}
small.eng{
 font-size:14px;
}
.postdate {
  font-style: oblique;
  font-size: 12px;
}
.imglabel{
  position:relative;
}
.imglabel img{
  max-width:100%;
}
.imglabel label{
  margin-top: -10px;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  left: 0;
  background-color: rgba(0,0,0,0.7);
  padding: 3px 0 6px;
  color: #fff;
}
#buttons-links{
 display:grid;
 grid-template-columns: repeat(4,min-content);
  grid-gap: 5px;
}
#buttons-links>*:nth-child(2n):hover{
   animation: hover-rotate 0.5s normal forwards;
}
#buttons-links>*:nth-child(2n-1):hover{
   animation: hover-rotate-back 0.5s normal forwards;
}
@media screen and (max-width:900px) {
  header,content,footer{
    width: 90%;
    margin-left: 3%;
    } 
    content{
      grid-template-columns: 1fr;
    }
    #left-column{
      display: grid;
  grid-template-columns: 1fr 1fr;
    }
    #left-column>*:nth-child(2) {
      order:3;
    }
    #left-column>*:nth-child(4) {
      order:4;
    }
}
@font-face {
  font-family: "Jackdrift";
  src: url("/Jackdriftdemo-YqLV4.ttf") format("truetype"); 
  font-style: normal; 
  font-weight: normal; 
}
@font-face {
  font-family: "Caveat";
  src: url("/Caveat.ttf") format("truetype"); 
  font-style: normal; 
  font-weight: normal; 
}
@font-face {
  font-family: "Oprah";
  src: url("/fonts/Oprah.otf") format("truetype"); 
  font-style: normal; 
  font-weight: normal; 
}
@font-face {
  font-family: "Ramona-Light";
  src: url("/fonts/Ramona-Light.ttf") format("truetype"); 
  font-style: normal; 
  font-weight: normal; 
}
#left-column li::marker {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='14' viewBox='0 0 50 50'%3E%3Cpath d='M46.4 16.2c-2.3-2.3-5.4-3.5-8.4-4.5-.5-.2-1.1-.3-1.6-.5-1.6-1.6-3.7-2.8-6.2-3.2-1-.2-1.9.1-2.5.6-.9-.3-1.8-.6-2.7-.8-3.2-1-6.4-1.8-9.5-.1-1 .5-1.9 1.2-2.7 2-6.4 1.4-11.7 5-12.4 12.7C0 27 1.9 31.5 4.9 34.9c.1.6.2 1.1.4 1.7 1 3.2 3.3 5.7 6.7 6.5 2.7.6 5.4-.2 7.9-1.2 3.3.4 6.7.3 9.9 0 6.5-.7 13.3-2.8 17.1-8.5 3.6-5.2 4-12.6-.5-17.2zm-17.3.9c2.1.4 4 1.7 4.7 3.8 0 .5-.1 1.1-.2 1.6-.3 1.4-.8 2.6-1.6 3.7-.7.2-1.5.1-2.3-.4-.8-.4-1.6-1-2.2-1.6-.4-.4-1.2-1.7-1.6-1.9 3.4 1.3 5.1-3 3.2-5.2zm-11.6 9.7c.2-1.9 1.1-3.9 2.3-5.5-.4 2.1.3 4.2 1.7 6 1.3 1.7 3.1 3.2 5 4.2-.2.1-.4.2-.6.4-.1 0-.1.1-.2.1-3.9.2-8.7-.8-8.2-5.2zm-6.4 3.1c.1.3.1.7.2 1 .2.6.4 1.2.7 1.8-.4-.2-.7-.5-1-.7.1-.8.1-1.4.1-2.1zm31.2-1.3c-.9 1.7-2.1 3.1-3.7 4.1 2-2.1 3.4-4.7 4-7.6.2-.7.3-1.4.3-2.1.6 1.5.5 3.3-.6 5.6z'/%3E%3C/svg%3E") ' ';
}

#left-column li:nth-child(3n)::marker {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='14' viewBox='0 0 50 50'%3E%3Cpath d='M46.5 12.5c-.4-1.1-1.3-1.8-2.2-2-4.2-4-11.6-4.3-17.1-4.1-6.9.3-13.9 2.1-19.4 6.5C2 17.5-2.4 25.7 2.5 32.6c2.2 3.2 5.5 4.9 9 5.5 3.3 1.7 6.7 3.3 10.2 4.4 7.8 2.3 17 1.6 23.2-4.3 7.3-7 4.8-17.3 1.6-25.7zm-20.2 2.7c.6 0 1.3 0 1.8.2 1.1.4 1.7 1.3 2 2.3-1-1.2-2.4-2.1-3.8-2.5zm-1.4 6.6c.9.9 1.3 2.2-.2 2.3-2 .2-1.1-1.9.2-2.3zm-11.8 9.8c-.6-.3-2.9-1.1-3.2-1.8-.2-.5 1.4-3.1 2.1-4.2.3.5.7 1 1.2 1.4 0 .3.1.6.2.8.5 1.9 1.5 3.1 2.9 4h-.2c-.8.1-1.6.1-2.5-.1-.2 0-.3 0-.5-.1zM24 36.4c1.6-.7 3-1.5 4.3-2.5.8.2 1.7.3 2.5.5 2.5.4 5.2.9 7.7.6-.9.6-2 1.1-3 1.4-3.9 1.3-7.7 1-11.5 0z'/%3E%3C/svg%3E") ' ';
}

#left-column li:nth-child(3n - 1)::marker {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='14' viewBox='0 0 50 50'%3E%3Cpath d='M48.3 23.7c-1-9.9-9.9-15.6-18.8-17.8-8.2-2.1-18.8-2.6-24.6 4.8C.6 16.2 1 23.6 4.3 29.3c-.5 1-.8 2-1 3-.6 4 2 7.6 5.1 10 5.9 4.4 14 4.2 19.6-.4 1.5 0 2.9-.2 4.4-.5 1.8 0 3.5 0 5.3-.1 2.3-.1 3.5-1.9 3.5-3.7 4.5-3.3 7.7-8.2 7.1-13.9zM9.1 17.8c1.1-4.1 4.9-5.8 8.8-6.1.9-.1 1.9-.1 2.9-.1-3.2 1.6-6.3 4.6-8 7.4-.1.1-.1.2-.2.3-1.1.9-2.1 1.9-3 2.9-.2.2-.4.4-.5.6-.4-1.7-.5-3.3 0-5z'/%3E%3C/svg%3E") ' ';
}