body {
  background: url("../images/bgfull.jpg") fixed;
  /* height: 100vh; */
  font-family: 'Arimo','Open Sans','Microsoft JhengHei',sans-serif,Arial,'Heiti TC','LiHei Pro';
}
#leftbar {
  background-color: #053e7f;
  height: 100vh;
  -webkit-bleedingedgethingy: 1;
  overflow-y: auto;
}
.svg-black-icon svg {
  fill: #083344;
}
.svg-black-icon:hover svg {
  fill: #ffffff;
  transition: 0.3s;
}
.icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url(sprite.svg);
}
.icon-home {
  width: 32px;
  height: 32px;
  background-position: 0 0;
}
.icon-office {
  width: 32px;
  height: 32px;
  background-position: -48px 0;
}
.icon-newspaper {
  width: 32px;
  height: 32px;
  background-position: -96px 0;
}
.icon-pencil {
  width: 32px;
  height: 32px;
  background-position: -144px 0;
}
.icon-pencil2 {
  width: 32px;
  height: 32px;
  background-position: -192px 0;
}
.icon-stu {
  width: 32px;
  height: 32px;
  background-position: -240px 0;
}

.yellow-button {
    @apply 
    bg-yellow-500 text-blue-950 
    m-3 p-1 rounded-xl 
    border-2 border-blue-950 
    shadow-xl shadow-yellow-300 
    hover:bg-yellow-900 hover:text-white hover:shadow-yellow-600 
    focus:bg-white focus:text-blue-950;
  };