body {
                font-family: 'Times New Roman', Times, serif;
                margin: 0;
    font-weight: normal;
    font-style: normal;

                background-color: #000000;
                /* you can delete the line below if you'd prefer to not use an image */
                color: #ffffff;
          
                background-image: url(HOMEBG.png);
 background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: auto;
    background-position: right bottom;
   
margin: 0 auto;
      cursor: url("cursor2.png"), auto;
            margin:0;
  height:100vh; /* use 100% of the height of the viewport */
  display:grid;             
  place-items: center;
              }
.box {
  border: 2px solid black;
  padding: 5px;
  margin: 2px;
      margin:0;
  height:100vh; /* use 100% of the height of the viewport */
           
  

      background-color: #000000;
                border: 1px solid #870f2e;
                padding: 10px;
                   overflow: auto;
                 overflow-x: hidden;
                   scrollbar-width: thin;
                   scrollbar-color: #870f2e rgb(0, 0, 0);
             
}


.grid-container {
  display: grid;
  grid-template-areas: "col1 col2 col3";
               
                padding: 10px;
                text-align: center;
display: flex;
justify-content: center;
align-items: center;
    position: center;
}

#g1 {
  grid-area: col1;
   height: 650px;
   width: 150px;
   text-align: left;
   font-size: medium;


}

#g2 {
  grid-area: col2;
   height: 700px;
   width: 600px;
}

#tinybox {


  padding: 1px;
  margin: 2px;
  height: 145px;
  width: 200px;

      background-color: #000000;
                border: 1px solid #870f2d;
              overflow: auto;
                 overflow-x: hidden;
                   scrollbar-width: thin;
justify-content: center;
float:left

}

#miscbox {

   background-color: #000000;
                border: 1px solid #870f2d;
              overflow: auto;
              text-align: left;
 padding: 10px;

              overflow: auto;
                 overflow-x: hidden;
                   scrollbar-width: thin;
                   scrollbar-color: #870f2e rgb(0, 0, 0);
                 
line-height: 20px;

  height: 145px;
  width: 350px;
  float:right



}

#g3 {
  grid-area: col3;
   height: 650px;
   width: 200px;
}

#header {
  grid-area: col2;
 display: flex;
justify-content: center;
align-items: center;
   padding-top: 10px;



}

#img {
    margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
  margin-left: 10px;
   

}

#button {

  padding: 1px;
}

#button:hover {

   cursor: default;
    transform: rotate(5deg);
    transition: all 0.1s ease-in-out 0s;
}

#yume-ring {
  margin: 0 auto;
  padding: 0px; /* creates some space around the widget */
}

#yume-ring table {

  margin: 0 auto; /* centers the widget */
}

#yume-ring table tr td {
  padding: 5px; /* creates some space between the links and text inside the widget */
}

#yume-ring .webring-prev {
  text-align:right;
}

#yume-ring .webring-info {
   text-align:center;
}

#yume-ring .webring-next {
  text-align:left;
}

#yume-ring .webring-links {
  font-size:small;
}



            h1, 
            h2,
            h3 {
                color: #ca0738;
            }

            h1 {
                font-size: 25px;
            }

            strong {
                /* this styles bold text */
                color: hsl(345, 93%, 41%);;

            }
mark {
  background-color: #ca0738;
  color: rgb(255, 255, 255);
}

a:link { color:  #ca0738; 
   text-decoration: none; }
a:visited { color: #ca0738; 
   text-decoration: none;
}  
a:hover { 
 color: #ffbecf;
  font-style: italic;
    letter-spacing: 1px;
}  
a:active { color: #ca0738;
 text-decoration: none; } 
hr.solid {
  border-top: 0.5px solid #ca0738;
   border-bottom: none;
}