.nav-bar
{
    position: fixed; 
    top: 0; 
    width: 100%; 
    background-color: rgb(57, 62, 70); 
    padding: 15px 15px 0px 15px;
}
.nav
{
    float: right;
    overflow: hidden;
}
.nav a, .dark-mode .nav a
{
    float: left;
    display: block;
    color: rgb(103, 171, 231);
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    font-size: 20px;
}
.nav a:hover, .dark-mode .nav a:hover
{
    color: rgb(110, 217, 231);
    transform: scale(1.1);
    transition: all ease 500ms;
}
.nav .active
{
    color: rgb(255, 255, 255);
}

.nav .hamicon {
    display: none;
  }

@media screen and (max-width: 600px) {
    .nav a:not(:first-child) {display: none;}
    .nav a.hamicon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .nav.responsive {position: relative;}
    .nav.responsive .hamicon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .nav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .nav.responsive a:not(:last-child) {width: 100%;text-align: right;}
    .nav.responsive a.home {padding-top:70px;}
  }

a, .dark-mode a
{
    color: rgb(103, 171, 231);
}
a:hover, .dark-mode a:hover
{
    color: rgb(110, 217, 231);
    text-decoration: none;
}

.icons 
{
    display: inline-block;
    padding: 1%;
    transition: transform .2s;
}

.icons:hover
{
    transform: scale(1.2);  
}


h3, h4
{
    color: rgb(103, 171, 231);
}
p
{
    font-size:15px;
}
th,td
{
    padding: 5px 25px;
}
hr
{
    visibility: visible;
    border: 0;
    height: 1.5px;
    width: 80%;
    background-image: linear-gradient(to right, rgba(103, 171, 231, 0), rgba(103, 171, 231, 0.75), rgba(103, 171, 231, 0));
}
body
{
    padding: 0px 20px 0px;
    background-color: rgb(57, 62, 70);
    color: rgb(255, 255, 255);
}
.courses
{
    padding: 10px 0px 10px 0px;
}

.dark-mode
{
    background-color: rgb(220, 229, 231);
    color: rgb(0, 0, 0);
}
.dark-mode .content
{
    color:rgb(0, 0, 0);
    background-color: rgb(168, 168, 168);
}
.dark-mode .nav-bar
{
    background-color: rgb(220, 229, 231);
}
.dark-mode .nav .active
{
    color: rgb(0, 0, 0);
}
.dark-mode hr
{
    background-image: linear-gradient(to right, rgba(103, 171, 231, 0), rgba(103, 171, 231, 0.75), rgba(103, 171, 231, 0));
}

button
{
    background-color:rgb(103, 171, 231);
    border-radius: 20px;
    border: none;
}
button:hover
{
    background-color:rgb(110, 217, 231);
}