/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap");

html {
  color: #f8f8f6;
  font-size: 1em;
  line-height: 1.4;
}

body {
  background-color: #000000;
  font-family: "Work Sans", "Helvetica Neue", "Helvetica", sans-serif;
  text-align: right;
  height: 100%;
}

.page-wrapper {
  background-image: url("../img/infos-small-nodetails.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
  height: 100vh;
}

.info {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  text-align: center;
}

a,
a:visited {
  color: #f8f8f6;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
  .page-wrapper {
    background-image: url("../img/infos-large-nodetails.png");
  }
  .info {
    bottom: 52px;
    right: 52px;
    width: 100%;
    text-align: right;
  }
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}