/*The links inside the dropdown are buttons, but I wanted to make them look good. */

#menu ul{
    list-style: none;
    display: flex;

}
#menu li{
display: inline;

}

    header {text-align:center; vertical-align: text-top;}

    .button {
        padding: 8px;
        font-size: 16px;
        border: none;
        cursor: pointer;
        font-family: "Times New Roman", Times, serif;
    }

    .link {
        position: relative;
        list-style: none;
        padding: 5px;
        font-size: 16px;
        border: solid 2px;
        border-radius: 5px;
        cursor: pointer;
        font-family: "Times New Roman", Times, serif;

    }

    body {
        font-size: 16px;
        }
        
    footer {
        flex-shrink: 0;
        }

    .regularasstext {
        position: relative;
        margin: auto;
        padding: 10px;
        width: 50%;
        word-wrap: break-word
    }

    /* Dropdown Button */
    .dropbtn {
        position: relative;
        left: 100px;
        padding: 5px;
        font-size: 16px;
        border: solid 2px;
        border-radius: 5px;
        cursor: pointer;
        font-family: "Times New Roman", Times, serif;
    }

    /* The container <div> - needed to position the dropdown content */
    .dropdown {
        position: relative;
        display: inline-block;
    }

    /* Dropdown Content (Hidden by Default) */
    .dropdown-content {
       /* display: none; */
        position: absolute;
        min-width: 160px;
        z-index: 1;
    }

    /* Links inside the dropdown */
    .dropdown-content a {
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
    .show {display:block;}