body {
  background: #f8f8f8;
  font-size: 0.875em;
  font-family: 'Nunito Sans', sans-serif;
  padding: 0;
  margin: 0;
  background-image: linear-gradient(rgba(248,248,248,1), rgba(248,248,248,0) 55%),  url("https://file.garden/ZdjWdJzmo3pLm6U9/miscellaneous/bg%20pattern%20take%202%20100px.png");
  height:100%;
  }

 .tippy-box[data-theme~='custom'] {
        padding: 0.25em;
        margin: 10px auto auto 10px;
        color: #fff;
        background: rgba(56, 56, 56, 0.9);
        font: bold 15px 'Nunito Sans', sans-serif;
        text-transform: uppercase;
        border-radius:10px;
        z-index:999;
        text-align:center;
    }
      
.topbar {
  display:flex;
  top:0px;
  position: sticky;
  background: #f8f8f8;
  border-top: 5px solid #000;
  border-bottom: 1px solid #ccc;
  z-index:99;
  height:55px;
  padding: 0 134px;
  }  

.title { 
  display: inline-block;
  color:#000;
  width:30%;
  font-size:10px;
  }

.links {
  margin-top: 0.5em;
  display:inline;
  text-align: right;
  width:70%;
  vertical-align:middle;

  }
  
.links a {
  text-decoration: none;
  padding: 10px;
  margin: 0 10px 0 8px;
  color:#000;
  font-weight: bold;
  text-transform: lowercase;
  font-size:15px;
  display: inline-block;
  border-radius:10px;
  }
  
.links a:hover{
color:#f7c282;
  box-shadow: inset 0 0 10px #f7c282;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }  
  
.links i {
  margin:0 6px 2px 0px;
  display: inline-block;
  font-size:1.3em;
  vertical-align:bottom;
  }  
  

@media only screen and (max-width: 1150px) {
    
    .topbar{
      padding: 0 25px;
      }
      
    .links a{
      margin:0px;
      }  
      
    .links i{
      margin:0px;
      }  
    
    .links a span{
      display:none;
      }
    
}  

@media only screen and (max-width: 400px) {
    
    .topbar{
      padding: 0 10px;
      }
    
}