body {
      font-family: 'Courier New', monospace;
      margin: 4vw;
      transition: background-color 0.4s, color 0.4s;
    }
    
    .dark-mode {
      background-color: #2a2b35;
      color: #fafafc;
    }
    .light-mode {
      background-color: #fafafc;
      color: #3a3b44;
    }
    
    .title {
      text-align: left;
      font-weight: bolder;
      }
    
    .toggle {
      text-align: right;
    	cursor: pointer;
    	padding-left: 1vw;
    	margin: auto;
      opacity: 0.6;
      transition: .4s;
      }
      
    .toggle:hover {
    	cursor: pointer;
    	opacity: 1;
    }  
    
    .flex-container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
    }
      
    .flex-container > div {
      width: 33%;
      height: 1vw;
      }
      
      header {      
        font-size: large;
        font-weight: bold;
        text-align: center;
        padding-left: 1vw;
        padding-right: 1vw;
        }
      
      .menu {
        word-spacing: 1vw;
      }  
      
      .menu a {
        text-decoration: none;
        color: inherit;
        padding: .5vw;
      }
      
      @media only screen and (max-width: 600px) {
        .flex-container {
          flex-direction: column;
          width:100%;
          height: 100%;
          justify-content: center;
          align-items: center;

        }
        
        .flex-container > div {
          width: 33%;
          height: 10vh;
          text-align: center;
          align-content: center;
          margin: 1vw;
          }
          
          .title {
            font-size: 2.5em;
            
            }
            
      }