Style sheet for a basic website

lingebra.css

/*!
 * lingebra.css
 * This file was created for a linear algebra course website.
 * Version - 0.1.0
 *
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 * Copyright (c) 2019 Jan Kytka
 */

* {
   font-family: Georgia, serif;
}
html { background: #ccd; }
body {
    max-width: 1024px;
    padding: 0px 50px;
    padding-top: 20px;
    margin: 0px auto;
    text-align: justify;
    background: white;
    box-shadow: 0 0 80px 0 rgba(0, 31, 93, 0.5);
    overflow: auto;
}
body::after {
  content: "";
  clear: both;
  display: table;
  padding-bottom: 20px;
}
h1, h2, h3, h4, h5 { text-align: left; }
h1 { padding: 20px; }
/* FULLWIDTH */
h1, #menu { padding-left: 70px; margin-left: -50px; margin-right: -50px; }
ul li { text-align: left; }

/* IMG */
img {
    margin-left: -30px;
    margin-right: 20px;
    width: 50%;
    float: left;
}

/* TABLES */
table {
     min-width: 80%;
     margin: 0px auto;
     margin-top: 20px;
     border-collapse: collapse;
     border: none;
}
td { padding: 5px; border: none; position: relative; text-align: left; }
table tr:not(:last-child) {  border-bottom: 1px solid #aaa; }
br + table { margin-top: 0px; }

table:not(:nth-of-type(1)) tr:first-child, h1 {
    font-weight: bold;
    color: white;
    background: #039;
    border: none;
}
table#body tr:nth-of-type(2) { font-weight: bold; }
table#body tr:first-child td:nth-of-type(6) { position:absolute; }

/* LINKS */
a[href], #menu::before { text-decoration: none; color: #004ade; transition: color .5s, background .5s; }
a[href]:hover { text-decoration: underline; }
td a[href] { display: block; text-align: center; border-radius: 0px; }


/* MENU */
#menu { background: #039; margin-bottom: 15px; text-align: left; }
#menu a, #menu::before {
    display: inline-block;
    padding: 12px;
    background: #039;
    color: white;
    border-radius: 0px;
}
#menu a[href]:hover, #menu:hover::before { background: #cdf; color: black; }

/* COLLAPSE MENU */
@media only screen and (max-width: 420px) {
  body {
    padding-top: 49px !important;
  }
  body #menu {
    position: fixed;
    top: 0px;
    width: 100vw;
    padding-left: 0px !important;
    height: 49px;
  }
  #menu a {
    position: relative;
    display: block;
    text-align: center;

    transition: opacity .5s;
    display: none;
  }
  #menu:hover a {
    display: block;
  }
  #menu::before {
    display: block;
    content: 'Menu';
    text-align: left;
    font-weight: bold;
  }

  body table td, body table td a, body table td b {
      font-size: 4vw;
  }
}

@media only screen and (max-width: 720px) {
    body { padding: 10px; padding-top: 0px; }
    table { width: 100% }
    table td { padding: 0px; }
    h1 { padding: 10px; }
    /* FULLWIDTH */ h1, #menu { padding-left: 20px; margin-left: -10px; margin-right: -10px; }

    /* ZAPOCET FIX */
    table#body tr:first-child td:nth-of-type(2) { position:absolute; margin-left: -50px; }

    body table#body td {
      font-size: 3vw;
    }

    a[href] { display: inline-block; padding: 12px; background: #eee; border-radius: 10px }
    li a[href] { margin: 3px 0; }
    a[href]:hover { background: #039; color: white; }
    #menu a[href], #menu::before { padding: 15px; }

    img {
        margin: 15px 0px;
        width: 100%;
        float: none;
    }
}