* {cursor: url(https://ani.cursors-4u.net/symbols/sym-8/sym752.cur), auto !important;}

@font-face {
  font-family: 'Roboto Mono';
  src: url('RobotoMono-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  }

html {
  font-family: "Roboto Mono";
}
/* home page */

#index {
    background-color: darkred;
    background-image: url(bg.gif);
}
    
body {
    width: 80%;
    margin: auto;
    margin-top: 5%;
    margin-bottom: 5%;
    text-align: center;
}

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
}

header {
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
margin: auto;
margin-top: 5%;
}

#index_header{
background-image: url('http://dl5.glitter-graphics.net/pub/169/169805yji9cwrp30.gif');
background-attachment: fixed;
background-repeat: repeat;
color: darkred;
}

footer{
background-color:coral;
padding: 15px;
/*width: 70%;*/
margin: auto;
margin-bottom: 5%;
}


main {
background-color: aliceblue;
padding: 15px;
margin: auto;
}

.cont{
margin: 0%;
height: 600px;
background-color: aliceblue;
margin: auto;
display: grid;
grid-template-columns: 25% auto 25%;
grid-template-rows: 100%;
}

div{
  margin: 1%;
  padding: 5%;
}


#one {
  background-color: yellow;
}

#left{
  background-color: aquamarine;
  }
  
  #buttons{
  overflow-y: scroll;
  margin: auto;
  background-color: blue;
  padding: 2%;
  max-height: 40%;
  }

#right{
  background-color: chocolate;
  overflow-y: scroll;
}

#right::-webkit-scrollbar {
    display: none;
}

#right {
  -ms-overflow-style: none;  
  scrollbar-width: none; 
}


    #index_section {
      text-align: left;
      background-color: aqua;
      padding: 3%;
      }
    
    #index_h4 {
      background-color: deeppink;
      }

#maain {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
  }


#maain #mainn a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

#maain #mainn a:hover {
  background-color: deeppink;
  transform:scale(1.19);
}

.img-shakehover{
  margin: 3%;
}

.img-shakehover:hover {
animation: shake 0.5s; 
animation-iteration-count: infinite; 
-webkit-filter:blur(1px); 
-webkit-transition: .5s ease-in; 
} 
 
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
} 
       
  

/* About me ----------------------------------------------------------- */



#about {
background-image: url('http://dl8.glitter-graphics.net/pub/709/709938svna7c1szr.gif');
background-attachment: fixed;
background-repeat: repeat;
}

.about {
  margin-bottom: 5%;
}

#abtme_header {
  background-color: darkgoldenrod;
  }
  
#abtme_container {
  background-color: darkcyan;
  display: grid;
  grid-template-columns: 50%;
}

#abtme_main {
  padding: 10px;
  grid-column: 1/3;
}


.abtme_small {
  height: 250px;
  overflow-y: scroll;
}

#general_info{
  background-color: chartreuse;
  grid-column: 1/1;
}

#yanose {
  text-align: left;
  }

#other_facts{
  background-color: bisque;
  grid-column: 2/2;
}

#abtme_bullets {
  list-style-image: url(P44VgV0.gif);
  text-align: left;
  }

#stamps {
  background-color: violet;
  grid-column: 1/3;
  }

#stamps {
  overflow: auto;
  }

/* Blog ------------------------------- */

#blog_all {
background-image: url('http://dl.glitter-graphics.net/pub/3360/3360061nsc1dy8af1.gif');
background-attachment: fixed;
background-repeat: repeat;
}

#blog_body {
  width: 65%;
}

#blog_header {
background-image: url('http://dl2.glitter-graphics.net/pub/99/99472znutl5jkwj.gif');
background-attachment: fixed;
background-repeat: repeat;
}

  
#blog_container {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  }

.typablog { 
  margin: 5%;
  padding: 3%;
  }

.typablog:hover {
  transform: scale(1.1);
  }

#observations {
  background-color: dodgerblue;
  }
  
#actualblog {
  background-color: lightslategray;
  }

#anecdotes {
  background-color: indianred;
  }
  
/* Gallery -------------*/

#why_are_you_seeing_this {
  padding: 1%;
  background-color: pink;
  }

#gallery_all {
background-image: url('http://dl7.glitter-graphics.net/pub/676/676657yhxq5o5bjd.gif');
background-attachment: fixed;
background-repeat: repeat;
}

#gallery_arts {
  padding: 30px;
  display: grid;
  grid-template-columns: 220px 220px 220px 220px 220px;
  grid-template-rows: 220px 220px;
  
}

#dibujos {
  border-width:10px; 
  border-style:solid;
  border-image: url("https://i.imgur.com/I7i5Udr.png") 35 fill round;
}

.artworks:hover {
  transform: scale(1.09);
}

#back {
  background-color: deeppink;
  text-align: left;
  padding: 1%;
  width: max-content;
  }

/* How to support me -----------*/

#HTSM {
  background-color: #7D5E43;
}

#paper {
  text-align: justify;
  background-color: #BFBFBF;
  height: 500px;
  padding: 5%;
}

/*Contact --------------*/

#contact_all {
background-image: url('http://dl3.glitter-graphics.net/pub/3356/3356823zoa4654ot4.gif');
background-attachment: fixed;
background-repeat: repeat;
}

#contact_main {
  background-color: #E36262;
  }

iframe {
  display: block;
  margin: auto;
}

#insertname {
  background-color: deeppink;
  list-style-type: none;
  margin: 0;
  padding: 0;
}


/* Out of character -------------*/

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

#ooc_all {
background-color: #FFFF70;
font-family: 'StayPuft';
}

#its3am {
  background-color: #FFC200;
  }

#ooc_ulnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: yellow;
  display: flex;
  justify-content: center;
  }


#ooc_ulnav #ooc_li a {
  color: black;
  display: block;
  padding: 14px 16px;
  text-decoration: none;
}

#ooc_ulnav #ooc_li a:hover {
  background-color: red;
  transform:scale(1.19);
}