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

@import "fonts.css";

/* Variables */

:root {
    --bg: black; /*Background color*/
    --bgi: url("/images/space.gif"); /*Background Image*/
    --bc1: #34E0DE; /*Main Box Border Color - The Light Blue/Teal*/
    --bc2: #A134E0; /*Color for buttons and subboxes*/
    --bbg1: #1f0a30; /*Box Background Color - Dark Purple*/
    --h1c: #02D63B; /* Color for H1*/
    --h2c: Teal; /* Color for H2 */
    --h3c: #A134E0; /* Color for H3 */
    --h4c: rgb(2, 129, 129); /* Color for H4 */
    --textc: lightgrey; /* Standard color for text */
    --linkb: #02d63b; /* Color of link before selected */
    --linka: #A134E0; /* Color of link after selected*/

} 


/* BODY HERE */

body {
  background-image: var(--bgi);
  font-size: 25px;
  text-align: center;
}

h1 {
  color: var(--h1c);
  font-family: Digital-7;
}

h2 {
  color: var(--h3c);
  font-family: Digital-7;
}

h3 {
  color: var(--h3c);
  font-family: Tektor;
}

h4 {
  color: var(--textc);
  font-family: Tektor;
}

p {
  color: var(--textc);
  font-family: Tektor;
  font-size: 20px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 15px;
  overflow: hidden;
  background: transparent;
  display: flex;
  justify-content: center;
}

ul li {
  float: left;
  margin: 3px;
}

ul li a{
  background: transparent;
  font-family: Digital-7 !important;
  font-size: 25px !important;
  padding: 10px 20px;
  margin: 20px auto;
  border-radius: 10px;
  border-style: solid;
  border-color: #A134E0;
  box-shadow: 0 0 5px;
  text-align: center;
  cursor: pointer;
}


a:link {
  color: var(--linkb);
  font-family: Tektor;
  font-size: 20px;
  text-decoration: none;

}

a:visited {
  color: var(--linka);
  font-family: Tektor;
  font-size: 20px;
  text-decoration: none;
}

/* SPECIAL ITEMS LIKE BOXES/BUTTONS HERE */

#box1 {
  width: 600px;
  margin: 35px auto;
  padding: 5px 15px 10px;
  border-radius: 15px;
  border-style: solid;
  border-color: var(--bc1);
  box-shadow: 0 0 10px;
  background-color: black;
  word-break: normal;
}

#box2 {
  width: 600px;
  margin: 35px auto;
  padding: 5px 15px 10px;
  border-radius: 15px;
  border-style: solid;
  border-color: #34E0DE;
  box-shadow: 0 0 10px;
  background-color: black;
  word-break: normal;
  text-align: left;
}

.button1 {
  background-color: transparent;
  font-family: Digital-7 !important;
  font-size: 25px !important;
  padding: 10px 20px;
  margin: 20px auto;
  border-radius: 10px;
  border-style: solid;
  border-color: #A134E0;
  box-shadow: 0 0 5px;
  text-align: center;
  cursor: pointer;
}