/* your styles go here */
#nav_ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: blue;
  }
  
  li a,
  .dropbtn {
    display: inline-block;
    color: blue;
    padding: 24px 16px;
    text-decoration: none;
  }
  
  .dropdown {
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    
    background-color: blue;
    min-width: 160px;
    z-index: 1;
    list-style: none;
  }
  
  .dropdown-content a {
    color: White;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  .dropdown-sub-list{
    display: none;
    list-style: none;
    margin: 0;
  }
  
  .dropdown:hover > .dropdown-content {
    display: block;
  }
  
  .dropdown-sub:hover > .dropdown-sub-list {
    display: block;
  }
  
  /* scrollbar width */
 ::-webkit-scrollbar {
    width: 10px;
  }
  
  /* scrollbar track */
 ::-webkit-scrollbar-track {
    background: #eee;
  }
  
  /* scrollbar handle */
 ::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    background-color: #34ccff;
    background-image: linear-gradient(to top,#0000FF 0%, #34ccff 100%);
  }
  
  
  /*
  *
  * ==========================================
  * FOR DEMO PURPOSES
  * ==========================================
  *
  */
  body {
    min-height: 400vh;
    background-color: #34ccff;
    background-image: linear-gradient(to right, #FFFFFF 0%, #0000FF 100%);
  }

  @import url("//hello.myfonts.net/count/3552d2");
@font-face {font-family: 'Serendipity';
src: url('webfonts/3552D2_0_0.eot');
src: url('webfonts/3552D2_0_0.eot?#iefix') format('embedded-opentype'),
url('webfonts/3552D2_0_0.woff2') format('woff2'),
url('webfonts/3552D2_0_0.woff') format('woff'),
url('webfonts/3552D2_0_0.ttf') format('truetype');}
@font-face {font-family: 'SerendipityWide';
src: url('webfonts/3552D2_1_0.eot');
src: url('webfonts/3552D2_1_0.eot?#iefix') format('embedded-opentype'),
url('webfonts/3552D2_1_0.woff2') format('woff2'),
url('webfonts/3552D2_1_0.woff') format('woff'),
url('webfonts/3552D2_1_0.ttf') format('truetype'),
url('webfonts/3552D2_1_0.svg#SerendipityWide') format("svg");}

.vertical-text {
  font-family: SerendipityWide;
}

.vertical-text {
  transform: rotate(-20deg);
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

.vertical-text {
  font-size: 4.0vw;
}