/* Colouring Palette */
:root{
  --color-soul-blue: #48fdfd;
  --color-flag-red: #f11861;

  --color-entirely-black: #000000;
  --color-dark: #0A0A0F;
  --color-gray-dark: #10131A;
  --color-lighter-dark: #1A2026;
  --color-lightest-gray: #252E33;

  --color-whitest-white: #FFFFFF;
  --color-grayish-white: #D9E6E5;
  --color-dark-white: #CAD8D9;
  --color-darker-white: #a2adb3;
}
html{
  background: var(--color-dark);
}
::-webkit-scrollbar{
  width: 1.5vh;
}
::-webkit-scrollbar-track{
  background: var(--color-gray-dark);
}
::-webkit-scrollbar-thumb{
  background: var(--color-lighter-dark);
}
::-webkit-scrollbar-thumb:hover{
  background: var(--color-soul-blue);
}
::-webkit-scrollbar-track:hover{
  background: var(--color-lighter-dark);
}

*{
  padding: 0;
  margin: 0;
}

/* Main Assets */
div.main{
  background: linear-gradient(to top, var(--color-gray-dark), #0a0a0f41), url(bg.png);
  background-size: cover;
  background-position-y: center;
  width: 100%;
  height: 60vh;
}

div.main h1{
  text-align: center;
  color: var(--color-soul-blue);
  font-family: 'Segoe UI Black', sans-serif;
  font-size: 6vh;
  -webkit-transform: scale(1,0.75);
}
div.main h2{
  text-align: center;
  color: var(--color-whitest-white);
  font-family: 'Segoe UI SemiBold', sans-serif;
  font-size: 3vh;
  -webkit-transform: scale(1,0.9);
}
div.content{
  padding: 15vh 30vh;
}

/* **Introduction** */
div.text div.introduction{
  padding: 10vh 20vh;
}
div.introduction h1{
  color: var(--color-soul-blue);
  font-family: 'Segoe UI Black', sans-serif;
  font-size: 6vh;
  -webkit-transform: scale(1,0.75);
}
div.introduction h2{
  color: var(--color-soul-blue);
  font-family: 'Segoe Ui Black';
  font-size: 4vh;
  -webkit-transform: scale(1,0.75);
}
div.introduction h4.itext{
  color: var(--color-grayish-white);
  font-family: 'Segoe UI SemiBold', sans-serif;
  -webkit-transform: scale(1,1);
  font-size: 3vh;
}


/* **Table of Contents** */
div.text div.toc{
  padding: 10vh 20vh;
}
div.toc a{
  text-decoration: none;
  font-family: 'Segoe UI SemiBold';
  font-size: 3vh;
  border-bottom: 0.10vh solid var(--color-soul-blue);
  color: var(--color-soul-blue);
  transition: 0.2s ease;
}
div.toc a:hover{
  border-bottom: 0.2vh solid var(--color-lightest-gray);
  color: var(--color-lighter-dark);
  transition: 0.2s ease;
}
div.toc div.section{
  background: var(--color-soul-blue);
  width: 105vh;
  margin: 1vh 0vh;
  padding: 0.2vh 1vh;
  border-radius: 1vh;
}

/* **Guidelines** */
div.text{
  height: 1200vh;
  width: 100%;
  border-top: 0.25vh solid var(--color-soul-blue);
  background: var(--color-gray-dark);
}
div.text div.box{
  padding: 8vh 20vh;
}
div.box div.section{
  background: var(--color-soul-blue);
  width: 95vh;
  margin: 1vh 0vh;
  padding: 0.2vh 1vh;
  border-radius: 1vh;
}
div.box div.section2{
  background: var(--color-lighter-dark);
  width: 45vh;
  margin: 1vh 0vh;
  padding: 0.2vh 1vh;
}
div.box div.section3{
  background: var(--color-lighter-dark);
  width: 65vh;
  margin: 1.5vh 0vh;
  padding: 0.2vh 0vh;
}
div.box div.spacer{
  background: var(--color-lighter-dark);
  width: 100%;
  margin: 10vh 0vh;
  padding: 0.2vh 1vh;
}
div.text h3{
  padding: 2vh 0vh;
  color: var(--color-darker-white);
  font-family: 'Segoe UI Semibold';
  font-size: 3vh;
}
div.text h4{
  display: flex;
  color: var(--color-soul-blue);
  -webkit-transform: scale(1,0.8);
  font-family: 'Segoe UI Black';
  font-size: 6vh;
} 
div.text h5{
  color: var(--color-grayish-white);
  font-family: 'Segoe UI SemiBold';
  font-size: 4vh;
}
div.text h6{
  color: var(--color-darker-white);
  font-family: 'Segoe UI SemiBold';
  font-size: 3vh;
}
div.text c1{
  color: var(--color-soul-blue);
  font-family: 'Segoe UI SemiBold';
  font-size: 3vh;
}
div.text ul{
  padding: 0.5vh 4vh;
}
div.text ul li{
  color: var(--color-grayish-white);
  padding: 0.5vh 1vh;
  font-family: 'Segoe UI SemiBold';
  font-size: 3vh
}
div.text a{
  text-decoration: none;
  font-family: 'Segoe UI SemiBold';
  font-size: 3vh;
  border-bottom: 0.10vh solid var(--color-soul-blue);
  color: var(--color-soul-blue);
  transition: 0.2s ease;
}
div.text a:hover{
  border-bottom: 0.2vh solid var(--color-lightest-gray);
  color: var(--color-lighter-dark);
  transition: 0.2s ease;
}