/* ----------------------------------------------- */
/* BASIC SETUP */
/* ----------------------------------------------- */

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*, ul {
  margin: 0;
  padding: 0;
}

html {
  width: 100vw;
  height: 100vh;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a6244d+0,532273+100 */
  background: #a6244d; /* Old browsers */
  background: -moz-linear-gradient(left,  #a6244d 0%, #532273 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #a6244d 0%,#532273 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #a6244d 0%,#532273 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6244d', endColorstr='#532273',GradientType=1 ); /* IE6-9 */
  color: #fff;
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 18px;
}

img {
  max-width: 100%;
}

.main {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 10% 80% 10%;
  grid-template-rows: auto auto auto auto auto;
  gap: 1px 1px;
}

.logoBox { grid-area: 1 / 2 / 2 / 3; }
.welcome { grid-area: 2 / 2 / 3 / 3; }
.about { grid-area: 3 / 2 / 4 / 3; }
.social { grid-area: 4 / 2 / 5 / 3; }
.footer { grid-area: 5 / 1 / 6 / 4; }

.logoBox, .socialMediaLinks {
 display: flex;
 align-items: center;
 justify-content: center;
}

.logo img {
  width: 200px;
  height: 100%;
}

.socialMediaLinks li, .legalDocs li, .Copyright {
  display: inline-block;
  list-style: none;
}

.socialMediaLinks li{
  border-bottom: 2px solid transparent;
  font-size: 160%;
}

.socialMediaLinks li:not(:first-child){
  padding-left: 20px;
}

.socialMediaLinks li a:link,
.socialMediaLinks li a:visited {
    text-decoration: none;
    color: #fff;
    border-bottom: 2px solid transparent;
    -webkit-transition: border-bottom 0.1s;
    transition: border-bottom 0.1s;
}

.socialMediaLinks li a:hover,
.socialMediaLinksli a:active {
      border-bottom: 2px solid #fff;
}

.footer {
   background-color: #262626;
   height: 100%;
   padding-bottom: 10px;
}

.footerWrapper {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
}

.copyWrapper {
  margin-right: 30px;
}

.legalDocs li:last-child{
  margin-left: 30px;
}

.legalDocs a {
  font-size: 18px;
  text-decoration: none;
}

.legalDocs li a:link,
.legalDocs li a:visited,
.legalDocs li a:hover,
.legalDocs li a:active {
  color: #fff;
}


/* ----- HEADINGS ----- */
h1,
h2, p {
  text-align: center;
}

h1,
h2 {
  font-weight: 300;
  text-transform: uppercase;
  text-decoration: underline;
}

h1 {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 180%;
  word-spacing: 4px;
  letter-spacing: 1px;
}

h2 {
  font-size: 160%;
  word-spacing: 2px;
  margin-top: 10px;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

p {
  margin-top: 10px;
}