:root {
    --background: #0d1505;
    --forecolor: #eef4d7;
    --accent: #41ff00;
    --accent2: #38d400;
    --support: #ffbf00;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:visited {
    color: var(--accent2);
}

a:hover {
    text-decoration: underline;
}

@font-face {
    font-family: ShareTechMono; /* set name */
    src: url(../font/ShareTechMono-Regular.ttf); /* url of the font */
  }

BODY {
    background-color: var(--background);
    font-family: Helvetica, Arial, Inter,  sans-serif;
    font-size:90%;
    color: var(--forecolor);
    padding: 10px;
}

H1 {
    color: var(--accent);
    font-family: ShareTechMono;
    font-size:400%;
}

ol {
    padding-left:20px;
}

.art_title {
    width: max-content;
}
.art_title H3 {
    color: var(--accent);
    font-family: ShareTechMono;
    font-size:200%;
    margin-bottom:0px;
}

.art_title .date {
    color: var(--accent2);
    font-size: 90%;
    text-align: right;
}

article p,ol {
    text-align: justify
}

.main {
    display:flex;
    flex-direction:row;
    margin-right:10px;
}

.comment_stat  {
    font-size:90%;
    font-family: ShareTechMono;
    color: var(--accent);
}

.comment_stat a:hover {
    text-decoration: none;
}

.comment_stat:hover .cursor {
    animation: blink 1s linear infinite;
    
}

@keyframes blink {
    0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
   
}

.main> #menu {
    width:167px;
    margin-right: 20px;
    flex-shrink: 0;
}
.main>.content {
   width:90%;
}

#menu_closed img {
    margin-top:7px;
    margin-right:7px;
    width: 22px;
}

#menu_closed a div {
    visibility: hidden;
    margin-top: 16px;
    margin-left: -4px;
}

#menu_closed a:hover {
    text-decoration: none;
}

#menu_closed a:hover div {
    visibility: visible;
    text-transform: uppercase;
    rotate: 90deg;
    margin-top: 16px;
    margin-left: -4px;
    color: var(--accent2);
    font-family: ShareTechMono;
}

#menu>a {
    display: flex;
    flex-direction: row;
    text-transform: uppercase;
    font-family: ShareTechMono;
    margin-top:7px;
    border: 1px solid var(--accent);
    color: var(--accent);
    text-decoration: none;
}
#menu>a:hover {
    text-decoration: none;
}
#menu>a img {
    width: 22px;
    padding:3px;
}
#menu>a div {
    margin-top:auto;
    margin-bottom:auto;
    margin-left: 7px;
}

#menu H4 {
    color: var(--forecolor);
    font-family: ShareTechMono;
    margin-bottom:7px;
}

#menu UL {
    margin-top: 7px;
    padding-left: 0px;
}

#menu LI {
    list-style: none;
}

#menu .contact {
    color: var(--accent2);
    font-family: ShareTechMono;
    margin-top:30px;
    font-size:90%;
}

#logo {
    display: flex;
    flex-direction: row;
}

#logo img {
    width:116px;
}
#logo H1 {
    margin-left:5%;
    margin-top:auto;
    margin-bottom:auto;
}

div#comments {
    width:95%;
    margin-left:auto;
}

@media screen and (max-width:599px) {
  #logo img {
    width: 60px;
  }
  #logo H1 {
    font-size: 200%;
  }
 .art_title {
    width: 100%;
 }

}