body{
  background-color: none;
  font-family: SF Pro Display,"San Francisco";
}
/* Helper styles */

.icon-padding-left {
    margin-left: 0.5rem;
    color: #212121;
  }
  
  .icon-padding-right {
    margin-right: 0.5rem;
  }
  .hero {
    background: linear-gradient(
        rgba(102, 102, 102, 0.288),
        rgba(255, 255, 255, 0.301)
      ),
      url(../img/hero/hero2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .hero .title {
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
  }
  

  /* Featured styles */
  
  .featured {
    padding: 4rem 0;
  }
  .featured .level {
    padding-bottom: 1rem;
    border-bottom: 1px solid lightgrey;
  }
  .featured .level-item h2 {
    color: var(--primary);
    font-weight: 600;
  }
  .featured article .subtitle {
    margin-top: 1rem;
    color: #212121;
  }
  
  /* Categories styles */
  
  .category {
    font-family: SF Pro Display,"San Francisco";
    margin-top: 2rem;
  }
  .categories{
    margin-bottom: 80px;
  }
  .category span {
    opacity: 0.5;
    font-size: 1rem;
    margin-left: 1rem;
    font-weight: 400;
  }
  
  .category ul {
    list-style:none;
    padding:0 ;
    padding-left: 30px;
  }
  
  .category li {
    padding-top: 1rem;
  }
  
  .category .category-more {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 700;
    margin-top: 1rem;
  }

  .contact{
    padding-top: 2rem;
    margin-top: 40px;
  }
.box{
  font-family: SF Pro Display,"San Francisco";
  
}
  .box a{
color:blue;
}

.footer__navi{
  list-style:none;
}


  @media only screen and (max-width: 768px) {
    body{
      background-color: none;
    }
    .container{
      padding:30px;
    }
    .category {
      margin-top: 2rem;
    }
    
    .category span {
      opacity: 0.5;
      font-size: 1rem;
      margin-left: 1rem;
      font-weight: 400;
    }
    
    .category ul {
      list-style:none;
      padding-left: 50px;
    }
    
    .category li {
      padding-top: 1rem;
    }
    
    .category .category-more {
      font-size: 0.7rem;
      text-transform: uppercase;
      color: var(--primary);
      font-weight: 700;
      margin-top: 1rem;
    }
    .contact{
      padding-top: 1.5rem;
      margin-top: 40px;
    }
    .dark .box{box-shadow: 0 0 10px 5px #ffffff;}
    .dark .box a{color:#ffffff;}
    .dark .category hr {
      height: 1px;
      border: 0;
      border-top: 1px solid #ffffff;
    }
    .dark .category a{color: #ffffff;}
}
  .dark body{
    background-color: #202124;
    color:#E8EAED;
  }
  .dark .box{
    background-color: #292A2D;
    box-shadow: 0 0 10px 5px #ffffff;
  }
  .dark .box a{color:#8AB4F8;}
  .dark .category hr {
    height: 1px;
    border: 0;
    border-top: 1px solid #E8EAED;
  }
   .dark .category li {
      padding-top: 1rem;
    }
  .dark .category a{color: #8AB4F8;}
  .dark .card hr{
    background-color: #E8EAED;
    border: none;
    display: block;
    height: 2px;
    margin: 1.5rem 0;
  }
  .dark .detailText hr {
    background-color: #E8EAED;
    border: none;
    display: block;
    height: 2px;
    margin: 1.5rem 0;
  }
  .dark .loading {
      position: fixed;
      z-index: 1000;
      width: 100%;
      height: 100vh;
      margin: 0;
      padding: 0;
      background: #202124;
  }
  .dark a {
    color: #8AB4F8;
  }
  .dark a:active{
    color: #19A3FE;
  }
.detailText ul {
list-style: square;
}
.dark .breadcrumbs{
  margin-top: 20px;
}
.dark .box ul {
  list-style: square; 
  padding: 20px;
  padding-top: 1rem;
}
.breadcrumbs{
  margin-top: 20px;
}
.box ul {
  list-style: square; 
  padding: 20px;
}
.box.detailText ul {
list-style: square;
}