/*Website Fonts*/

@font-face {
    font-family: 'Rubik Dirt';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/rubikdirt/v1/DtVmJxC7WLEj1uIXEWAdilss6w.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/rubik/v21/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFV0U1.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: 'Rubik';
    font-style: italic;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/rubik/v21/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFV0U1.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: 'Rubik Glitch';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/rubikglitch/v2/qkBSXv8b_srFRYQVYrDKh9ZfnyTG.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

/*General styling*/

* {
    padding: 0;
    margin-left: 10px;
    margin-right: 10px;
    font-family: 'Rubik';
    background-color: hsl(195, 53%, 79%);
}

h2 {
  font-family: 'Rubik Dirt';
  font-weight: 500;
  font-size: 30px;
  color:hsl(33, 100%, 45%);
}

footer {
  width: 100%;
  height: 30px;
  bottom: 0;
}
  
 footer p {
  font-family: 'Rubik Glitch';
  font-size: 21px;
  text-align: right;
  color: hsl(15, 50%, 45%);
}

/*Frontpage*/

.frontpage header {
  width: 100%;
  display: block;
}

.frontpage header h1 {
  font-family:'Rubik Dirt';
  font-size: 115px;
  text-align: center;
  color: hsl(33, 100%, 45%);
}

.frontpage .mainbuttons {
  width: 100%;
  text-align: center;
}

.frontpage .mainbuttons button {
  padding: 80px;
  border-style: solid;
  border-color: hsl(30, 100%, 40%);
  border-width: 4px;
  border-radius: 4%;
  font-size: 40px;
  font-weight: 600;
  color:hsl(0, 0%, 100%);
  background-color: hsl(33, 100%, 45%);
}

.frontpage .mainbuttons button:hover {
    border-color: hsl(30, 100%, 35%);
    background-color: hsl(33, 100%, 40%);
}

.frontpage .mainbuttons button:active {
    border-color: hsl(30, 100%, 20%);
    background-color: hsl(33, 100%, 25%);
}

/*Navigation*/

nav {
  width: 100%;
  position: fixed;
}

nav button {
  padding: 5px;
  border-style: solid;
  border-color: hsl(15, 50%, 45%);
  border-width: 2px;
  border-radius: 4%;
  font-size: 21px;
  font-weight: 400;
  color:hsl(0, 0%, 100%);
  background-color:hsl(33, 100%, 45%);  
}

nav button:hover {
  border-color: hsl(30, 100%, 35%);
  background-color:hsl(33, 100%, 40%);
}

nav button:active {
  border-color: hsl(30, 100%, 20%);
  background-color:hsl(33, 100%, 25%);
}