html {
    height: 100%;
    width: 100%;
    font-family:arial;
    background-image:url(maretubackground.jpg);
    background-size:cover;
    background-position:center;
    --accentcolor:#ff0000;
    --accentcolordark: #000000;
    --accentcolor2: #ffffff;
    --bordercolor:black;
    --bgcolor:whitesmoke;
    --gapsize: 10px;
  }
 
  @font-face {
    font-family: skateboarding;
    src: url(impactregular.ttf);
  }
 
  .maindiv {
    width:700px;
    margin:auto;
  }
 
  .header {
    box-shadow: 6px 6px 0px -1px var(--accentcolor);
    border:2px solid var(--accentcolordark);
    outline:2px solid var(--bordercolor);
    height:130px;
    background-color: #fff10c;
    background-image:url(maretubg2.jpg);
    background-size:cover;
    background-position:center;
    margin-bottom:var(--gapsize);
  }
 
  .bar {
    box-shadow: 6px 6px 0px -1px var(--accentcolor);
    border:2px solid var(--accentcolordark);
    outline:2px solid var(--bordercolor);
    background-color:var(--bgcolor);
    margin-bottom: var(--gapsize);
    text-align:center;
    padding-top:7px;
    padding-bottom:7px;
  }
 
  h3 {
    margin:0px;
  }
 
  p {
    margin:0px;
  }
 
  h1 {
    font-family:skateboarding;
    font-size:50px;
    margin:0px;
    margin-left:150px;
    position:relative;
    top:-10px;
  }
 
  .row {
    display:flex;
    gap:var(--gapsize);
    height:300px;
  }
 
  .navigation {
    box-shadow: 6px 6px 0px -1px var(--accentcolor);
    border:2px solid var(--accentcolordark);
    outline:2px solid var(--bordercolor);
    background-color:var(--bgcolor);
    text-align:center;
    box-sizing: border-box;
    width:25%;
    height:300px;
  }
 
  .titlebar {
    background-color: var(--accentcolor);
    border-bottom:2px solid var(--accentcolordark);
    padding:4px;
  }
 
  .buttonholder {
    padding-left:10px;
    padding-right:10px;
    overflow-y:auto;
    height:263px;
  }
 
  .navigationbutton {
    margin:5px;
    padding:5px;
    border:2px solid var(--bordercolor);
    background-color: var(--accentcolor2);
  }
 
  h4 {
    margin:0px;
  }
 
  a {
    color: var(--accentcolor);
  }
 
  .box1 {
    box-shadow: 6px 6px 0px -1px var(--accentcolor);
    border:2px solid var(--accentcolordark);
    outline:2px solid var(--bordercolor);
    background-color:var(--bgcolor);
    box-sizing: border-box;
    padding:10px;
    width:100%;
    height:70%;
    overflow-y:auto;
  }
 
  .bigtext {
    font-size:large;
    font-weight:bold;
  }
 
  strong {
    color:#ff0000;
  }
 
  .box2 {
    box-shadow: 6px 6px 0px -1px var(--accentcolor);
    border:2px solid var(--accentcolordark);
    outline:2px solid var(--bordercolor);
    background-color:var(--bgcolor);
    box-sizing: border-box;
    padding:10px;
    width:100%;
    height:26.65%;
  }
 
  .column {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
 
  .footer {
    box-shadow: 6px 6px 0px -1px var(--accentcolor);
    border:2px solid var(--accentcolordark);
    outline:2px solid var(--bordercolor);
    background-color:var(--bgcolor);
    margin-top:var(--gapsize);
    box-sizing: border-box;
    padding:10px;
    width:100%;
    text-align: center;
    
  }
    
  ::selection {
/* Change highlight background color */
background: #FE3838;
/* Change highlight text color */
color: #FFFFFF;

}