:root {
  --bg: #030A06;
  --bg-light: #0b061c;
  --bg-bright: #2a1869;
  --txt-c1: #d9cff2;
  --txt-c2: #857cb1;
  --peri: #766ed5;
  --evil: #dc80ff;
  --nice: #9355fe;
  --shrug: #6457cb;
}

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

body {
/*  background: var(--bg) url(var(--bg-img) no-repeat scroll */
  background-image: url("../images/assets/BG.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);
}

/* 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: 0.85;
            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));
                }
            }
        }

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