html{
    height:100%; margin:0;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    height:100%; margin:0;
    display:flex; 
    flex-direction:column;
}

p{
    margin-left: 10px;
    margin-right: 10px;
}

#header{
    padding: 10px;
    text-align: center;
    background: #1a1e30;
    color: white;
    font-size: 30px;
    border-style: none none none none;
    border-width: medium;
    width: 100%;

    -webkit-user-select: none;     
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
}

.header-link{
    text-decoration: none;
}

.header-link:link, .header-link:visited, .header-link:hover{
    color: white;
}

#foot{
    padding: 10px;
    text-align: center;
    background: #1a1e30;
    color: white;
    font-size: 20px;
    border-style: none none none none;
    border-width: medium;
    
    margin-top: auto;
    margin-left: 0;
    margin-right: 0;
    bottom: 0;
    width: 100%;
}

@media (min-width: 1281px) {
    #foot{
        font-size: 20px;
    }
}
  
@media (min-width: 1025px) and (max-width: 1280px) {
    #foot{
        font-size: 20px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    #foot{
        font-size: 15px;
    }
}
  
@media (min-width: 481px) and (max-width: 767px) {
    #foot{
        font-size: 15px;
    }
}
  
@media (max-width: 480px) {
    #foot{
        font-size: 12px;
    }
}