@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300&family=Saira:wght@100&display=swap');

:root
{
  --text-shadow: 6px;
  --transparent-black: #00000066;
  --word-container-width: 600px;
}

body {
  font-family: 'Saira', sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #0f170b;
  overflow: hidden;
}

.background
{
  width: 100%;
  height: 100%;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Text~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#title
{

}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Drawer Layout~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.drawer-layout
{
  position: absolute;
  background: var(--transparent-black);
  width: fit-content;
  height: 100%;
  transition-duration: 1s;
  left: 0%;
  z-index: 4;
}
.drawer-title
{
  position: relative;
  color: white;
  margin-left: 25px;
  margin-top: 5%;
}
.drawer-layout ul
{
  display: inline-block;
}
.drawer-layout ul ul
{
  list-style-type: none;
  padding-left: 0px;
  padding-right: 5%;
  display: flex;
  overflow: visible;
  margin-bottom: 5px;
}
.subject-list
{
  flex-direction: column;
}
.drawer-layout li
{
  cursor: pointer;
  color: white;
  font-size: 25px;
}
.drawer-item-red:hover 
{
  color: red; 
  text-shadow: var(--text-shadow)  var(--text-shadow)  var(--text-shadow) red; 
  transition: color .5s; 
}
.drawer-item-blue:hover 
{
  color: blue; 
  text-shadow: var(--text-shadow)  var(--text-shadow)  var(--text-shadow) blue; 
  transition: color .5s;
}
.drawer-item-purple:hover 
{
  color: purple; 
  text-shadow: var(--text-shadow)  var(--text-shadow)  var(--text-shadow) purple; 
  transition: color .5s;
}
.drawer-item-orange:hover 
{
  color: orange; 
  text-shadow: var(--text-shadow)  var(--text-shadow)  var(--text-shadow) orange; 
  transition: color .5s;
}
.drawer-item-green:hover 
{
  color: green; 
  text-shadow: var(--text-shadow)  var(--text-shadow)  var(--text-shadow) green; 
  transition: color .5s;
}

#hamburgerButton
{
  position: absolute;
  display: inline;
  padding: 25px;
  right: -100px;
  cursor: pointer;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Detail Div~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.bullet-item, .bullet-item a
{
  font-size: 19px !important;
  list-style-type: disc;
  cursor: pointer !important;
  text-decoration: none;
  color: inherit;
}
.bullet-item-red:hover 
{
  color: red; 
  text-shadow: var(--text-shadow)  var(--text-shadow)  var(--text-shadow) red; 
  transition: color .5s; 
}
.bullet-item-blue:hover 
{
  color: blue; 
  text-shadow: var(--text-shadow)  var(--text-shadow)  var(--text-shadow) blue; 
  transition: color .5s;
}
.bullet-item-purple:hover 
{
  color: purple; 
  text-shadow: var(--text-shadow)  var(--text-shadow)  var(--text-shadow) purple; 
  transition: color .5s;
}
.bullet-item-orange:hover 
{
  color: orange; 
  text-shadow: var(--text-shadow)  var(--text-shadow)  var(--text-shadow) orange; 
  transition: color .5s;
}
.bullet-item-green:hover 
{
  color: green; 
  text-shadow: var(--text-shadow)  var(--text-shadow)  var(--text-shadow) green; 
  transition: color .5s;
}
.bullet-item-beige:hover 
{
  color: #f7f70c; 
  text-shadow: var(--text-shadow)  var(--text-shadow)  var(--text-shadow) #f7f70c; 
  transition: color .5s;
}


.word-container
{
  width: 0%;
  height: 0%;
  display: none;
  opacity: 0.0;
  position: absolute;
  right: calc(var(--word-container-width)*-1);
  background: var(--transparent-black);
  transition: all .25s;
  transform: scale(0,0);
  transform-origin: top left;
}
.word-container p,
.word-container h3
{
  height: 100%;
  font-size: larger;
  color: white;
  display: flex;
  margin-left: 10%;
  margin-right: 10%;
  flex-direction: column;
  /*justify-content: center;*/
}

.word-container ul
{
  margin: 15px;
  overflow: visible;
  font-size: 18px;
}
.word-container ul li
{
  /*These are subheadings above the bullet point links*/
  color: white;
  font-size: 22px;
  cursor: context-menu;
  margin: 15px;
}