/*Variables*/
:root {
    --dark: #343a40;
    --highlight: #181818
}

/* Scroll bar */
::-webkit-scrollbar {
    width: 6px;
  }
::-webkit-scrollbar-thumb {
    background: #d9d9d9;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #b4b3b3;
}

/*Removed the blue decoration for buttons*/
a.btn {
    color: white
}

/*Zoom 110% by default as it looks cooler this way*/
body{
    zoom: 110%;
}

/*Noto Sans SC font class*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');
.Noto-sans-SC{
    font-family: "Noto Sans SC", sans-serif;
    font-size: large;
}

/*Changing some modesta default values*/
.center-object{
    top: 25px;
}

/*Navigation*/
header.nav-pc {  
    position:unset ;
    background-color: var(--highlight);    
    height: 40px;  
    display: flex;  
    align-items: center;
    border-style: solid;
}  
header li{  
    margin: 20px;  
}  
header li a{  
    color: white;  
    text-decoration: none; 
    font-family: "Noto Sans SC", sans-serif; 
}  
header.nav-pc *{
    display: inline
}

/*Navigation changes from phone to pc*/
header.nav-phone{display:none}
@media only screen and (max-width: 550px) {
header.nav-pc {display:none}
header.nav-phone{display: block}


/* Wrapper */
#hamnav {
    width: 30%;
    position: fixed;
    top: 0;
    z-index: 100;
}

/* Hide Hamburger */
#hamnav label, #hamburger { display: none; }

/* Horizontal Menu Items */
#hamitems { display: flex; background: var(--dark);  font-family: "Noto Sans SC", sans-serif; }
#hamitems a {
  width: 20%; /* 100% / 5 tabs = 20% */
  padding: 10px;
  color: white;
  text-decoration: none;
  text-align: center;
}
#hamitems a:hover {
    color: #1eaedb
}


  /* Show Hamburger Icon */
  #hamnav label { 
    display: inline-block; 
    color: white;
    background: #a02620;
    font-style: normal;
    font-size: 1.2em;
    padding: 10px;
  }

  /* Break down menu items into vertical */
  #hamitems a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border-top: 1px solid #333;
  }

  /* Toggle Show/Hide Menu */
  #hamitems { display: none; }
  #hamnav input:checked ~ #hamitems { display: block; }
}