/* 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." */

/* Navigation Bar */

nav{
  z-index: 99;
  background-color: #0f0f0f;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 50em;
  min-height: 3em;
  margin: auto;
}

/* Header Stuff */

.header{
  background-color: #0f0f0f;
  border: 0.35em solid transparent;
  border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  border-image-slice: 1;
  width: 45em;
  margin: auto auto;
}

.logo{
  display: block;
  margin: auto auto auto auto;
  width: 45em;
}

.navlink{
  background-color: #0f0f0f;
  text-align: center;
  display: block;
  width: 150px;
  margin: 5px 5px 5px;
  color: white;
  text-decoration: none;
}

.navlink a{
  color:white;
  text-decoration: none;
}

/* Body */

body {
  min-width: 70em;
  color: white;
  text-align: center;
  font-family: Garamond, serif;
  margin: 1em 2em 2em 2em;
}

h1 {
  text-align: left; 
  margin-left: 1em;
  font-size: 2.5em;
}

hr {
  height: 0.1em; 
  background-color: white;
}

.maindiv {
  display: inline-block;
  vertical-align: top;
  background-color: #0f0f0f;
  border: 0.35em solid transparent;
  border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  border-image-slice: 1;
  width: 43em;
  padding: 1em;
  margin: 1em;
}

.maintext {
  font-size: 1.4em;
  text-align: left;
  letter-spacing: 0.05em;
  line-height: 1.35;
  margin: 1em 1em;
}

/* Sidebars */
.sidebar {
  display: inline-block;
  position: absolute;
  background-color: #0f0f0f;
  border: 0.35em solid transparent;
  border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  border-image-slice: 1;
  width: 10em;
  padding: 1em;
  margin: 1em 1.35em;
}

.sidebarimage {
  height: 10em;
}

/* Misc */

a:link, a:visited, a:hover, a:active {
  color: #C3B1E1;
  text-decoration: none;
}

.linkbutton {
  background-color: #080807;
  color: white;
  font-family: Verdana, serif;
  font-size: 1.2em;
  letter-spacing: 0.05em;
  border: double 0.15em transparent;
  border-radius: 3em;
  background-image: linear-gradient(#080807, #080807), linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  display: flex;
  align-items:center;
  justify-content: center;
  width: 20em;
  height: 3em;
  margin: 1em auto;
}

.buttimage {
  width: 1.25em; 
  margin: 0 1em 0 0;
  vertical-align: middle;
}

.projectbutton {
  background-color: #080807;
  width: 46em;
  border: 0.25em solid white;
  color: white;
  padding: 1em;
  margin: 1em;
  text-decoration: none;
  text-align: left;
  display: inline-block;
}

.buttonimage {
  width: 10em;
  margin: 10px 10px 10px 10px;
  float: left;
  border: 3px solid white;
  background-color: white;
}

.buttonheader {
  color: white; 
  margin: 10px;
  position: relative;
  left: 12px;
}

.buttonbreak {
  border: 0.1em solid white;
  margin: auto;
}

.buttondate {
  color: #A9A9A9; 
  margin: 10px;
  position: relative;
  left: 14px; 
}

.buttoninfo {
  color: white;
  margin: 10px;
  position: relative;
  left: 14px; 
}

.projectimage {
  width: 25em;
  border: 0.35em solid transparent;
  border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  border-image-slice: 1;
  margin: 2em 2em 0 2em;
}

.projecttitle {
  text-align: center; 
  margin: 0.5em;
}

.projectdiv {
  width: 25em;
}

.bonusart {
  width: 10em;
  border: 0.35em solid transparent;
  border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  border-image-slice: 1;
  display: inline-block;
  margin: 1em;
}


/* Rainbow Box Code */

.rainbow-box {
  background-color: #302244;
  border: 5px solid transparent;
  border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  border-image-slice: 1;
  height: 200px;
  margin: 20px auto;
  width: 200px;
}