:root {
                --body-bg-image: url('/images/pipboy3000size2.png');

                /* colors */
                --content: #43256E;
            }
        


            @font-face {
                font-family: 'monofonto';
                src: url ('monofonto.otf') format ('opentype'); 
          }
          

            body {
                font-family: 'monofonto', monospace;
                margin: 0;
                background-image: url('/images/pipboy3000size2.png');
                background-repeat: no-repeat;
                background-size: cover;
                background-color: black;
                background-position: 100% 8%;
              
            }

            * {
                box-sizing: border-box;
            }
            
li {
  color:#ffb642
}

.box {
    width:520px;
    height:500px;
    overflow:auto;
    overflow-x:hidden;
    background-color:transparent;
    padding:3px;
    text-align:center;
}
.btn-group button {
  font-family: 'monofonto', monospace;
  font-size: 140%;
  text-align: left;
  background-color: transparent; 
  border: 1px solid transparent; 
  color: #ffb642;  
  padding: 10px 10px;
  cursor: pointer;  
  display: block; 
}
            
  /* Add a background color on hover */
.btn-group button:hover {
  background-color: #4d3a19;
}
/* Add a background color on hover */
.btn-group button:hover {
  border-color: #ffb642;
}
  
           p {
  font-family: 'monofonto', monospace;
  color:#ffb642;
  display:block;
  word-break:break-all;
  text-align:left;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'monofonto', monospace;
  text-align: center;
  color:#ffb642;
}

.hr1 {
   width:500px;
   height:2px;
   border-color:#ffb642;
   text-align:center;
   margin-bottom:10px;
}

.column {
  float: left;
  width: auto;
  padding: 10px;
  display:block;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}      

.hidden {
        display: none;
   }
.visible {
        display: block;
   }
  

/* Scrollbar styles */
::-webkit-scrollbar {
width: 10px;
}


::-webkit-scrollbar-thumb {
background: #4d3a19;  
border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
background: #ffb642;  
}

.title {
  font-size:138%;
  letter-spacing:3px;
  text-align:left;
}

a {
  text-decoration: none;
}
      a:link {
  color: #ffb642;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: #ffb642;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: #4d3a19;
  border-color:#ffb642;
  text-decoration: none;
}

a:active {
  color: #ffb642;
  text-decoration: none;
}

.date {
  color:#ffb642;
  font-size:130%;
  text-align:left;
  letter-spacing:3px;
}

.text {
  color:#ffb642;
  font-size:120%;
  text-align:left;
}

.done {
  color:#4d3a19;
  font-size:120%;
  text-align:left;
}

    .navbar {
  font-family: 'monofonto', monospace;
  background-color: transparent; 
  border: 3px solid transparent;
  padding:2px 3px 2px 3px;
  color: #ffb642;  
  cursor: pointer;  
}
            
            /* Add a background color on hover */
.navbar:hover {
  background-color: transparent;
}
/* Add a background color on hover */
.navbar:hover {
  border-color: #ffb642;
  
}

    
            #container {
                max-width: 950px;
            
                margin: 0 auto;
                
            }

            @media only screen and (max-width: 800px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }

                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }
            }