:root{
    /* Colours */
    --black: #000100;
    --green: #26ff00;
    
    /* Borders */
    --border-width: 2px soild #26ff00;

    
    /* Fonts */
    @font-face{
        font-family: dectrim;
        src: url(https://forgotten-tabs.neocities.org/fonts/_decterm.ttf)
    }
    *{
        font-family: dectrim;
    }
    
}


/* BASICS */


/* BODY */
body{
    background-color: var(--black);
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    /*background-image: url(https://forgotten-tabs.neocities.org/wires.png);*/
   /* background-repeat: repeat-y repeat-x;*/
}

/*box*/
.box {
    border: 3px solid #26ff00;
    background-color: var(--black);
    width: 50px;
    margin: 10px;
    padding: 10px;
    text-align: center;
}

img {
  opacity: 0.5;
}

.wrap {
    word-wrap: break-word;
    /* Enable text wrapping */
}
/* CENTER*/
.center {
  margin: auto;
  width: 50%;
  border: 3px solid #26ff00;
  padding: 10px;
  background-color: var(--black);
}
/* FONTS */
    @font-face{
        font-family: dectrim;
        src: url(https://forgotten-tabs.neocities.org/fonts/_decterm.ttf)
    }
    *{
        font-family: dectrim;
    }

/* Paragragh and Headers */
    /* Ps and Hs */
    p {
        color: var(--green);
        text-align: center;
    }
    p.solid {
        border-style: solid;
    }
    h1{
        color: var(--green);
        text-align: center;
    }
    h2{
        color: var(--green);
        text-align: center;
    }
    h3{
      color: var(--green);
        text-align: center;
    }
   /*Links*/
a {
    color: var(--green);
    font-weight: bold;
    
    text-decoration: underline;
}

a:hover {
    color: white;
}

.content{
    position: relative;
}

/* ICON BAR*/
.icon-bar {
    border: soild;
    border-width: 3px;
    border-color: var(--green);
    width: 70%;
    background-color: var(--black);
    overflow: auto
}

.icon-bar a {
    float: left;
    text-align: center;
    width: 20%;
    padding: 12px 0;
    color: var(--green);
    
}

/*NAVBAR*/
.topnav {
    border-color: var(--green);
    border: 4px;
    cursor: pointer;
    align-content: center;
   background-color: var(--black);
   overflow: hidden;
    margin-bottom: 20px;
}

.topnav a {
  float: none;
  color: var(--green);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
}

.topnav a:hover{
    color: white;
}

/* SIDEBAR */
.sidenav-left{
    cursor: pointer;
    height: auto;
    width: 125px;
    position: absolute;
    z-index: 1;
    left: 0;
    background-color: var(--black);
    overflow-x: hidden;
    padding: 20px;
    border: solid;
    border-width: 3px;
    border-color: var(--green);
    text-align: center;
    margin: 15px;
    overflow: hidden;
}

.sidenav-right{
    cursor: pointer;
    height: auto;
    width: 125px;
    position: absolute;
    z-index: 1;
    right: 0;
    background-color: var(--black);
    overflow-x: hidden;
    padding: 20px;
    border: solid;
    border-width: 3px;
    border-color: var(--green);
    text-align: center;
    margin: 15px;
    overflow: hidden;
}

/*navigation menu*/
.sidenav-left a {
    padding:  10px 7px 10px 7px;
    text-align: center;
    text-align-last: center;
    text-decoration: underline;
    font-size: 25px;
    color: var(--green);
    display: block;
}

.sidenav-left a:hover{
    color:  white;
}

.sidenav-right a {
    padding:  10px 7px 10px 7px;
    text-align: center;
    text-align-last: center;
    text-decoration: underline;
    font-size: 25px;
    color: var(--green);
    display: block;
}

.sidenav-right a:hover{
    color: white;
}

/* HR */
hr {
    color: var(--green);
    border-width: 2px;
}
/* LISTS */
    /* UL stuff */
    ul{
        color: var(--green);
        text-align: center;
    }
    ul.no-bullets{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    /* OL stuff */
    ol{
        color: (--green);
        text-align: center;
    }
    
    ol.no-bullets{
        list-style: none;
        padding: 0;
        margin: 0;
    }