html {
    height: 100%;
    width: 100%;
    font-family:rotunda;
    background-color: #300d0d;
    --accentcolor:#ac0e0e;
    --accentcolordark: #68050c;
    --accentcolor2: #921218;
    --bordercolor:black;
    --header-border:white;
    --bgcolor:rgb(0, 0, 0);
    --gapsize: 10px;
    color: whitesmoke;
  }

    
  
@font-face {
font-family: rotunda;
src: url(./static/Designer-Notes-Bold.ttf);
}

@font-face {
    font-family: friendolin;
    src: url(./static/Friedolin.ttf);
    }

.maindiv {
width:70vw;
height: 90vb;
margin:auto;
}

.header {
box-shadow: 6px 6px 0px -1px var(--accentcolor);
border:2px solid var(--accentcolordark);
outline:2px solid var(--bordercolor);
height:20vb;
background-color:var(--bgcolor);
background-image:url(./static/bg.png);
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;
color: #68050c;
}

p {
margin:0px;
color: #e8646d;
}

h1 {
font-family:rotunda;
font-size:50px;
margin:5px;
margin-left:10px;
position:relative;
top:20px;
filter: drop-shadow(0px 0px 5px var(--accentcolor));
}

.row {
display:flex;
gap:var(--gapsize);
height:auto;
}

.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:auto;
}

.titlebar {
background-color: var(--accentcolor);
border-bottom:2px solid var(--accentcolordark);
padding:4px;
}

.buttonholder {
padding-left:10px;
padding-right:10px;
overflow-y:auto;
height:70vb;
}

.navigationbutton {
margin:5px;
padding:5px;
border:2px solid var(--bordercolor);
background-color: var(--accentcolor2);
}

h4 {
margin:0px;
color: #0e0eac;
}

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:60vb;
overflow-y:auto;
}

.bigtext {
font-size:large;
font-weight:bold;
}

strong {
color:var(--accentcolordark);
}

.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:80px;
}

.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;
}