/*Fonts*/

@font-face {
  font-family: 'rainyhearts';
  src: url('fonts/rainyhearts.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NintendoDS";
  src: url("./fonts/Nintendods.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
	 font-family: "retrogression";
  src: url("./fonts/Retrogression-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  background-image: url("./images/apple.gif");
  font-family: 'rainyhearts', sans-serif;
cursor: url("apple.ani"), auto;
}

 h1, h2, h3, h4, h5, h6 {
  margin: 0.5em 0; /* top and bottom only */
}

  h1 {
  font-size: 45px;
    font-family: 'rainyhearts';
}

h2 {
  font-size: 40px;
  font-family: 'retrogression';
}

h3 {
  font-size: 35px;
    font-family: 'rainyhearts';
}

h4 {
  font-size: 30px;
    font-family: 'rainyhearts';
}

h5 {
  font-size: 25px;
    font-family: 'rainyhearts';
}



p {
  font-size: 20px;
   margin: 0.5em 0; /* top and bottom only */
}

/*decorative classes*/
.broider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABaElEQVR4AdTSgWlDMQyE4bYrdZ2Ml3U6U4qhHzwOhJzGBFR4/JWsk31Hvj6G/M196M/t9rh+u4FfNdf//6tP3dxEOfm+3z/XJx395Knzddf6cr96TqISQQ46VvMrlfWlvprPObV5nJMoByuF66e/S1oJqHf15uhQf06iXi6JJEcd6XJfp3NOn7RvTqIceXnFdEqXNJd9tXOs7tOnm5eolyPHqI8cP0t6tB/1k3MT7Zyl09N1df+8RCsnfoOnk7Ov2p/vmZcoh8gpZ2rnr9K+3f3zE02n6leTpLcvk3WenJcoZ+nkz/kj+6fqan++Z16iEkon+u9idf/cRCXHGeqj39azpEf7UT85L9EuGY4xHat3z81199o7J1GOOExy1JEu93U65/RJ++YkypGXo/4u6SSi3tWbo0P9OYlKADnoWM1nEvZU886T5nFOoulELRmO9JOnzt2X+9VzE5UQctTRfLLTOe90YxL9BQAA//8UlpHSAAAABklEQVQDAL0RUHM3KUm8AAAAAElFTkSuQmCC") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
  border-image-outset: 14px 14px 14px 14px;
}

/*Everything goes inside here*/
.container {
  width: 900px;
  margin: 0 auto;
  background-image: url("images/paper.png");
  margin-top: 20px;
  margin-bottom: 20px;
  display: grid;
  grid-template-areas:
    "header header"
	"links links"
    "top top"	
	"sidebar main";
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto auto auto 900px;
  padding: 5px;
}

.container div {
  padding: 10px;
}

/*header*/
.container div.header {
  grid-area: header;
  text-align: center;
  background-image: url("images/linepaper.gif");
}

/*navigation links and formatting for all links*/
.container div.links {
  grid-area: links;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.links ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  }
  
.links li {
  display: inline-block;
  margin-right: 16px; 
  }

 .links li:before, .links li:after {
  letter-spacing: 0.1em;
  }
  
   a {
  color: #c33c3c;

}

a:hover {
  color: #e7b1b1; 
  text-decoration: underline;
} 

/*page header*/
.container div.top {
	grid-area: top;
	text-align: center;
}

/*sidebar*/
.container div.sidebar {
grid-area: sidebar;
}

/*main*/
.container div.main {
grid-area: main;
overflow-y: auto;
height: 900px;
}

div.main img {
	max-width: 100%;
height: auto
}

.blog {
	 border: 3px dotted IndianRed;
  border-radius: 10px;
  margin: 5px;
}

.gallery {
	text-align: center;
}

.gallery img {
	display: inline-block;
	max-height: 200px;
	width: auto;
}
 
/*footer*/ 
  .footer {
  margin-bottom: 25px;
  width: 900px;
  margin: auto;
  background-image: url("paper.png");
  text-align: center;
  }
 

 /*scrollbar element and styling*/
  
      #scrolling {
      overflow: scroll;
      overflow-x: hidden;
      height: 10em;
      padding: 1rem;
    }

    ::-webkit-scrollbar {
      width: 16px;
      height: 16px;
    }

    ::-webkit-scrollbar-track {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
      image-rendering: pixelated;
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
    }

    ::-webkit-scrollbar-track:active {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
    }

    ::-webkit-scrollbar-thumb {
      border-top: 1px solid #cccccc;
      border-left: 1px solid #cccccc;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
      width: 16px;
      height: 16px;
      background-color: #cccccc;
      z-index: 1;
    }

    ::-webkit-scrollbar-corner {
      background-color: #cccccc;
    }

    ::-webkit-resizer {
      width: 16px;
      height: 16px;
      background-color: #cccccc;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
      background-position: bottom right;
      background-repeat: no-repeat;
      image-rendering: pixelated;
    }

    ::-webkit-scrollbar-button,
    .scroll::-webkit-scrollbar-button {
      border-top: 1px solid #cccccc;
      border-left: 1px solid #cccccc;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
      display: block;
      width: 16px;
      height: 16px;
      background-color: #cccccc;
      image-rendering: pixelated;
      background-repeat: no-repeat;
      background-position: center center;
    }

    ::-webkit-scrollbar-button:active,
    .scroll::-webkit-scrollbar-button:active {
      background-position: 2px 2px;
    }

    ::-webkit-scrollbar-button:horizontal:decrement,
    .scroll::-webkit-scrollbar-button:horizontal:decrement {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
    }

    ::-webkit-scrollbar-button:horizontal:increment,
    .scroll::-webkit-scrollbar-button:horizontal:increment {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
    }

    ::-webkit-scrollbar-button:vertical:decrement,
    .scroll::-webkit-scrollbar-button:vertical:decrement {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
    }

    ::-webkit-scrollbar-button:vertical:increment,
    .scroll::-webkit-scrollbar-button:vertical:increment {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
    }

    ::-webkit-scrollbar-button:horizontal:increment:start,
    .scroll::-webkit-scrollbar-button:horizontal:increment:start {
      display: none;
    }

    ::-webkit-scrollbar-button:horizontal:decrement:end,
    .scroll::-webkit-scrollbar-button:horizontal:decrement:end {
      display: none;
    }

    ::-webkit-scrollbar-button:vertical:increment:start,
    .scroll::-webkit-scrollbar-button:vertical:increment:start {
      display: none;
    }

    ::-webkit-scrollbar-button:vertical:decrement:end,
    .scroll::-webkit-scrollbar-button:vertical:decrement:end {
      display: none;
    }

    ::-webkit-scrollbar-button:active,
    .scroll::-webkit-scrollbar-button:active {
      border-top: 1px solid #868a8e;
      border-left: 1px solid #868a8e;
      border-bottom: 1px solid #868a8e;
      border-right: 1px solid #868a8e;
      box-shadow: none;
    }

/*Prevent image overflow.*/
.div img {
  max-width: 100%;
  height: auto;
  }