/*** Core page styles to set the primary colours and styles to be inherited by everything else ***/
/* Core Styling */
:root {
  --text1: #111111;
  --bg1: #ffffff;
  --accent1: #804aff;
}

/* This is a 'reset', applying to all selectors. These properties have to be put here because they aren't inherited: margin, padding, etc. You generally don't want to put text properties, etc. here because those can easily be added to 'body' where they'll be inherited by all child elments of body.

Border-box makes it so padding applies inside elements, instead of increasing their size.  */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text1);
  background: var(--bg1);
}

.centerdiv {
  display: flex;
  flex-direction: column;
  margin: auto;
  border-radius: 200px;
  transition-duration: .4s;
}

h1 {
  text-align: center;
  font-family: 'Itim', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.centerdiv:hover {
  transform: translateY(-.2em);
  text-shadow: 0 .3em .6em rgba(0, 0, 0, 0.3);
}

.centerdiv:active {
  transform: scale(97%);
}

a {
  color: var(--text1);
}