@media(min-width:468px){
    .topbar{
      display: flex;
      height: calc(12vh);
      background-color: #23272A;
    }
    
    .contentContainer{
      display:flex;  
      justify-content: space-evenly;
      align-items: center;
    }
}
  
.topbar div, .contentContainer div{
    padding:10px;
}

.currentPage{
    background: #7289DA;
    flex-basis:calc(12vh);
}

.otherPage{
    flex-basis:calc(12vh);
}

.textbox{
    flex-basis: 70%;  
}

.discordbox{
    flex-basis: 30%;
}

.footer{
    flex-basis: 100%;
}

body{
    background-color: #4c556a;
}

img{
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    max-height: 100%;
    display: block; /* remove extra space below image */
}

* {
    color: whitesmoke;
}

h1 { 
    text-decoration: underline;
    font-family: Lucida Console, Lucida Sans Typewriter, monaco, Bitstream Vera Sans Mono, monospace; 
    font-size: 24px; 
    font-style: normal; 
    font-variant: normal;
    font-weight: 700;
    line-height: 26.4px; 
    
} 

h3 { 
    font-family: Lucida Sans Typewriter, Lucida Console, monaco, Bitstream Vera Sans Mono, monospace;
    font-size: 14px;
    font-style: normal; 
    font-variant: normal; 
    font-weight: 700; line-height: 15.4px; 
} 


blockquote {
    font-family: Lucida Sans Typewriter, Lucida Console, monaco, Bitstream era Sans Mono, monospace; 
    font-size: 21px;
    font-style: normal; 
    font-variant: normal; 
    font-weight: 400;
    line-height: 30px; 
} 

pre { 
    font-family: Lucida Sans Typewriter, Lucida Console, monaco, Bitstream Vera Sans Mono, monospace; 
    font-size: 13px; font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 18.5667px; 
}

ul, p{
    list-style-type: "> ";
    font-family: Lucida Sans Typewriter, Lucida Console, monaco, Bitstream Vera Sans Mono, monospace;
    font-size: 16px; 
    font-style: normal;
    font-variant: normal;
    font-weight: 400; 
    line-height: 20px;
    line-height:150%
}