/* basic styling */

@font-face {
   font-family: baskerville;
   src: url('libre-baskerville.ttf') format('truetype');
}

body {
   font-family: baskerville;
   font-size: 15px;
   line-height: 22.5px;
}

nav, #main {
   color: #111;
   background-color: #EEE;
}

hr {
   border: solid 1px #111;
}

th {
   border-bottom: solid 1px #111;
}

td, th {
   padding: 0px 10px;
}

img {
   border: 1px solid #111;
   border-radius: 5px;
   width: 50%;
   float: right;
   margin-left: 10px;
}

ul {
   padding-left: 20px;
}

.broken {
   color: red;
}

/* alignment etc. */

body {
   background-image: url("background.jpg");
   background-size: 100% auto;
   background-position: top;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-color: #1A365A;
   
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
   align-items: flex-start;
   gap: 10px;
   margin: 10px;
}

nav {
   flex: 0 0 200px;
}

#main {
   flex: 0 0 calc((100% - 254px) / 2);
}

nav, #main {
   border: 1px solid #111;
   border-radius: 5px;
   padding: 10px;
}

@media (max-aspect-ratio: 3000/2290) { /* MOBILE */
   body {
      background-image: none;

      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
      align-items: stretch;
   }

   nav {
      order: 1;
   }

   img {
      width: calc(100% - 2px);
      margin: 0 0 1em;
   }
}