/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/
/* Our default values set as CSS variables */
:root {
  --color-bg: rgb(4, 71, 79);
  --color-text-main: #e6e1c8;
  --color-primary: rgb(220, 22, 28);
  --wrapper-height: 80vh;
  --image-max-width: 320px;
  --font-family: "Lato", sans-serif;
  --font-family-header: "Young Serif", Georgia, Times, "Times New Roman", serif;
  --desktop-breakpoint: 520px;
}

/*
  green: rgb(4, 71, 79)
  red: 202, 55, 60
*/

/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

/******************************************************************************
END Glitch hello-app default styles
******************************************************************************/

/* Page structure */
body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text-main);
  margin: 0;
}
.wrapper {
  min-height: var(--wrapper-height);
  place-items: center;
  margin: 2rem 1.5rem 0;
}

@media (min-width: 520px) {
  .wrapper {
    margin-top: 3rem;
  }
}

.content {
  max-width: 900px;
  margin: 0 auto;
}

/* Typography */
p {
  margin: 0 0 1rem 0;
  line-height: 2.1rem;
  font-size: 1.3rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 2rem 0 .8rem;
  font-family: var(--font-family-header);
  line-height: 1.1;
  color: var(--color-text-main);
  font-weight: normal;
}
h1 {
  margin-top: 1rem;
  margin-bottom: 1.75rem;
  font-size: 2.8rem;
  display: inline-flex;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.5rem;
}
h4 {
  font-size: 1.25rem;
}
h5 {
  font-size: 1.1rem;
}
h6 {
  font-size: 1rem;
}

@media (min-width: 520px) {
  h1 {
    font-size: 3.4rem;
  }
  h2 {
    font-size: 2.4rem;
  }
  h3 {
    font-size: 2rem;
  }
  h4 {
    font-size: 1.5rem;
  }
  h5 {
    font-size: 1.25rem;
  }
  h6 {
    font-size: 1.1rem;
  }
}

small,
.text_small {
  font-size: 0.8rem;
}
ul > li,
ol > li {
  margin-bottom: 0.75rem;
  line-height: 1.5;
  font-size: 1.1rem;
}
ul {
  padding: 0 0 0 18px;
  margin: 0;
}
ul.no-bullet {
  list-style-type: none;
}

/* Link styles */
a:link,
a:visited {
  text-decoration: none;
  border-bottom: 3px solid var(--color-primary);
  color: var(--color-primary);
  transition: background 0.2s linear;
}
a:hover {
  color: var(--color-text-main);
  background-color: var(--color-primary);
}

a.image {
  display: inline-block;
  text-align: center;
}

@media (min-width: 520px) {
  a.image {
    display: inline;
    text-align: left;
  }
}

a.image:link,
a.image:visited,
a.image:hover {
  border: none;
  background-color: transparent;
}

/* Layout: Home */
.home {
  justify-content: left;
}

/* Post */
/* .post {} */
.postTitle {
  font-size: 2.8rem;
  color: var(--color-text-main);
  line-height: 1.1;
  /* margin-bottom: 2rem; */
}

@media (min-width: 520px) {
  .postTitle {
    font-size: 3.4rem;
  }
}

.controls {
  margin: 3rem 0 2rem;
}

img {
  max-width: 80%;
  margin: .5rem 0;
  border: 3px solid var(--color-text-main);
}

@media (min-width: 520px) {
  img.right {
    max-width: 40%;
    float: right;
    margin: .5rem 0 .5rem 1rem;
  }
}

/* Navigation grid */
.footer {
  margin: 3rem auto 0;
  padding: 1rem 0 0.75rem 0;
  width: 100%;
  flex-wrap: wrap;
  border-top: 4px solid var(--color-text-main);
  font-size: 1rem;
  text-align: center;;
}

.footer a:link,
.footer a:visited {
  font-family: var(--font-family);
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-main);
  text-decoration: none;
  display: inline-block;
  margin: 0 1rem 0 0;
}
.footer a:hover {
  background: var(--color-primary);
}

.footer a:last-of-type {
  margin: 0;
}

.footer .links {
  padding: 0.5rem 1rem 1.5rem;
  white-space: nowrap;
  display: flex;
  justify-content: space-around;
}

@media (min-width: 520px) {
  .footer .links {
    display: block;
    justify-content: start;
  }
}

/* Posts */
.posts ul {
  list-style-type: none;
  padding: 0;
}
.posts li {
  padding: 0;
}

.description {
  display: inline-block;
  font-style: italic;
  margin-left: 2rem;
}

.cocktail-description {
  display: inline-block;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5rem;
  margin-left: 2rem;
}