::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px;
    padding: -10px;
}

::-webkit-scrollbar-track {
    background-color: rgb(30, 30, 30);
}

::-webkit-scrollbar-thumb {
    background-color: rgb(60, 60, 60);
    border-radius: 3px;
}

::-webkit-scrollbar-button {
    background-color: rgb(50, 50, 50);
}

::-webkit-scrollbar-corner {}

.justAudio {
        position: absolute;
        left: 41.5%;
        width: 15%;
        top: 43.5%;
        border: 5px solid #fafafa;
        border-radius: 10px;
}

.themeText {
        position: absolute; 
        left: 7.5%;
        background: #0e0e0e;
        width: 75%; 
        color: #e0e0e0; 
        margin: 0px;
        padding: 0% 5% 0% 5%; 
        min-height: 100%;
        font-family: Nunito;
        height: auto;
}

.textField {
        color: #e0e0e0;
        font-family: Nunito;
}

.centerText {
        text-align: center;
}

.title {
        font-size: 50px; 
        vertical-align: middle; 
        left: -30px; 
        position: relative;
}

html {
        min-height: 100%;
}

.menubutton {
        list-style: none;
      background: #171717;
      width: 150px;
      border-left: 1px solid #222222;
      border-bottom: 1px solid #222222;
      padding: 10px;
      display: inline-block;
      margin: 0px;
      vertical-align: middle;
}

.menubutton:hover {
        animation: colorchange 10s linear infinite;
        background: #222222
}

a {
        color: rgb(200, 180, 230);
        font-family: Nunito;
        font-weight: 900;
        font-size: 18px;
        text-decoration: none;
        margin: 0px;
        display: inline;
}

a:hover {
        animation: colorchange 10s linear infinite;
}

pre {
        font-family: Nunito;
        font-weight: 100;
        font-size: 18px;
        display: inline;
        white-space: pre-wrap;
}

@keyframes colorchange {
      0%   {color: red;}
      14%  {color: orange;}
      28%  {color: yellow;}
      42%  {color: lime;}
      56% {color: aqua;}
      84% {color: darkviolet;}
      100% {color: red;}
      
}

li {
      list-style: none;
      border-left: 2px solid #222222;
      border-bottom: 2px solid #222222;
      border-right: 2px solid #222222;
      border-top: 2px solid #222222;
}

.menu {
      position: absolute;
      right: 0px;
      top: 0px;
      margin: 0px;
      display: inline-block;
      font-size: 0px;
}

p {
        font-family: Nunito;
        font-weight: 100;
        font-size: 18px;
        display: inline;
}

.menu li {
      list-style: none;
      background: #171717;
      border-left: 2px solid #222222;
      border-bottom: 2px solid #222222;
      padding: 10px;
      margin-bottom: 10px;
}

.menu li:hover {
        background: #222222;
}

.leftMostList {
      border-radius: 0px 0px 0px 5px;
}

.fadeToLeft {
      margin: 0px;
      border-width: 0px 5px 0px 0px;
      border-style: solid;
      border-image: linear-gradient(to left, #404040, #050505) 1 100%;
}

.fadeToRight {
      margin: 0px;
      border-width: 0px 0px 0px 3px;
      border-style: solid;
      border-image: linear-gradient(to right, #404040, #050505) 1 100%;
}

.thumbnail {
        margin: auto;
        margin-bottom: 6px;
        padding: 0;
        max-width: 100%;
        max-height: 100%;
        border-radius: 4px;
        display: block;
}


.thumbcontainer {
        padding: 1%;
        width: 21.5%;
        border-radius: 3px;
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 1%;
}

.projectcontainer {
        width: 100%;
        white-space: normal;
        list-style-type: none;
        font-size: 0px;
        padding: 0;
        left: 0;
        right: 0;
        margin: auto;
}

.centerHor {
        left: 0;
        right: 0;
        margin: auto;
}