main.css

* {
    box-sizing: border-box;
}
html, body {
    height: 100%;
    width: 100%;
    padding: 0%;
    margin: 0%;
    overflow-x: hidden;
		font-size: 1.125rem;
		line-height: 1.625rem;
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.tc {
		text-align: center
}
.flex {
    display: flex;
}
.flex-column {
    flex-direction: column;
}
.flex-grow-1 {
    flex-grow: 1;
}
.justify-center {
    justify-content: center;
}
.justify-end{
    justify-content: flex-end;
}
.items-center {
    align-items: center;
}
.shadow-1 { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-2 { box-shadow: 0px 2px 4px 3px rgba( 0, 0, 0, 0.2 ); }
.w-100 {
    width: 100%;
}
.w-75 {
    width: 75%;
}
.w-50 {
    width: 50%;
}
.w-25 {
    width: 25%;
}
.h-100 {
    height: 100%;
}
.h3 {
    height: 3rem;
}
.pa1 {
    padding: 1rem;
}
.pa2 {
    padding: 2rem;
}
.vh-fill {
		overflow-y: scroll;
    height: calc(100vh - 4rem);
}
.white {
    color: white;
}
.bg-blue {
    background-color: #007bff;
}
.bg-white {
    background-color: #ffffff;
}
.bg-overlay {
		background-color: #00000012;
}
.z-10 {
    z-index:10;
}
.z-5 {
    z-index: 5;
}
.z-2 {
		z-index: 2;
}
.bn {
	border: none;
}
.top-0 {
    top: 0;
}
.right-100 {
    right: -100%;
}

.hamburger div{
    width: 30px;
    height:3px;
    background: grey;
    margin: 3px;
    transition: all 0.3s ease;
}
.toggle .line1{
    transform-origin: top right;
    width:20px;
    transform: rotate(45deg) translate(10px,0px);
}
.toggle .line2{
    width:26px;
}
.toggle .line3{
    transform-origin: top right;
    width: 20px;
    transform: rotate(-45deg) translate(8px,-1px);
}
#toggleMenu.toggle {
    transform: translateX(-75vw);
}
#toggleMenu, #options {
		overflow-x: hidden;
    transition: 0.25s linear all;
}
#options.toggle {
    right: 0;
}
#overlay {
		display: none;
		pointer-events: none;
}
#overlay.toggle {
		display: block;
}