:root {
  --aside-width: 300px;
  --sidebar-padding: 15px;
  --post-width: 540px;
  --post-padding: 20px;
  --post-vertical-spacing: 15px;
  --post-margin: 20px;

  font-size: 16px;
  line-height: 1.5;
}

@font-face {
  font-family: 'minipixel'; 
  src: url('https://its-klrb.neocities.org/assets/fonts/mini_pixel-7.ttf') format('truetype');}
  
/* Global */

body {
  background-image: url('https://its-klrb.neocities.org/assets/olena-bohovyk-Cq5NaI0yKBE-unsplash.jpg');
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: "minipixel", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
  margin: 0;
}

iframe { display: block; }
small { font-size: 81.25%; }

a {
  color: #fff;
  text-decoration: none;
  transition: 0.5s;
  cursor: pointer;
}
a:hover{
  color: #ffd42a;
  transition: 0.5s;}


/* HEADER */
.rb-header{
  padding: 16px 0;
  width: 80%;
  height: 10%;
  display: block;
  margin: auto;}

.rb-welcome, .rb-hellscape{
  text-align: center;
  line-height: 60%;
  padding: 0;
  display: block;
  width: 100%;
  color: white;}
  
.rb-welcome{
  font-size: 3rem;}
  
.rb-hellscape{
  font-size: 5rem;}
    
.rb-hellscape:hover{
  color: red;
  cursor: pointer;
  animation: shimmy 0.12s infinite;}


@keyframes shimmy {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  10% {
    transform: translate(-3px, 2px) rotate(-4deg);
  }
  20% {
    transform: translate(4px, -2px) rotate(5deg);
  }
  30% {
    transform: translate(-2px, -4px) rotate(-3deg);
  }
  40% {
    transform: translate(3px, 3px) rotate(4deg);
  }
  50% {
    transform: translate(-4px, 1px) rotate(-5deg);
  }
  60% {
    transform: translate(2px, -3px) rotate(3deg);
  }
  70% {
    transform: translate(-3px, 4px) rotate(-4deg);
  }
  80% {
    transform: translate(4px, 2px) rotate(5deg);
  }
  90% {
    transform: translate(-2px, -2px) rotate(-3deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

/* MAIN */
.rb-container{
  width: 80%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gaps: 20px;
  margin: auto;}

/* NAV */
.rb-nav{
  padding: 0 0;
  margin: 0 0;
  grid-column: col-start 3 / span 8;
  grid-row: row-start 1;}

ul{
  list-style-type: none;
  justify-content: space-around;
  text-align: center;
  margin: 1rem 0;
  list-style-type: none;
  display: flex;}

li{
  margin: 0 auto;
  float: left;
  text-align: center;
  padding: 8px;
  margin: 0 0.25rem;
  font-size: 1.2rem;
  border-image-slice: 5;
  border-image-width: 8px;
  border-image-repeat:stretch;
  border-image-source: url("https://static.tumblr.com/zct0zqe/wgxth1i3v/outlines-gold.svg");
  transition: 0.5s;}

li:hover{
  transition: 0.5s;}

.rb-button{
  width: 20%;}

  /* GRID */
.rb-main{
  grid-column: col-start 3 / span 10;
  grid-row: row-start 2 / span 12;
  padding: 20px;
  font-size: 1.5rem;
  margin: 0;}

.rb-sidebar-L{
  grid-column: col-start 1 / span 2;}
.rb-sidebar-R{
  grid-column: col-start 11 / span 2;}
    
.rb-sidebar-L, .rb-sidebar-R{
  grid-row: row-start 1 / span 12;
  display: flex;
  height: 900px;
  margin: 20px;
  color: white;
  text-align: center;
  justify-content: center;
  border-image-slice: 5;
  border-image-width: 8px;
  border-image-repeat:stretch;
  border-image-source: url("https://static.tumblr.com/zct0zqe/wgxth1i3v/outlines-gold.svg");}
  
  
  /* POSTS */
  
  .rb-post{
    padding: 22px;
    background-color: #000;
    color: #fff;
      border-image-slice: 5;
  border-image-width: 8px;
  border-image-repeat:stretch;
  border-image-source: url("https://static.tumblr.com/zct0zqe/wgxth1i3v/outlines-gold.svg");
    }
  
/* SIZE CHANGES */
@media screen and (max-width: 1120px){
  .rb-sidebar-L, .rb-sidebar-R{
    display: none;}
  .rb-main{
    grid-column: col-start 1 / span 12;}
}


@media screen and (max-width: 1000px){
  .rb-header, .rb-footer, .rb-container{
    width: 800px;}
  ul{
    width: 526px;}
}

@media screen and (min-width: 1120px){
.rb-container, .rb-header, .rb-footer{
  width: 1135px;}
.rb-main, .rb-nav{
  width: 735px;}
}