:root {
    --background:rgb(27,27,30);
    --sidebar:rgb(31,32,38);
    --text1:rgb(198,198,198);
    --text2:rgb(134,133,133);
    --link1:rgb(250, 138, 0);
    --alertBG: rgb(201, 198, 120);
    --alertBG2: rgb(243, 239, 127);
    --alertText: rgb(100, 102, 67);
    --colGDD200:rgb(250, 0, 0);
}

html, body{
    background-color: var(--background);
    color: var(--text1);
    scroll-behavior: smooth;
    overflow-x: hidden;
    padding: 20px;
}

a{
  color: var(--link1);
}

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

.navbar{
    background-color: var(--background);
    color: var(--text1);
}

h1{
    font-family: 'Yanone Kaffeesatz', sans-serif;   
}

h1 strong{
  color: var(--colGDD200);
}

h1 a:visited{
  color: var(--colGDD200);
}

h2{
  font-family: 'Yanone Kaffeesatz', sans-serif;   
}

h2 a:visited{
color: var(--colGDD200);
}

ul{
  list-style: none;
}

.popup{
  position: absolute;
  right: -9999px;
  width: 50%;
  border: 4px solid white;
  border-radius: 10px;
  box-shadow: 02px 02px 20px orange;
}
  
li:hover .popup{
  right: 80%;
  animation-name: popupShow;
  animation-duration: 0.25s;
}

.container{
  width: 90%;
}

  /* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 975px) {
  .sidenav {
    height: auto;
    padding: 15px;
  }

  .row.content {
    height:auto;
  } 

  .carousel{
      width:90%;
      margin-left: 0px;
      margin-top: 10px;
      padding: 0px;
      left:-15px;
      margin-bottom: 10px;
    }

  .main-container{
    padding: 5px;
  }
}