html {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: 16px;
  color: black;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* Navigation */
.toggle-menu ul, header, section a, nav ul, nav ul li, nav ul li a, nav ul li a i 
{text-decoration:none; list-style:none; margin:0px; padding:0px; outline:none;}
section{width:100%; max-width:1250px; margin:0px auto; display:table; position:relative;}
header{width:100%; display:table; margin-bottom: 1px; padding:1px 8px;}
#logo{float:left; font-size:26px; text-transform:uppercase; color:#000000; font-weight:600; padding:0px 0px;}
nav{width:auto; float:right; padding-inline: 8px 8px;}
nav ul{display:table; float:right;}
nav ul li{float:left;}
nav ul li a{color:#000000; font-size:18px; padding: 12px 10px; display:inline-block; transition: all 0.5s ease 0s;}
nav ul li a:hover{color:#ffffff; transition: all 0.5s ease 0s;}
/* nav ul li a i{padding-right:10px; color:#314960; transition: all 0.5s ease 0s;} */
.toggle-menu ul{display:table; width:25px;}
.toggle-menu ul li{width:100%; height:4px; background-color:#000000; margin-bottom:4px;}
.toggle-menu ul li:last-child{margin-bottom:12px;}
input[type=checkbox], label{display:none;}

@media only screen and (max-width: 950px) {
/* #logo{padding:0px;} */
input[type=checkbox] {position: absolute; top: -9999px; left: -9999px; background:none;}
input[type=checkbox]:focus{background:none;}
label {float:right; padding:8px 8px; display:inline-block; cursor:pointer; }
input[type=checkbox]:checked ~ nav {display:block;}
nav{display:none; position:absolute; right:0px; top:45px; background-color:#505c6b; padding:0px; z-index:99;}
nav ul{width:auto;}
nav ul li{float:none; padding:0px; width:100%; display:table;}
nav ul li a{color:#FFF; font-size:15px; padding:10px 20px; display:block; border-bottom: 2px solid rgba(225,225,225, 1);}
nav ul li a:hover{color:#000000; transition: all 0.5s ease 0s;}
}

/* Navigation */


body {
  background-image: url("../images/topography.svg"), linear-gradient(0deg, #777777, #97b6ff);
  background-size: cover;
  /* background-size:700px, auto; */
  background-attachment: fixed;
  background-repeat: repeat;
  margin: 10px;
  letter-spacing: -1px;
  max-height: 100vh; /* Ensures the container fills the full viewport height */
  max-width: 100vw; /* Ensures the container fills the full viewport width */
}

.wrapper {
  max-width:1350px;
  display: grid;
  position: relative;
  margin: auto;
  grid-template-columns: 1fr;
  top: 7%;
}

    .tiles {
      display: grid;
      justify-content: center;
      grid-template-columns: repeat(auto-fit, minmax(200px, 300px));
      grid-gap: 18px;
    }

    .tile {
      margin-top: 0;
      display: grid;
      position: relative;
      grid-template-columns: 100px 2fr;
      grid-gap: 8px;
      align-items: center;
      cursor: pointer;
      border: 2px solid rgba(0, 0, 0, 0.04);
      background: rgba(101, 101, 101, 0.6);
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
      border-radius: 10px;
      padding: 7px;
      color: white;
      font-weight: 100;

    }

    .tile .tile-desc h2 {
      line-height: 1;
      margin-top: 0;
    }

    .tile .tile-desc p {
      line-height: 1;
      margin-top: 0;
    }

    .tile a:link, a:visited, a:hover, a:active {
      color: inherit;
      text-decoration: none;
    }

  .tiles .tile .tile-link {    
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

  .tiles .tile .tile-logo {
    width: 100%;
  }

.footer {
  position: relative;
  margin: 1em auto;
  max-width:1250px;
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;
}

.footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  a:link, a:visited, a:hover, a:active {
  color: inherit;
  text-decoration: none;
  padding: 0 0.1em;
  margin: 0.9rem;
  }
}

.footer .footer-nav > * {
  padding: 1px;
  border: 2px solid rgba(0, 0, 0, 0.04);
  border-radius: 3px;
  background: rgba(101, 101, 101, 0.6);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
  margin: 0.6em 0.4em;
}

.footer .logo-text {
  text-transform: uppercase;
  font-size: 1.75em;
  padding: 1rem;
}


/* Animations  Animations  Animations  Animations  Animations */
.logo-text {
  animation: 
  slide-in 0.5s, 
  wobble 2s ease 1;
}

@keyframes slide-in {
  from {
    translate: 150vw 0;
    scale: 200% 1;
  }

  to {
    translate: 0 0;
    scale: 125% 1;
  }
}

@keyframes wobble {
  0% { transform: translateX(-20%); }
  15% { transform: translateX(-20%) rotate(-5deg); }
  30% { transform: translateX(15%) rotate(3deg); }
  45% { transform: translateX(-10%) rotate(-3deg); }
  60% { transform: translateX(5%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-0.5deg); }
  100% { transform: translateX(0%); }
}