/*! HTML5 Boilerplate v9.0.0-RC1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.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
   ========================================================================== */

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

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}



/* Placing an image in the back of your page, attaching it to the html element, and setting background size to cover does the trick. body min hight makes sure that the background will always cover the entire background. */
html{
	background:url('../img/Backround.jpg') center/cover no-repeat fixed;
	min-height:100%
	background-size: cover;
}
body{
	min-height:100%;
}
/* limiting the content area on large screens to 1000px and centering it */
section { max-width: 1400px; margin: 10px auto; padding: 0 20px;  background: hsla(1,0%,100%,.7);}

/* The header is a flex box, its two children are h1 and the navigation menu. the navigation is also a flex box. format the pseudo classes for interaction. The h1 uses clamp to limit the smallest and largest sizes, while making it responsive in between.  */
header {display: flex; align-items: center; justify-content: space-between;}
	h1 {color: hsla(100,100%,10%,1); font-size: clamp(1.8rem, 2.5vw, 3rem); background:hsla(100,100%,100%,.90); padding: 20px; border-radius: 5px}
	h2 {color: white; font-size: 5min-vw; text-align: center; background:hsla(340 72.7% 32.9%); padding: 15px; margin: 10}
	.h3 {color: hsla(100,100%,10%,90); font-size: 1.25vw; text-align: center; background: white; padding: 10px; margin: 0}
 .h4 {color: black; font-size: 2min-vw; text-align: center; background: white; padding: 40px; margin: 0}
/* navigation targets both the unordered list, the list items, and the anchor (link) tag. */
	nav ul {display: flex;  justify-content: center; list-style: none; padding: 0px;}
	nav li {padding: 5px;}
	nav a {background: white;  border-radius: 0%; padding: 10px; text-decoration: none;border: 1px solid silver; color: #555; display: block; font-size: clamp(1rem, 1.7vw, 2rem); font-weight: 800;}
	nav a:visited {background: silver; color: #555}
	nav a:hover {background: #555; color: white; position: relative; top: 3px;}
	nav a:active {background: silver; color: #555; position: relative; top: 7px;}
/* setting picture to 100% of figure */
  img {width: 100%}
	figure {margin: 50 auto;}
	figcaption {color: white; font-size: 2min-vw; text-align: center; background: black; padding: 10px; margin: 0}
	.photoc {width: 100%; margin: 20 auto;}

	/* setting article to flex box. For simple websites, multiple stacked flex boxes are easier to deal with than a single grid at this stage of your understanding. I also make the div into a flex box, which is vertical and keeps the content spread out so it matches the size of the picture. This would not work so well if you have too much or too little content, but for this is works well enough.  You will soon start to see how all of this works to construct a website. */
	article {display: flex; justify-content: relative; }
	#contact	article {display: flex; justify-content: relative; backround: green;}

	article div {padding: 0 2%; display: flex; flex-direction: column; justify-content: space-between; position: relative; }
	/* this would have been difficult to do with flex box, so I used absolute positioning instead, to give you an example of when to use absolute positioning after I said not to use it for general layout purposes.  */
article nav {position: absolute; top: 0; right: 30px; width: 100px;text-align: center;}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * 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
 */

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

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
/* media query originally uses min-width, starting from the smallest device and up to larger viewports. That helps in production environments, but you are starting out, and begin with the larger screen size, and require max-with instead.  The main purpose here is to switch all of the flex boxes back to block display, so that the items that on a large screen are positioned horizontally become vertical. I set the width liberally, so it covers both small tablets and phones. */

@media only screen and (max-width: 700px) {
    header, nav ul {display: block;}
    nav a {border-radius: 0; padding: 10px; text-align: center; text-transform: uppercase }
    h1 {font-size: 3em; text-align: center;}
    article {display: block;}
    .h3 {font-size: 3vw; }
    .h4 { display: flex; align-items: center; justify-content: space-between;  }
}


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


}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}