@font-face {
  src: url(fonts/Pacifico-Regular.ttf);
  font-family: pacifico;
}

@font-face {
  src: url(fonts/SairaStencilOne-Regular.ttf);
  font-family: saira;
}

@font-face {
  src: url(fonts/VollkornSC-Black.ttf);
  font-family: voll;
}

@font-face {
  src: url(fonts/Livvic-LightItalic.ttf);
  font-family: livvic;
}

@font-face {
  src: url(fonts/IndieFlower-Regular.ttf);
  font-family: indie;
}

@font-face {
  src: url(fonts/TurretRoad-Medium.ttf);
  font-family: turret;
}

@font-face {
  src: url(fonts/RobotoMono-Medium.ttf);
  font-family: robot;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*::after {
  box-sizing: border-box;
}

*::before {
  box-sizing: border-box;
}

li {
  list-style: none;
}

body {
  margin: 0 auto;
}

a {
  text-decoration: none;
  color: black;
}

/*======HEADER=======*/

.header {
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas:
    " header-logo "
    " header-list ";
  grid-gap: 1em;
}

.header-logo {
  grid-area: header-logo;
  display: flex;
  justify-content: center;
  margin: 20px auto 0px auto;
  width: 85%;
}

.header-logo h1 {
  font-family: voll;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.header-list {
  grid-area: header-list;
}
.header-list ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  line-height: 2.5em;
  text-transform: uppercase;
}

.header-list ul li {
  margin: 0 1em;
  font-size: 1.1em;
  font-family: saira;
}
/*===Main container====*/

.rugby-container {
  margin: 3em auto;
  width: 90%;
}

.teamwork {
  margin: 2em 0 1em;
  font-size: 1.2em;
  font-family: pacifico;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 2.5em;
}

.rugby-box {
  width: 100%;
  margin: 0 0 0 0;
  padding: 1em 0 2.5em;
  border-bottom: 1px solid red;
}

.every-header-rugby h2 {
  text-align: center;
  padding: 1em 0;
  font-family: voll;
  font-size: 1.3em;
  word-spacing: 0.5em;
  line-height: 2em;
}

.links-rugby h2 {
  text-align: center;
  font-size: 1.4em;
}

/*=====FOOTER=====*/

.footer {
  margin: 20px auto 0px auto;
  height: 10em;
  width: 90%;
  margin-top: 1.5em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "quote quote"
    "footer-logo footer-logo";
}

.footer-logo {
  grid-area: footer-logo;
}

.quote {
  grid-area: quote;
}

.dashboard {
  grid-area: dashboard;
}

.footer-logo h2 {
  font-family: voll;
  font-size: 1.4em;
  text-align: center;
}

.quote {
  margin-bottom: 1.5em;
}

.quote p {
  text-align: center;
  font-size: 1.3em;
  line-height: 1.5em;
  padding-bottom: 0.3em;
  font-family: livvic;
}