body {
    margin: 0;
    border-left: 50px solid black; 
    border-right: 50px solid black;
    background-color: rgb(194, 174, 149);
    min-height: 100vh;
}

.baloo-tamma-2-funni {
  font-family: "Baloo Tamma 2", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 167px;
  height: 250px;;
}

pre {
   font-size: 18px;
 }

 p {
  font-size: 18px;
  font-family:'Courier New', Courier, monospace;
  /* text-align: center; */
 }

.title-text{
  text-align: center;
}

.logo {
  border-radius: 8px;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  transition: transform 0.3s ease-in-out;
}

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

  b {
  font-size: 32px;
}

/* ------------------------ */
/* This code here is used for the index page */
/* ------------------------ */
.bopper {
  position:static;
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  float:none;
}

.containment{
   position: static;
   width: 1000px;
  /* background-color: red; */
   margin-left: auto;
   margin-right: auto;
   float:none;
            }

.column_about{
   position: relative; 
   float: left;
   width: 475px;
   margin-left: 0px;
   margin-right: 50px;
   margin-top: 10px;
  /* background-color: blue; */
             }

.column_specimines{
   position: relative; 
   float: left;
   width: 475px;
   margin-top: 10px;
  /* background-color: pink; */
                  }

/* ------------------------ */
/* This code here is used for the layer twos of the page */
/* ------------------------ */

.infobar{
  position: static;
  margin-left: auto;
  margin-right: auto;
  width: 1000;
 /* background-color: red; */
}

.column_theauthors{
   position: relative; 
   float: left;
   width: 493px;
   margin-top: 5px;
   background-color: gray;
   /* background: url("Maya&face.jpg") */
             }

.column_information{
   position: relative; 
   float: left;
   width: 493px;
   margin-top: 5px;
   background-color: white;
   /* background: url("Perstell&Smiles.jpg") */
            }

/* ------------------------ */

.column_perstell{
   position: relative; 
   float: left;
   height: 495px;
   width: 493px;
   margin-left: 0px;
   margin-right: 14px;
   margin-top: 5px;
   background-color: pink;
   /* background: url("Maya&face.jpg") */
             }

.column_smiles{
   position: relative; 
   float: left;
   height: 495px;
   width: 493px;
   margin-top: 5px;
   background-color: #654f33;
   /* background: url("Perstell&Smiles.jpg") */
                  }

/* ------------------------ */
/* This code below here is used for the layer threes of the webpage */
/* ------------------------ */

.column_coronation{
   position: relative; 
   float: left;
   width: 450px;
   margin-top: 10px;
   margin-left: 100px;
   margin-right: 0px;
             }

.column_textbox{
   position: static; 
   float: left;
   width: 360px;
   margin-left: 0px;
   border: solid 7.5px black;
   padding: 11px;
   padding-bottom: 0px;
   padding-top: 0px;
   background-color:#654f33;
            }

  .column_smilebox{
   position: static; 
   float: left;
   width: 360px;
   margin-left: 100px;
   border: solid 7.5px black;
   padding: 11px;
   padding-bottom: 0px;
   padding-top: 0px;
   background-color:#654f33;
            }          

.column_dog{
   position: relative; 
   float: left;
   width: 450px;
   margin-left: 0px;
   margin-right: 0px;
   margin-top: 5px;

}

.column_party{
   position: relative; 
   float: left;
   width: 525px;
   margin-left: 35px;
   margin-right: 0px;
   margin-top: 0px;
 /*  background-color:azure; */
}

.column_info {
  position: relative; 
   float: left;
   width: 500px;
   margin-left: 250px;
   margin-top: 5px;
   border: solid 7.5px black;
   background-color:#654f33;
}

/* ------------------------ */
.Dr_Pepper {
  margin-left: auto;
  margin-right: auto;
}

.Dr_Pepper a:link {
  color:black;
  font-family:'Courier New', Courier, monospace;
  font-size: 36px;
}

.Dr_Pepper a:visited {
  color: grey;
  font-family: 'Courier New', Courier, monospace;
  text-decoration: none;
}

.Dr_Pepper a:hover {
  color:white;
  font-family: 'Courier New', Courier, monospace;
  background-color:gray;
  text-decoration:underline;
}

.Dr_Pepper a:active {
  color:red;
  font-family: "Impact";
  text-decoration: underline;
}
/* ------------------------ */
/* This code here is used for spacing...there's a lot of variation for specific spacing. */
/* ------------------------ */

  .spacing {
  padding-left: 100px;
  padding-right: none;
  display: inline;
}

.spacing2 {
  padding-left: 300px;
  padding-right: none;
  display: inline;
}

.spacing3 {
  padding-left: 350px;
  padding-right: none;
  display: inline;
}

.spacing4 {
  padding-left: 235px;
  padding-right: none;
  display: inline;
}

.spacing5 {
  padding-left: 210px;
  padding-right: none;
  display: inline;
}

.spacing6 {
  padding-left: 175px;
  padding-right: none;
  display: inline;
}

.spacing7 {
  padding-left: 1px;
  padding-right: none;
  display: inline;
}

.spacingface {
  padding-left: 140px;
  padding-right: none;
  display: inline;
}

.spacingwitch {
  padding-left: 115px;
  padding-right: none;
  display: inline;
}

.spacingauthor {
  padding-left: 400px;
  padding-right: none;
  display: inline;
}

.spacingdog {
  padding-left: 75px;
  padding-right: none;
  display: inline;
}

.spacing8 {
  padding-left: 315px;
  padding-right: none;
  display: inline;
}

.spacingus {
  padding-left: 330px;
  padding-right: none;
  display: inline;
}

.spacinginfo {
  padding-left: 425px;
  padding-right: none;
  display: inline;
}