@charset "utf-8";

/* Colors
white: #FAF5F4;
black: #0D0C0C;
purple: #9300FF;
green: #1EED00;
red: #FF0025;
orange: #FFAC00;
*/


html, body {
  font-family: 'Mukta', sans-serif;
  margin: 0 auto;
  padding: 0;
  background-color: #0D0C0C;
}

fieldset {
  margin: 0 auto;
  margin-top: 80px;
  padding-bottom: 25px;
  width: 330px;
  border: 4px solid;
  opacity: 0;
  transform: translateY(-30vh);
  transition: 0.5s;
}

h1 {
  color: #FAF5F4;
  font-size: 9em;
}

h2 {
  margin: 0 auto;
  color: #FAF5F4;
  font-size: 2.5em;
  display: inline;
  position: absolute;
  right: 15px;
  top: 0;
}

h3 {
  font-size: 3em;
  margin: 0 auto;
  padding-left: 9px;
  padding-right: 9px;
}

#csis_1570_wrapper {
  background-color: #1EED00;
}

#csis_3726_wrapper {
  background-color: #FF0025;
}

#csis_3760_wrapper {
  background-color: #FFAC00;
}

#main_menu {
  display: inline-block;
  text-align: center;
  margin: 0 auto;
  position: fixed;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 0;
  z-index: 15;
}

#main_menu_icon {
  margin: 0 auto;
  position: fixed;
  left: 15px;
  top: 10px;
  cursor: pointer;
  transition: .4s;
}

#main_menu_wrapper {
  display: inline-block;
  position: fixed;
  left: -254px;
  top: 52px;
}

#menu_item_1 {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

#menu_item_2 {
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

#menu_item_3 {
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}

#welcome {
  margin: 0 auto;
  text-align: center;
}

#welcome_div {
  position: fixed;
  padding-top: 100px;
  height: 100vh;
  width: 100vw;
  background-color: #9300FF;
  transition: .5s;
  transition-timing-function: ease;
  z-index: -1;
}

.assignment_item {
  margin-bottom: 15px;
}

.assignment_link {
  text-decoration: none;
  color: #FAF5F4;
  font-size: 2em;
  padding-left: 20px;
  padding-right: 20px;
}

.assignment_link:hover {
  background-color: #FAF5F4;
  transition: 0.3s;
}

.class_wrapper {
  margin: 0 auto;
  padding: 0;
  color: #FAF5F4;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  text-align: center;
  -webkit-transform: translateX(100vw);
  transform: translateX(100vw);
  transition: 0.8s;
  transition-timing-function: ease;
}

.csis_1570_item a:hover {
  color: #1EED00;
}

.csis_3726_item a:hover {
  color: #FF0025;
}

.csis_3760_item a:hover {
  color: #FFAC00;
}

.menu_bar {
  width: 35px;
  height: 5px;
  background-color: #FAF5F4;
  margin: 6px 0;
  transition: 0.4s;
  transition-timing-function: ease-in-out;
  position:relative;
}

.main_menu_item {
  transition: 0.4s;
}

.main_menu_item span{
  font-size: 2.5em;
  text-decoration: none;
  color: #FAF5F4;
  padding-left: 40px;
  padding-right: 20px;
  transition: 0.2s;
}

.main_menu_item span:hover {
  background-color: #FAF5F4;
  color: #9300FF;
  cursor: pointer;
}

/*
  Transitions
  Transitions
  Transitions
*/

.animate_in #csis_1570_wrapper {
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

.animate_in #csis_1570_wrapper fieldset {
  opacity: 1;
  transform: translateY(0vh);
  transition-delay: 0.6s;
}

.animate_in #csis_3726_wrapper {
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

.animate_in #csis_3726_wrapper fieldset {
  opacity: 1;
  transform: translateY(0vh);
  transition-delay: 0.6s;
}

.animate_in #csis_3760_wrapper {
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

.animate_in #csis_3760_wrapper fieldset {
  opacity: 1;
  transform: translateY(0vh);
  transition-delay: 0.6s;
}

.animate_out #csis_1570_wrapper {
  -webkit-transform: scale(.88,.88);
  transform: scale(.88,.88);
  z-index: -999;
  opacity: .1;
}

.animate_out #csis_3726_wrapper {
  -webkit-transform: scale(.88,.88);
  transform: scale(.88,.88);
  z-index: -999;
  opacity: .1;
}

.animate_out #csis_3760_wrapper {
  -webkit-transform: scale(.88,.88);
  transform: scale(.88,.88);
  z-index: -999;
  opacity: .1;
}

.animate_reset #csis_1570_wrapper {
  -webkit-transform: translateX(220vw);
  transform: translateX(220vw);
}

.animate_reset #csis_3726_wrapper {
  -webkit-transform: translateX(220vw);
  transform: translateX(220vw);
}

.animate_reset #csis_3760_wrapper {
  -webkit-transform: translateX(220vw);
  transform: translateX(220vw);
}

.change #main_menu_icon {
  -webkit-transform: translate(150px, 0px);
  transform: translate(150px, 0px);
}

.change #menu_bar_1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change #menu_bar_2 {
  opacity: 0;
}

.change #menu_bar_3 {
  -webkit-transform: rotate(45deg) translate(-8px,-8px);
  transform: rotate(45deg) translate(-8px,-8px);
}

.change .main_menu_item {
  -webkit-transform: translateX(250px);
  transform: translateX(250px);
}

.color_1570 .main_menu_item span:hover {
  background-color: #FAF5F4;
  color: #1EED00;
}

.color_3726 .main_menu_item span:hover {
  background-color: #FAF5F4;
  color: #FF0025;
}

.color_3760 .main_menu_item span:hover {
  background-color: #FAF5F4;
  color: #FFAC00;
}

.welcome #welcome_div {
  -webkit-transform: scale(.85, .85);
  transform: scale(.85, .85);
  height: 88vh;
  opacity: 0.0;
}