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

/*https://www.w3schools.com/css/css3_variables.asp variable colours*/
h1 {
    text-align:center;
}

:root {
  --d: #222222;
  --l: #ece6e7;
}


  body {background-color: var(--l);
  color: var(--d);
  font-family: Arial;
}

/* unvisited link */
a:link {
  color: #037094;
}

/* visited link */
a:visited {
  color: #8214dc;
}

/* mouse over link */
a:hover {
  color: #00aaea;
}

/* selected link */
a:active {
  color: #00aaea;
}


  /*box info*/
  
.boxdash {
 width: 73%;
 outline: var(--d) dashed 2px;
 margin: auto; 
 /*(the margin outside the box, auto centres the box*/
 padding-left: 2%; 
 padding-right: 2%;
 padding-top: 0.5%;
 padding-bottom: 0.5%;
 /*(basically the margin inside the box) */
}


.boxsolid {
 width: 70%;
 outline: var(--d) solid 2px;
 margin: auto; 
 /*(the margin outside the box, auto centres the box*/
 padding-left: 2%; 
 padding-right: 2%;
 padding-top: 0.5%;
 padding-bottom: 0.5%;
 /*(basically the margin inside the box) */
}


.button {
  color: var(--d); 
  border: 2px solid var(--d);
  padding: 16px 32px;
  text-align: center;
  font-family: Arial;
  display: inline-block;
  margin: 2px 4px;
  transition-duration: 0.2s;
  cursor: pointer;
  background-color: var(--l); 
}

.button:hover {
  background-color: #222222;
  color: white;
}

.hiddencontent {
   display: none;
}


/*https://kalechips.net/projects/snippets/darkmode*/
@media (prefers-color-scheme: dark) {
  :root{
    --d: #222222;
    --l: #ece6e7;
  }
  body{
  background-color: var(--d);
  color: var(--l);
  font-family: Arial;
  }
  
 a:link{
    color: #68e3fd;
}
  a:visited{
  color: #c89cfe;
}

.boxdash {
 outline: var(--l) dashed 2px;
}
 
 
 .boxsolid {
 outline: var(--l) solid 2px;
 }
 
.button {
  color: var(--d); 
  border: 2px solid var(--l);
  background-color: var(--l); 
}

.button:hover {
  background-color: var(--d);
  color: var(--l);
  border: 2px solid var(--l);
}

}