@import url("./font/fontawesome/css/fontawesome.css");
@import url("./font/fontawesome/css/brands.css");
@import url("./font/fontawesome/css/solid.css");
@font-face {
  font-family: 'Corporate-Logo-Bold-ver3-web';
  font-style: normal;
  font-weight: 700;
  src: url("./font/Corporate-Logo-Bold-ver3-web.woff2") format("woff2"), url("./font/Corporate-Logo-Bold-ver3-web.woff") format("woff");
}

:root {
  --theme-rgb: 70, 93, 170;
  --zabuton-rgb: 58, 47, 70;
}

.body {
  background-color: #A4BADF;
  font-family: "Corporate-Logo-Bold-ver3-web";
  font-size: 15px;
  max-width: 500px;
  width: 90%;
  margin: 3em auto;
  color: white;
}

.body:before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-image: url("./img/wallpaper-landscape.png");
  background-position: right top;
  background-size: cover;
}

@media (max-aspect-ratio: 1) {
  .body:before {
    background-image: url("./img/wallpaper-portrait.png");
  }
}

.header {
  text-align: center;
}

.header-icon {
  aspect-ratio: 1;
  width: 90%;
  background-color: rgba(var(--theme-rgb), 0.3);
  border-radius: 100%;
  margin: auto;
  max-width: 10em;
}

.header-logo {
  max-height: 2em;
  max-width: 90%;
  width: auto;
  margin: auto;
}

.header-paragraph {
  margin: 0.5em 0;
}

.header-paragraph span {
  display: inline-block;
}

.main-section {
  background-color: rgba(var(--theme-rgb), 0.3);
  color: white;
  padding: 1em;
  border-radius: 0.75em;
  margin: 1em auto;
}

.main-section a {
  color: white;
}

.main-section li {
  text-indent: -1em;
  padding-left: 1em;
}

.main-section h2 {
  text-align: center;
}

.main-section h2 span {
  display: inline-block;
}

.main-links_title {
  display: none;
}

.links-item {
  background-color: rgba(var(--theme-rgb), 0.3);
  list-style: none;
  margin: 1em auto;
  padding: 1em;
  border-radius: 0.75em;
}

.links-link {
  color: white;
  text-decoration: none;
  display: grid;
  grid-template: "icon title      " auto "icon description" auto "icon url        " auto /5em 1fr;
  word-wrap: break-word;
}

.links-link i, .links-link img {
  grid-area: icon;
}

.links-link i {
  font-size: 3em;
  margin: auto;
}

.links-link img {
  width: 3em;
  margin: auto;
}

.links-link h3 {
  grid-area: title;
}

.links-link p {
  grid-area: description;
}

.links-link small {
  grid-area: url;
  word-wrap: break-word;
  word-break: break-all;
}

.footer {
  color: white;
  text-align: center;
}

/*# sourceMappingURL=style.css.map */