body {
    font-family: Arial, "Arial", sans-serif;
    margin: 0;
    font-size: 18px;
    line-height: 1.3em;
  }
  
  h1, h2, h3, h4, h5 {
    font-family: Arial, "Arial", sans-serif;
  }
  
  :root {
    --light: #f5f5f5;
    --dark: #18120d;
    --clight: #fff6c6;
    --cdark: #0c1331;
  }
  
  img {
    width: 99.9%;
    line-height: 0px;
    vertical-align: bottom;
  }
  
  video {
    width: 99.9%;
    line-height: 0px;
    vertical-align: bottom;
  }
  
  /* light mode*/
  
  body {
    background-color: var(--light);
    color: var(--dark)
  }
  
  a:link {
    color: var(--dark);
  }
  
  a:visited { 
    color: var(--dark);
  }
  
  /* */
  
  main {
    width: 85%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
  }
  
  #box {
    padding: 5px;
    background-color: var(--light);
    border: 1px ridge var(--dark);
    margin: 5px;
  }
  
  .leftcolumn {
    flex: 1 1 33%;
    vertical-align: top;
  }
  .middlecolumn {
    flex: 1 1 33%;
    vertical-align: top;
  }
  .rightcolumn {
    flex: 1 1 33%;
    vertical-align: top;
  }
  
  /* dark mode */
  
  @media (prefers-color-scheme: dark) {
    body {
      background-color: var(--dark);
      color: #fff6c6;
    }
    a:link {
      color: var(--light);
    }
    a:visited {
      color: var(--light);
    }
    
  #box {
    background-color: var(--dark);
    border: 2px ridge var(--light);
  }
  }
  
  /* screenwidth */
  @media screen and (max-width: 1024px) {
    .main {
        display:block;
    }
  }