body {
  background-color: #1c1c1c;
  opacity: 1;
  background-image:  linear-gradient(#3a3a3a 1.4000000000000001px, transparent 1.4000000000000001px), linear-gradient(to right, #3a3a3a 1.4000000000000001px, #1c1c1c 1.4000000000000001px);
  background-size: 28px 28px;
  font-size: 14px;
  color:white;
  font-family: notosans;
  text-align:justify;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

p{
  line-height:1.75;
}


/*-- Headliner --*/

h1{
  color:white;
  font-size:40px;
  text-align:center;
}

h2 {
  font-size:25px;
}

h3{
  font-size:16px;
  font-weight:bold;
  color:white;
  background-color: skyblue;
  padding:10px;
  margin-top:0;
  margin-bottom:0;
}

/*-- Border --*/
hr{
  margin-top:30px;
  margin-bottom:30px;
}

/*-- Font --*/
@font-face {
  font-family: notosans;
  src: url(fonts/NotoSans-Regular.ttf);
}

@font-face {
  font-family: pixantiqua;
  src: url(fonts/PixAntiqua.ttf);
}
  

/*-- Links --*/
a:link, a:visited, a:active {
  color: black;
  font-weight:bold;
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

/*-- Header --*/
.header{
    display: flex;
    justify-content: center;
}

/*--Top Div --*/
.top{
  border-radius:15px 15px 0 0;
  background-color:black;
}

/*-- Navigation --*/
.nav{
}

.nav a{
    display:block;
    color: black;
    font-weight:normal;
    padding: 5px;
    text-decoration: none;
}

.nav a:hover{
  color:white;
  background-color: skyblue;
  text-decoration: underline;
}


/*-- Kofi --*/
.kofi {
  display:flex;
  justify-content:center;
  padding:20px;
}


/*-- Flex --*/
.flex{
  display: flex;
  justify-content: center;
  column-gap:10px;
}

/*-- Content --**/
/*-- Left --*/
.left{
  background-color: white;
  width:300px;
  order: 1;
}

/*-- Main --*/
.main{
  background-color: #282838;
  padding:25px;
  width: 800px;
  order:2;
}

/*-- Stream --*/
.main table {
  border-collapse: collapse;
  width: 100%;
}

.main td, th {
  text-align: left;
  padding: 10px;
}

.main tr:nth-child(odd) {
  background-color: none;
}


/*--Right--*/
.right{
  background-color: #282838;
  padding:25px;
  width:300px;
  order: 3;
}


/*-- Mobile --*/
  @media only screen and (max-width: 500px) {
    .flex {
        flex-direction: column;
    }
    .left, .main, .right{
        max-width: unset;
    }
}

@media only screen and (max-width: 500px){
      .flex{max-width: 100%;
      height:auto;
}
}


/*-- Footer --*/
.footer{
    text-align: center;
    color:white;
    font-size:10px;
    margin:10px;
}

.footer a{
  color:white;
  text-decoration:underline;
}