/* Global */
:root {
  --sec: #4f9eff;
  --sec-v1: #004fb1;
  --tri: #f3be42;
  --tri-v1: #e7a200;
}

h2 {
  text-align: center;
}

a {
  color: inherit;
}

a:not(.imp > a) {
  text-decoration: none;
}

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

.cen {
  margin: auto;
}

.pad-10 {
  padding: 10px;
}

.imp {
  color: var(--sec);
}

.rev-imp {
  color: var(--tri);
}

.mar-0 {
  margin: 0px;
}

/* Parent -> Child */
body {
  background-color: black;
  color: white;
  font-family: "myriad-pro";
  margin: 0px;
}

header {
  display: grid;
  grid-template-columns: 20% 30% 50%;
  position: fixed;
  top: 0px;
  width: 100vw;
  outline: solid 1px var(--tri);
  padding: 2px 0px;
  filter: 50%;
  z-index: 2;
  backdrop-filter: blur(5px);
}

#main-tit {
  text-align: right;
  font-size: 1.5em;
}

sub {
  font-size: 10px;
}

nav {
  flex-flow: column nowrap;
}

nav li {
  margin: 0px 20px;
  float: right;
  list-style-type: none;
}

nav a:hover {
  color: var(--tri);
}

main {
  width: 70%;
  margin: 100px 0px 0px 15vw;
  border: solid 1px var(--sec);
}

section,
main {
  margin-bottom: 100px;
}

footer {
  background-color: var(--tri);
  color: white;
}

#foot-info {
  display: grid;
  grid-template-columns: 1fr 0.5fr 0.5fr;
  column-gap: 30px;
}

.icon {
  cursor: pointer;
  margin: 0px 5px;
  display: inline-block;
}

svg {
  width: 30px;
}

.map {
  box-shadow: -9px 8px 1px 0px black;
  border: 2px solid black;
  padding: 3px;
}