/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
/* Font Families */
@font-face {
    font-family: 'Noto Sans';
    src: url('_assets/NotoSansDisplay-VariableFont_wdth,wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Arvo';
    src: url('_assets/Arvo-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Arvo Bold';
    src: url('_assets/Arvo-Bold.ttf') format('truetype');
}

/* Site-Wide Details */
html {
  font-size: 16px;
}

body {
  background-color: #e4e4e4;
  background-image: url(_assets/paper.jpg);
  background-repeat: repeat;
  color: #333333;
  font-family: 'Noto Sans', monospace;
}


/* Heading Adjustments (H1-H6) */
h1 {
  font-family: 'Arvo', cursive;
}

h2, h3, h4, h5, h6 {
  font-family: 'Arvo', monospace;
}


/* Links and Focus */
a {
  color: blue;
  text-decoration: none;
}

a:hover, a:focus {
  color: green;
}

a:visited {
  color: violet;
}


/* Site Header Details */
header {
  width: 100%;
}

.siteTitle {
  font-family: 'Arvo Bold', cursive;
  font-size: 3rem;
}
a > .siteTitle, a:visited > .siteTitle, a:hover > .siteTitle { color: #333333; text-decoration: none; }


/* X-Small (phones, under 576px) */
.container {
  width: 95%;
  margin: 0 auto;
}

header {}

main {
  box-sizing: border-box;
  float: left;
  display: block;
  width: 100%;
  height: auto;
  background-color: #ffffff;
  outline: 3px double #888888;
  box-shadow: 5px 10px #888888;

}

section {
  box-sizing: border-box;
  float:left;
  display: block;
  width: 95%;
  height: auto;
  margin: 1em 2%;
  padding: 2rem 3rem;
}

footer {
  box-sizing: border-box;
  float: left;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0 1rem;
}

.zLeft {
  display: grid;
  grid-template-columns: 20% 75%;
  gap: 5%;
  box-sizing: border-box;
  width: 100%;
}

.zRight {
  display: grid;
  grid-template-columns: 75% 20%;
  gap: 5%;
  box-sizing: border-box;
  width: 100%
}

.hosts {}

aside > img {
  width: 100%;
  height: auto;
}

.zLeft > .hosts, .zRight > .hosts {
  vertical-align: top;
}

/* Small (landscape phones, 576px and up) */
@media (min-width: 576px) {}


/* Medium (tablets, 768px and up) */
@media (min-width: 768px) {
  .container { width: 90%; margin: 0 auto; }
  main { width: 100%; margin-right: 3%; height: 100%; }
}


/* Large (desktops, 992px and up) */
@media (min-width: 992px) {
  .container { width: 80%; margin: 0 auto; }
  main { width: 100%; margin-right: 3%; height: 100%; }
}


/* X-Large (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  
}


/* XX-Large (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  
}