html{
    min-height: 100%;
    scroll-behavior: smooth;
    background: linear-gradient(indigo, purple);
}

body{
    color: #FFD54F;
    font-family: "Datatype", monospace;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings:
    "wdth" 100;
}

/* Align PHAZE png to center of page */
#title{
    text-align: center;
    max-width: 100%;
    margin-bottom: 0;
}

/* Main menu bar. First div is to center entire bar, second div has menu items */
.main_menu{
    width: 750px;
    margin: 0 auto;
}

.menu_link{
    margin: 5px;
    transition: 0.5s ease-out;
}

a.menu_link:link, a.menu_link:visited{
    text-decoration: none;
    color: #FFD54F;
    display: inline-block;
}

a.menu_link:hover{
    background-color: #FFD54F;
    color: purple;
}

.synthwave-border {
  border: 2px solid #ff7edb; /* Magenta border color */
  box-shadow: 0 0 10px #ff7edb, inset 0 0 10px #ff7edb; /* Outer and inner glow */
  padding: 15px;
  border-radius: 5px;
  margin: 15px;
}

p::first-letter{
  font-size: 1.3em;
}

.main-content {
  width: 1000px;
  margin: 0 auto;
}

/* Back to top button on bottom right of screen */
#backToTop{
    background-color: purple;
    display: inline;
    padding: 5px;
    float: right;
    position: fixed;
    bottom: 5px;
    right: 5px;
    color: #FFD54F;
    text-decoration: none;
    transition: 0.5s ease-out;
}
#backToTop:hover{
    background-color: #FFD54F;
    color: #8E24AA;
}