:root{
    --white: #FFEBEC;
    --black: #45353A;
    --red:   #FF474A;
    --lavender:#E1CEF3;
    --green:#3EB489;
}

body
{
    background-color: var(--white);
    margin: 0px 0px;
    padding: 0px 0px;
}
hr{
    background-color: var(--lavender);
}
div{
    margin: 0px 0px;
    padding: 0px 0px;
    width:100%;
}
nav
{
    margin: 0;
}
p
{
    font-size: 100%;
    font: georgia;
    padding: 0% 1%;
}

h1
{
    text-align:center;
    color: var(--black);
    background-color: var(--lavender);
    vertical-align: 0ch;
    padding: 2% 1%;
    font: georgia;
}
h2{
    padding: 0% 1%;
}

a
{
    font-size: 150%;
    font: georgia;

    color: var(--black);
    text-decoration: none;
    background-color: var(--white);
    font-weight:900;

    text-align: center;
    width:19.5%;
    padding: .4ch .4ch;
    border: .1ch solid var(--black);
    display:inline-block;
    vertical-align:-.2ch;
    overflow:hidden;
    box-sizing:border-box
}
a:hover
{
    border:rgba(0,0,0,0);
    color: var(--lavender);
    background-color:var(--white);
    outline: .2ch solid var(--lavender);
    text-shadow: -1px 1px var(--black);
}


 /* Dropdown Button */
  
  /* The container <div> - needed to position the dropdown content */
  /**WHAT THE ACTUAL FUCKK!?!?!?!?!**/
  /**If dropdown is less than 100, the anchors within are tiny, otherwise**/
  .dropdown {
    position: relative;
    display: inline-block;
    width:19.5%;
    white-space: nowrap;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    width: 100%;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: var(--black);
    /*padding: 12px 15px;*/
    width:100%;
    text-decoration: none;
    display: block;
  }

  .dropbtn{
    width:100%;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {color: var(--lavender)}
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {display: block;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .dropbtn {
    color: var(--lavender); 
    text-shadow: -1px 1px var(--black);
}