/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." 

1A1A1A - Background Black
BB92ED - Purple
F57AC4 - Pink
FEE440 - Yellow
00BBF9 - Blue
00F5D4 - Mint
EDEDED - Light Grey   
   
   
*/

@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');

/*
Week 2 Demo
*/
@import url('https://fonts.googleapis.com/css2?family=Imperial+Script&display=swap');

.week2 p {
  font-family: "Imperial Script", cursive;
  font-weight: 400;
  font-style: normal;
}

/*
Main Content Styling
*/
body {
  background: #1A1A1A;
  color: #EDEDED;
  font-family: "Inconsolata", monospace;
  font-optical-sizing: auto;
}

main {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20%;
  padding-right: 20%;
  padding-top: 100px;
  max-width: 600px;
}

p {
  font-family: "Imperial Script", cursive;
  font-weight: 400;
  font-style: normal;
}

a {
  color: #00F5D4;
}

a:visited {
  color: #00BBF9;
}



/*
Header Styling
*/


header {
  text-align: left;
  padding-bottom: 20px;
  position: absolute;
  top: 0px;
  left: 20%;
  padding-top: 0px;
}

h1 {
  text-align: left;
  padding-bottom: 20px;
  position: absolute;
  top: 0px;
  left: 17.5%;
  padding-top: 0px;
  margin-top: 0px;
  color: #FEE440;
  font-weight: 900;
  font-size: 3.5em;
}

h2 {
  min-width: 400px;
  font-weight: 700;
  color: #00F5D4;
  left: 100%;
  padding-left: 0px;
  text-align: left;
  position: absolute;
  transform-origin: 0 0;
  transform: rotate(90deg);
  font-size: 3.5em;
}

/*
Nav Bar Styling
*/

.nav-bar {
  margin: auto;
  text-align: left;
  padding-bottom: 20px;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 15%;
  max-width: 175px;
}

.nav-bar div {
  border-right: 3px solid #F57AC4;
  height: 100%;
}

.nav-bar h1 {
  font-size: 30px;
  max-width: 10%;
  padding-left: 20px;
}

.nav-bar a {
  display: block;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  text-decoration: none;
  color: #BB92ED;
  font-weight: 500;
  font-size: 1.25em;
}

.nav-bar a:visited {
  color: #BB92ED;
}

.nav-bar a:hover {
  color: #00F5D4;
}

.nav-bar :first-child {
  padding-top: 25px;
}