:root {
  --bg: #08080e;
  --bg-light: #1a0200;
  --bg-bright: #481900;
  --txt-c1: #ebceb5;
  --txt-c2: #a37955;
  --peri: #b1651e;
  --evil: #c99e00;
  --nice: #b46300;
  --shrug: #9e5000;
}

@font-face {
    font-family: "mkhedruliGrunge"; 
    src: url("https://cazzy.neocities.org/fonts/MkhedruliGrungeRegular.ttf?#iefix") format("truetype");
}

body {
/*  background: var(--bg) url(var(--bg-img) no-repeat scroll */
  background-image: url("https://cazzy.neocities.org/images/assets/arcBGs/gestation.jpg"); background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--bg);
  background-size:auto;
  color: var(--txt-c1);
  font-family: mkhedruliGrunge;
  font-size: 30px;
}
p{
  padding: 10px;
  margin: auto;
  color: var(--txt-c2);
}
h1{
  text-align: center;
  color: var(--nice);
}
h2{
  color: var(--txt-c1);
}
h3{
  text-decoration: none;
  text-align: center;
  color: var(--shrug);
  font-size:15px;
}

/* shapes and boxes and what freaking ever */
#center{
            display: flex;
            justify-content: center;
            align-items: center;
            border: 3px white
}
#content{
            max-width: 1000px;
            margin: auto;
            background: var(--bg-light);
            opacity: 1;
            padding: 20px;
            box-sizing: border-box;
}

#nav {
            gap: 15px;
            display: flex;
            text-align: center;
            justify-content: center;
            font-size: 16px;
            font-family: 'mkhedruliGrunge';
            letter-spacing: 0.3px;
            padding: 5;
            margin-bottom: 5px;
            a {
                text-decoration: none;
            }
            
            .navbutton {
                align-content: center;
                border-radius: 4px;
                border: 1px solid var(--bg);
                width: 50px;
                padding-left: 7px;
                padding-right: 7px;
                height: 26px;
                color: white;
                background: linear-gradient(var(--bg-light) 1%, var(--peri) 49%, var(--shrug) 51%, var(--bg-light));
                
                &:hover {
                    background: linear-gradient(var(--bg-light) 1%, var(--peri) 49%, var(--shrug) 51%, var(--nice));
                }
            }
        }
        
img {
    max-width: 100%;
    max-height: 100%;
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: block; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(57,20,0,0.7); /* Black background with opacity */
  z-index: -1; /* Specify a stack order in case you're using a different order for other elements */
}

/* links */
a:link{
  color: var(--shrug);
}
a:visited{
  color: var(--shrug);
}
a:hover{
  color: var(--nice);
}
a:active{
  color: var(--evil);
}