header
{
    position: fixed;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items:center;
    top:0px;
    left:20px;
    right:0px;
    border:none;
    z-index: 10000;
}
header p    
{
    color:white;
    font-weight:7;
    text-decoration:underline;
    font-size:30px;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    
}
header .logo
{
    color:white;
    font-weight:700;
    text-decoration:none;
    font-size:2em;
    text-transform:uppercase;
    letter-spacing:2px;
    white-space:pre;
}

header ul
{
width:500px;
display:flex;
align-content:center;
justify-content:space-between;
margin-right:50px
}

header ul li
{
list-style:none;
margin-left:40px;
}
header ul a
{
text-decoration:none;
color:white;
font-size:25px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
transition:500ms;
}
header ul a:hover
{
background-color:white;
color:black;
border-radius:8px;
padding:10px;
text-shadow:none;
border:solid;
border-color:black;
transform: scale(2);
}

@media (max-width: 768px) {
    /* Header */
header {
    padding: 5px 10px !important;
    flex-direction: column !important;
    align-items: center !important;
}

header .logo {
    font-size: 1.2rem !important;
    white-space: nowrap !important;
    margin-bottom: 5px !important;
}

header ul {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: space-around !important;
}

header ul a {
    font-size: 0.9rem !important;
    padding: 3px 5px !important;
}
}