body
{
  background: #0F0521;
}
p
{
  font-family: 'georgia';
  color: #B197FD;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}

font
{
  font-family: 'georgia';
  color: #B197FD;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  
}

h1,h2,h3
{
  font-family: 'georgia';
  color: #B197FD;
  text-align: center;
}

div 
{
  color: #ffb6f6;
  font-family: 'georgia';
  text-align: center;
  border-style: none;
  border-width: 2px;
  padding: 10px;
}
#divimg {
  border-radius: 20px;
  border: none;
  padding: 0;
  text-align: center;
  width: 90%;
  height: 200px; 
  margin: 0 auto;
}

#div2 {
  border-radius: 20px;
  border: 5px solid #291F3B;
  padding: 20px;
  text-align: center;
  width: 90%;
  height: 200px; 
  margin: 0 auto;
}

  
/* Div three is going to be use for a scrolling sidebar? */
#div3
{
  border-radius: 20px;
  border: 5px solid #291F3B;
  padding: 20px;
  text-align: center;
  margin: auto;
  width: 250px;
}
/* long div */
#div4
{
  border-radius:20px;
  border: 5px solid #291F3B;
  padding: 0px:
  text-align: center;
  margin: auto;
  width: 100%;
  height: 50px;
}

div.box
{
  border-radius:20px;
  object-fit: contain;
}

/* div.scroll is the actual attribute for the scrolly box */
div.scroll {
  width: 200px;
  height: 500px;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: center;
padding: 0px;
}

div.scrollmin {
  width: 200px;
  height: 250px;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: center;
padding: 0px;
}

div.scrollwide {
  width: 1000px;
  height: 150px;
  overflow-x:default;
  overflow-y: auto;
  text-align: center;
padding: 0px;
}

/* an attempt to make the collum style I want in divs instead of a table */

div.floaty
{
 float:left;
 padding: 5%;
}  
div.floatytwo
{
 float:right;
 padding: 5%;
}  


/* dropdown code */
.dropdown {
  position: relative;
}
.dropdown-content {
  border-radius:20px;
  display: none;
  position: absolute;
  background-color: #291F3B;
  font-size: 14px
  min-width: 50%;
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
  padding: 40px 40px;
}
.dropdown:hover .dropdown-content {
  display: block;
}

table
{
 border-style: none;
 border-width:10px;
 text-align: center;
 margin: 0 auto;
}

th
{
  border-radius: 20px;
  color: #ffb6f6;
  text-align: center;
  border-style: dotted;
  border-width: 2px;
  padding: 30px;
  width: 400px;
  height: 60px;
}
th.pinky, td.pinky
{
  color:#ffb6f6;
  text-align: center;
  border-style: none;
  font-size:20px;
  padding:15px;
}
th.no
{
  border:none;
}  
tr:nth-child(even)
{background-color: #291F3B}

td
{
  color: #ffb6f6;
}
/* I am going to see if I can change the padding attribute in the scroll area - Didn't work. */

li
{
  color: white;
}

p.dotted {
  border-style: none none dotted none;
  color: #ffb6f6;
  }

img.round 
{
  border-radius: 20px;  
}
a
{
  color: #ffb6f6;
  font-size:20px;
   font-family: 'georgia';
   text-decoration: none;
{