/* FONT IMPORT */
@import url('https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@400&display=swap');
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

/* Link Layout */

a:link {
      color: #48E5C2;
      background-color: transparent;
      text-decoration: none;
    }

a:visited {
      color: #48E5C2;
      background-color: transparent;
      text-decoration: none;
    }

a:hover {
      color: #9CE37D;
      background-color: transparent;
      text-decoration: underline;
    }

a:active {
      color: #50D8D7;
      background-color: transparent;
      text-decoration: underline;
    }

h1, h2, h3 {
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0em;
    margin-inline-end: 0em;
    font-variant: small-caps;
}
a.active {
  color: white;
  text-decoration: underline;
}

/* HEADER CSS */

header {
      background: #317B22;
      border-color: #d5d5d5;
      border-radius: 0px 0.5em 0.5em;
      border: 1px solid;
      padding: 10px;
      margin: 10px;
      display: inline-block;
    }

nav {
      background: #8A8D91;
      border-color: #00fff2;
      border-radius: 0px 0.5em 0.5em;
      border: 1px solid;
      padding: 10px;
      width: 100%;
      display: inline-block;
    }

.navi {
      display: inline-block;
      margin-left: 10px;
}

.smol{
    font-size: 18px;
    color: white;
    margin-right: 3px;
    }

i.down{
    font-size: 18px;
    margin-left: 3px;
    }


img.uninav{
  margin-bottom: -7px;
  margin-left: -7px;
}
/* MAIN CSS */

body{
      margin: 10px auto;
      width: 960px;
      font-family: 'Yanone Kaffeesatz', sans-serif;
      color: #F8F4F9;
      background-color: black;
      font-size: 22px;
    }

main{
      background: #202C39;
      border-color: #8a9da8;
      border-radius: 0px 0.5em 0.5em;
      border: 1px solid;
      padding: 10px;
      margin: 10px;
      display: inline-block;
    }

/* MAINPAGE CSS */

article.btc{
      background: url('main/btcsprite.png') 0px 0px;
      padding: 3px;
      height: 300px;
      width: 300px;
      float: left;
      display: inline-block;
    }
article.btc:hover, article.btc:active {
			background-position: 300px 0px;
		}

article.eth{
      background: url('main/ethsprite.png') 0px 0px;
      padding: 3px;
      height: 300px;
      width: 300px;
      float: left;
      display: inline-block;
    }
article.eth:hover, article.eth:active {
			background-position: 300px 0px;
		}

article.yfi{
      background: url('main/yfisprite.png') 0px 0px;
      padding: 3px;
      height: 300px;
      width: 300px;
      float: left;
      display: inline-block;
    }
article.yfi:hover, article.yfi:active {
		  background-position: 300px 0px;
		}

article.bat{
      background: url('main/batsprite.png') 0px 0px;
      padding: 3px;
      height: 300px;
      width: 300px;
      float: left;
      display: inline-block;
    }
article.bat:hover, article.bat:active {
			background-position: 300px 0px;
		}

article.blog{
      background: url('main/blogsprite.png') 0px 0px;
      padding: 3px;
      height: 300px;
      width: 300px;
      float: left;
      display: inline-block;
    }
article.blog:hover, article.blog:active {
			background-position: 300px 0px;
    }

article.dict{
      background: url('main/dictsprite.png') 0px 0px;
      padding: 3px;
      height: 300px;
      width: 300px;
      float: left;
      display: inline-block;
    }
article.dict:hover, article.dict:active {
			background-position: 300px 0px;
		}

article.xmr{
      background: url('main/xmrsprite.png') 0px 0px;
      padding: 3px;
      height: 300px;
      width: 300px;
      float: left;
      display: inline-block;
    }
article.xmr:hover, article.xmr:active {
			background-position: 300px 0px;
		}


article.atri{
      background: url('main/atrisprite.png') 0px 0px;
      padding: 3px;
      height: 300px;
      width: 300px;
      float: left;
      display: inline-block;
    }
article.atri:hover, article.atri:active {
			background-position: 300px 0px;
		}

article.uni{
      background: url('main/unisprite.png') 0px 0px;
      padding: 3px;
      height: 300px;
      width: 300px;
      float: left;
      display: inline-block;
    }
article.uni:hover, article.uni:active {
			background-position: 300px 0px;
		}

.text-shadow{ text-shadow:
   1px 1px 5px black,
      2px 2px 5px black,
         3px 3px 5px black,
            4px 4px 5px black
 }

/* ROADMAP CSS */

main.roadmap{
      background: #202C39;
      border-color: #8a9da8;
      border-radius: 0px 0.5em 0.5em;
      border: 1px solid;
      padding: 10px;
      margin: 10px;
      max-width: 940px;
      width: 100%;
      display: inline-block;
    }

article.roadmap{
      background: #202C39;
      padding: 10px;
      margin: 10px;
      width: 100%;
      max-width: 900px;
      display: inline-block;

    }
p.roadmap{

      font-size: 22px;
      display: inline-block;

    }
li.roadmap{
      font-size: 64px;
      display: inline-block;
      list-style-type: none;
    }
li.maplist{
  font-size: 20px;
  list-style-type: none;
  color: rgba(255, 255, 255, 0.7);
}
table.roadmap{
      font-size: 24px;
      display: inline-block;
    }
/* TIMELINE CSS */

*:not(.letter-links) {
      box-sizing: border-box;
    }


        .cr-container {
          width: 100%;
          max-width: 960px;
          margin: 0 auto;
          padding: 0 10%;
          border-radius: 2px;
        }

        .cr-container::after {
          content: '';
          display: table;
          clear: both;
        }

        /* --------------------------------

        Main components

        -------------------------------- */
        #cr-timeline {
          position: relative;
          padding: 2em 0;
          margin-top: 2em;
          margin-bottom: 2em;
        }

        #cr-timeline::before {
          content: '';
          position: absolute;
          top: 0;
          left: 25px;
          height: 100%;
          width: 4px;
          background: #317b22;
        }

        @media only screen and (min-width: 1170px) {
          #cr-timeline {
            margin-top: 3em;
            margin-bottom: 3em;
          }

          #cr-timeline::before {
            left: 50%;
            margin-left: -2px;
          }
        }
        .cr-timeline-block {
          position: relative;
          margin: 2em 0;
        }

        .cr-timeline-block:after {
          content: "";
          display: table;
          clear: both;
        }

        .cr-timeline-block:first-child {
          margin-top: 0;
        }

        .cr-timeline-block:last-child {
          margin-bottom: 0;
        }

        @media only screen and (min-width: 1170px) {
          .cr-timeline-block {
            margin: 2em 0;
          }

          .cr-timeline-block:first-child {
            margin-top: 0;
          }

          .cr-timeline-block:last-child {
            margin-bottom: 0;
          }
        }
        .cr-timeline-img {
          position: absolute;
          top: 8px;
          left: 12px;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          box-shadow: 0 0 0 4px #ffffff, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
        }

        .cr-timeline-img {
          background: #317b22;
        }

        @media only screen and (min-width: 1170px) {
          .cr-timeline-img {
            width: 30px;
            height: 30px;
            left: 50%;
            margin-left: -15px;
            margin-top: 15px;
            /* Force Hardware Acceleration in WebKit */
            -webkit-transform: translateZ(0);
            -webkit-backface-visibility: hidden;
          }
        }
        .cr-timeline-content {
          position: relative;
          margin-left: 60px;
          margin-right: 30px;
          background: #333C42;
          border-radius: 2px;
          padding: 1em;
        }
        .cr-timeline-content .timeline-content-info {
          background: #2B343A;
          padding: 5px 10px;
          color: rgba(255, 255, 255, 0.7);
          font-size: 12px;
          box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.08);
          border-radius: 2px;
        }
        .cr-timeline-content .timeline-content-info i {
          margin-right: 5px;
        }
        .cr-timeline-content .timeline-content-info .timeline-content-info-title, .cr-timeline-content .timeline-content-info .timeline-content-info-date {
          width: calc(50% - 2px);
          display: inline-block;
        }
        @media (max-width: 500px) {
          .cr-timeline-content .timeline-content-info .timeline-content-info-title, .cr-timeline-content .timeline-content-info .timeline-content-info-date {
            display: block;
            width: 100%;
          }
        }
        .cr-timeline-content .content-skills {
          font-size: 16px;
          padding: 0;
          margin-bottom: 0;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
        }
        .cr-timeline-content .content-skills li {
          background: #40484D;
          border-radius: 2px;
          display: inline-block;
          padding: 2px 10px;
          color: rgba(255, 255, 255, 0.7);
          margin: 3px 2px;
          text-align: center;
          flex-grow: 1;
        }

        .cr-timeline-content:after {
          content: "";
          display: table;
          clear: both;
        }

        .cr-timeline-content h2 {
          color: rgba(255, 255, 255, 0.9);
          margin-top: 0;
          margin-bottom: 5px;
        }

        .cr-timeline-content p, .cr-timeline-content .cr-date {
          color: rgba(255, 255, 255, 0.7);
          font-size: 16px;
          font-size: 0.8125rem;
        }

        .cr-timeline-content .cr-date {
          display: inline-block;
        }

        .cr-timeline-content p {
          margin: 1em 0;
          line-height: 1.6;
        }

        .cr-timeline-content::before {
          content: '';
          position: absolute;
          top: 16px;
          right: 100%;
          height: 0;
          width: 0;
          border: 7px solid transparent;
          border-right: 7px solid #333C42;
        }

        @media only screen and (min-width: 768px) {
          .cr-timeline-content h2 {
            font-size: 22px;

          }

          .cr-timeline-content p {
            font-size: 20px;

          }

          .cr-timeline-content .cr-read-more, .cr-timeline-content .cr-date {
            font-size: 16px;

          }
        }
        @media only screen and (min-width: 1170px) {
          .cr-timeline-content {
            color: white;
            margin-left: 0;
            padding: 1.6em;
            width: 45%;
            margin: 0 0;
          }

          .cr-timeline-content::before {
            top: 28px;
            left: 100%;
            border-color: transparent;
            border-left-color: #333C42;
          }

          .cr-timeline-content .cr-date {
            position: absolute;
            width: 100%;
            left: 120%;
            top: 6px;
            font-size: 16px;
            font-size: 1rem;
          }

          .cr-timeline-block:nth-child(even) .cr-timeline-content {
            float: right;
          }

          .cr-timeline-block:nth-child(even) .cr-timeline-content::before {
            top: 24px;
            left: auto;
            right: 100%;
            border-color: transparent;
            border-right-color: #333C42;
          }

          .cr-timeline-block:nth-child(even) .cr-timeline-content .cr-read-more {
            float: right;
          }

          .cr-timeline-block:nth-child(even) .cr-timeline-content .cr-date {
            left: auto;
            right: 120%;
            text-align: right;
          }
        }


/* FOOTER CSS */

footer {
      background: #0f3013;
      border-color: #8a9da8;
      border-radius: 0px 0.5em 0.5em;
      border: 1px solid;
      padding: 10px;
      margin: 10px;
      display: inline-block;
    }

article.footer{
      width: 32%;
      padding: 5px;
      float: left;
      display: inline-block;
    }

li.footer {
      list-style-type: none;
      padding: 3px;
      margin-left: 10px;
    }
li.support {
      list-style-type: none;
      padding: 3px;
      font-size: 18px;
      display: inline-block;
    }
li.supportbig {
      list-style-type: none;
      padding: 3px;
      font-size: 22px;
      display: inline-block;
    }
li.mail{
      display: inline-block;
    }



#cannerald{
  height: 125px;
  width: 125px;
  float: left;
  margin: 0 0 0 15px;
  background: url(footer/cannerald-sprite.png) 0px 0px;

}
#cannerald:hover, #cannerald:active {
					background-position: 125px 0px;
					}

#oneinch{
  height: 125px;
  width: 125px;
  float: left;
  margin: 0 0 0 15px;
  background: url(footer/1inch-sprite.png) 0px 0px;

}
#oneinch:hover, #oneinch:active {
					background-position: 125px 0px;
					}


#binance{
  height: 125px;
  width: 125px;
  float: left;
  margin: 0 0 0 15px;
  background: url(footer/binance-sprite.png) 0px 0px;

}
#binance:hover, #binance:active {
					background-position: 125px 0px;
					}

#ftx{
  height: 125px;
  width: 125px;
  float: left;
  margin: 0 0 0 15px;
  background: url(footer/ftx-sprite.png) 0px 0px;

}
#ftx:hover, #ftx:active {
					background-position: 125px 0px;
					}

/* SUPPORT CSS */

main.support{
      background: #202C39;
      border-color: #8a9da8;
      border-radius: 0px 0.5em 0.5em;
      border: 1px solid;
      padding: 10px;
      margin: 10px;
      display: inline-block;
    }

article.support{
      width: 100%;
      float: left;
      display: inline-block;
    }



/* DICTIONARY CSS */

main.dictionary{
      background: #202C39;
      border-color: #8a9da8;
      border-radius: 0px 0.5em 0.5em;
      border: 1px solid;
      padding: 10px;
      margin: 10px;
      max-width: 940px;
      width: 100%;
      display: inline-block;
    }

article.dictionary{
      width: 33%;
      float: left;
      display: inline-block;
    }

dt.dictionary{
  margin: 10px 0 0 0;
  font-size: 26px;
}

dd.dictionary{
  font-size: 18px;
  margin: 0 0 0 10px;
}

/* APECALC CSS */

main.apecalc{
      background: #202C39;
      border-color: #8a9da8;
      border-radius: 0px 0.5em 0.5em;
      border: 1px solid;
      padding: 10px;
      margin: 10px;
      max-width: 940px;
      width: 100%;
      display: inline-block;
    }

article.apecalc{
      width: 100%;
      float: left;
      display: inline-block;
    }

    .apetext {
        border:0;
        vertical-align:top;
        padding:2px;
        margin:0;
        height:22px;
        width:5em;
        text-align:center;
        line-height:22px;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        font-size: 20px;
    }


    .apeinput {
        background-color: grey;
        color: white;
        border: 1px solid black;
        padding:2px;
        margin:0;
        height:22px;
        width:5em;
        text-align:right;
        line-height:22px;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        font-size: 20px;
        -webkit-appearance: none;
        border-radius: 0;

    }
    .apeszn{
        cursor: progress;
    }
    .apeoutput {
        border:0;
        vertical-align:top;
        padding:2px;
        margin:0;
        height:22px;
        text-align:center;
        line-height:22px;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        font-size: 20px;
    }

    .button {
  border: none;
  background-color: #202C39;
  height: 220 px;
  width: 200 px;
  cursor: pointer;
}

    .error{
      color: red;
    }

/* GLOSSAR CSS */

    .big-letter {
    background: #317B22;
    padding: 5px 0 0;
    display: block;
    text-align: center;
    width: 30px;
    font-size: 1.6em;
    font-weight: bold;
    }
    .letter-links{
    margin: 5px 0 0 0;
    padding: 5px 20px;
    font-size: 1.3em;
    text-align: center;
    word-spacing: .5em;
    line-height: 1.4em;
    }




/* GLOW BUTTON CSS */

.glow-on-hover {
      width: 220px;
      height: 50px;
      border: none;
      outline: none;
      color: #fff;
      background: #111;
      cursor: pointer;
      position: relative;
      z-index: 0;
      border-radius: 10px;
    }

.glow-on-hover:before {
      content: '';
      background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
      position: absolute;
      top: -2px;
      left:-2px;
      background-size: 400%;
      z-index: -1;
      filter: blur(5px);
      width: calc(100% + 4px);
      height: calc(100% + 4px);
      animation: glowing 20s linear infinite;
      opacity: 0;
      transition: opacity .1s ease-in-out;
      border-radius: 10px;
    }

.glow-on-hover:active {
      color: #000;
    }

.glow-on-hover:active:after {
      background: transparent;
    }

.glow-on-hover:hover:before {
      opacity: 1;
    }

.glow-on-hover:after {
      z-index: -1;
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: #333C42;
      left: 0;
      top: 0;
      border-radius: 10px;
    }

@keyframes glowing {
      0% { background-position: 0 0; }
      50% { background-position: 400% 0; }
      100% { background-position: 0 0; }
    }



#nav {
    display:inline-block;
    width:100%;
    margin:0px auto;
    padding:0;
    background:#0f3013;
    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav li {
    margin:10px;
    float:left;
    position:relative;
    list-style:none;
}
#nav a {
    font-weight:bold;
    color:#48E5C2;
    text-decoration:none;
    display:block;
    padding:8px 10px;
    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 4px 4px rgba(50,50,50, .8);
}
/* selected menu element */
#nav .current a, #nav li:hover > a {
    background:#8d9a8e;
    color: white;
    border-top:1px solid #f8f8f8;
    box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
    text-shadow:0 4px 4px rgba(10,10,10, 0.7);
}
/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
    background:none;
    border:none;
    color:#48E5C2;
}
#nav ul li a:hover {
    background:#8d9a8e;
    color:#fff;
    border-radius:10px; /*some css3*/
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
    text-shadow:0 4px 4px rgba(0,0,0, 0.7);
}
#nav ul li:first-child > a {
    -moz-border-radius-topleft:10px; /*some css3*/
    -moz-border-radius-topright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
    -moz-border-radius-bottomleft:10px; /*some css3*/
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}
/* drop down */
#nav li:hover > ul {
    opacity:1;
    visibility:visible;
}
#nav ul {
    opacity:0;
    visibility:hidden;
    padding:0;
    width:175px;
    position:absolute;
    background:#0f3013;
    border:1px solid #f8f8f8;
    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-transition:opacity .25s linear, visibility .1s linear .1s;
    -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
    -o-transition:opacity .25s linear, visibility .1s linear .1s;
    transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
    float:none;
    margin:0;
}
#nav ul a {
    font-weight:normal;
    text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}
#nav ul ul {
    left:160px;
    top:0px;
}

.curser-add{
  cursor: copy;
}

.curser-del{
  cursor: pointer;
  color: red;
}

.curser-pointer{
  cursor: pointer;
}

.curser-choose{
  cursor: context-menu;
}



/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;

}

/* Tooltip text */
.tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: white;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}