*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  a
  {
    text-decoration: none;
  }
  i,img
  {
    cursor: pointer;
  }
  .flex
  {
    display: flex;
    align-items: center;
  }
  nav
  {
    padding: 10px 2%;
    justify-content: space-between;
    box-shadow: 0 0 1px rgba(0, 0, 0, 2);
    background: #fff;
    position: sticky;
    top:0;
    z-index: 10;
  }
  .nav-left img
  {
    width:90px;
    height:45px;
    margin-left: 25px;
  }
  .nav-right i
  {
    margin-right: 25px;
  }
  .nav-middle .searchbox
  {
    border :1px solid #ccc;
    margin-right: 15px;
    padding: 8px 12px;
    width:500px;
    height:36px;
  }
  .nav-middle .searchbox input
  {
    outline:none;
    border:none;
    width:100%;
  }
  .sidebar
  {
    width: 15%;
    height:calc(100vh - 20px);
    overflow-y:scroll;
    padding-left: 2%;
    padding-top: 80px;
    position: fixed;
    top: 0;
  }
  .scrollbar::-webkit-scrollbar
  {
    width:10%;
  }
  .scrollbar::-webkit-scrollbar-thumb
  {
    background: #606060;
    border-radius: 10%;
  }
  .general a i
  {
    margin-right: 20px;
    width:20px;
    padding-top: 10%;
  }
  .general a p
  {
    padding-top: 10%;
  }
  .general a
  {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    width: fit-content;
    flex-wrap: wrap;
    color:black;
  }
  .general hr
  {
    height: 1px;
    width: 85%;
  }
  .subscriptions h5
  {
    margin : 20px 0;
    font-size: 15px;
    font-family: sans-serif;
    color: #606060;
  }
  .small-sidebar
  {
    width:5%;
  }
  .small-sidebar::-webkit-scrollbar
  {
    display: none;
  }
  .small-sidebar h5,.small-sidebar .his,.small-sidebar .yv,.small-sidebar .wl,.small-sidebar .lv,.small-sidebar hr
  {
    display:none;
  }
  .small-sidebar a i
  {
    margin-top: 20px;
  }
  .small-sidebar a p
  {
    margin-top: 10px;
    font-size: 13px;
    text-align: right;
  }
  .contents
  {
    background: #f9f9f9;
    padding-left: 17%;
    padding-right: 2%;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .large-contents
  {
    padding-left: 7%;
  }
  .videos
  {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    grid-column-gap: 16px;
    grid-row-gap:30px;
    margin-top: 15px;
  }
  .vid-list .thumbnail
  {
    width:100%;
  }
  .vid-list .flex
  {
    align-items: flex-start;
    margin-top: 7px;
  }
  .vid-info a
  {
    color: black;
  }
  .vid-list .flex img
  {
    width:35px;
    height:35px;
    margin-right: 10px;
    border-radius: 100%;
  }
  .vid-info
  {
    font-size: 13px;
  }
  .vid-info a
  {
    font-weight: 600;
    display: block;
  }
  @media (orientation : portrait)
  {
    .nav-left i
    {
        display: none;
    }
    .nav-left img
    {
        width: 60%;
    }
    .sidebar
    {
        display: none;
    }
    .nav-middle input,.nav-middle .mic,.nav-right .grid, .nav-right .bell, .nav-right .video
    {
        display:none;
    }
    .nav-middle .searchbox
    {
        border: none;
        outline: none;
        width: 100px;
    }
    .searchbox .glass
    {
        position: absolute;
        top: 27px;
        right: 100px;
    }
    .nav-right .profile
    {
        width : 70%;
    }
    .contents
    {
        padding-left: 5%;
        padding-right: 5%;
    }
  }