styles.css

@font-face {
  font-family: 'Lato';
  src: url('./assets/fonts/Lato/Lato-Bold.ttf');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('./assets/fonts/Lato/Lato-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('./assets/fonts/Lato/Lato-Light.ttf');
  font-weight: lighter;
  font-style: normal;
}

html {
  font-size: 62.5%;
}

:root {
  --color-blue: hsl(214, 50%, 50%);
  --color-grey: hsl(213, 16%, 22%);
  --color-white: hsl(0, 0%, 100%);
  --color-green: #516B5E;
  --color-pink: #DD7F77;
  --color-beige: #F8F3DF;
  --color-background: hsla(213, 16%, 22%, .75);
  --main-shadow: 0 0 1.5rem 0 var(--color-grey);
  --text-large: calc(var(--text-body) * 2.25);
  --text-medium: calc(var(--text-body) * 1.75);
  --text-small: calc(var(--text-body) * 1.375);
  --text-body: 1.6rem;
  --text-xs: 1.2rem;
}

html,
body {
  width: 100vw;
  height: 100%;
  margin: 0;
}

* {
  font-family: 'Lato', sans-serif;
  font-weight: normal;
}

h1,
h2,
h3,
p,
ul,
li {
  margin: 0;
  padding: 0;
}

h1 {
  font-weight: bold;
  font-size: var(--text-large);
  line-height: var(--text-large);
}

h2 {
  color: var(--color-white);
  font-size: var(--text-medium);
  line-height: var(--text-medium);
  font-weight: bold;
  margin: 1.4rem 0;
}

h2:first-of-type {
  margin-top: 0;
}

h3 {
  font-size: var(--text-small);
  line-height: var(--text-small);
  font-weight: bold;
}

p {
  font-size: var(--text-body);
  line-height: var(--text-body);
  color: var(--color-grey);
}

p + p {
  margin: 1rem 0;
}

a {
  cursor: pointer;
  color: currentColor;
}

ul,
li {
  list-style: none;
  font-size: var(--text-body);
}

input:not([type="checkbox"]),
button,
progress {
  -webkit-appearance: none;
  appearance: none;
}

input,
button {
  transition: all .3s ease-in-out;
}

input:focus,
button:focus {
  outline: none;
  transform: scale(1.1);
}

body > h1 {
  padding: 1.6rem 1rem;
  color: var(--color-white);
  background-color: var(--color-grey);
}

main {
  height: calc(100% - 6.8rem);
  overflow-y: auto;
}

/* XXX: prefix for flex needed for older browsers as found at caniuse.com */
main > div {
  padding: 2.5rem;
  width: 100%;
  min-height: 100%;
  display: -webkit-flex;
  display: -ms-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--color-green);
  box-sizing: border-box;
}

main > div:nth-of-type(2n) {
  background: var(--color-pink);
}

/*-------------
--Form Styles--
-------------*/
form[name="login"] {
  max-width: 330px;
  width: 100%;
  padding: 3rem;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: column;
  background-color: var(--color-grey);
  color: var(--color-white);
  font-size: var(--text-body);
  border-radius: .25rem;
  box-shadow: var(--main-shadow);
  box-sizing: border-box;
}

form[name="login"] > h2 {
  color: inherit;
  text-transform: uppercase;
  position: relative;
}

form[name="login"] > h2::after {
  content: '';
  width: 2rem;
  height: 2px;
  position: absolute;
  bottom: -.5rem;
  left: 0;
  background: var(--color-blue);
}

form[name="login"] > label,
form[name="login"] > a,
form[name="login"] > button,
form[name="login"] > input {
  text-transform: capitalize;
  padding: .65rem;
}

form[name="login"] > label {
  padding-top: 0;
  padding-right: 0;
}

form[name="login"] > input,
form[name="login"] > button {
  background: #6A7591;
  color: inherit;
  border: 0;
  border-radius: .25rem;
  margin: 0 0 1rem 0;
}

form[name="login"] > label[for*="stay"] {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  align-items: center;
  cursor: pointer;
}

form[name="login"] > label[for*="stay"] > input {
  display: none;
}

form[name="login"] > label[for*="stay"] > input + span {
  display:inline-block;
  width:var(--text-body);
  height:var(--text-body);
  margin-right: 1rem;
  background: #6A7591;
  opacity: .5;
  border-radius: .25rem;
  cursor: pointer;
  transition: all .3s ease-in-out;
}

form[name="login"] > label[for*="stay"] > input + span::before {
  content: '✔';
  font-size: var(--text-small);
  color: var(--color-beige);
  position: relative;
  top: -9px;
  left: 4px;
  opacity: 0;
  transition: all .3s ease-in-out;
}

form[name="login"] > label[for*="stay"] > input:checked + span::before,
form[name="login"] > label[for*="stay"] > input:checked + span {
  opacity: 1;
}

form[name="login"] > button {
  background: var(--color-blue);
  text-transform: uppercase;
  font-weight: bold;
  font-size: var(--text-body);
  margin: 2rem 0 0 0;
}

/*-------------------
--Navagation Styles--
-------------------*/
.side-nav {
  position: relative;
}

.side-nav label {
  position: absolute;
  top: 25%;
  left: 2.5rem;
  font-size: var(--text-medium);
  line-height: var(--text-medium);
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.side-nav input {
  display: none;
}

.side-nav input:checked + label {
  transform: rotate(90deg);
  left: 26.5rem;
}

.side-nav nav {
  align-self: flex-start;
  position: relative;
  left: -28.5rem;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 25rem;
  box-shadow: var(--main-shadow);
  transition: all .3s ease-in-out;
}

.side-nav input:checked ~ nav {
  left: -2.5rem;
}

.side-nav nav ul a {
  padding: 1.6rem;
  display: block;
  text-decoration: none;
  background: var(--color-white);
  transition: .3s all ease-in-out;
}

.side-nav nav ul a:hover {
  background: #dfdfdf;
}

.side-nav nav li > ul a {
  padding-left: 3rem;
}

.side-nav nav li > ul a:hover {
  background: #efefef;
}

@media (min-width: 550px) {
  .side-nav label {
    display: none;
  }

  .side-nav nav {
    left: -2.5rem;
  }
}

/*----------------------------------------
--Picture with subtitle Component Styles--
----------------------------------------*/
figure {
  position: relative;
  max-width: 62.5rem;
  border-radius: .25rem;
  overflow: hidden;
}

figure > img {
  max-width: 100%;
}

img[data-orientation="portrait"] {
  height: 0;
  display: none;
}

figure > figcaption {
  font-size: var(--text-body);
  color: var(--color-white);
  position: absolute;
  bottom: 2px;
  left: 0;
  padding: .65rem;
  background: var(--color-background);
  border-radius: 0 0 .25rem .25rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

figure p {
  color: currentColor;
}

figure footer {
  opacity: .5;
  font-size: 1.2rem;
}

/*-------------------
--Media item Styles--
--------------------*/
.media-item {
  position: relative;
  max-width: 60rem;
  padding: 2rem;
  background: var(--color-white);
  border-radius: .25rem;
  box-sizing: border-box;
}

.media-item h1 {
  font-size: var(--text-medium);
}

.media-item a {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.media-item > img {
  float: left;
  margin-right: 1rem;
  max-width: 100%;
}

.media-item p + p {
  margin-bottom: 0;
}

/*-----------------
--Progress Styles--
-----------------*/
nav[title="progress"] {
  width: 100%;
  max-width: 60rem;
  background: var(--color-white);
}

nav[title="progress"] > h1 {
  width: 100%;
  font-size: var(--text-small);
  padding: 1rem;
  box-sizing: border-box;
}

nav[title="progress"] progress {
  width: calc(100% - 4rem);
  margin: 2rem;
  height: .5rem;
}

/* XXX: This is some nasty shit but progress is not a browser friendly tag */
progress[value]::-webkit-progress-bar {
  background-color: var(--color-pink);
  border-radius: .2rem;
  border: none;
}

progress[value]::-webkit-progress-value {
  background-color: var(--color-green);
  border-radius: .2rem;
  border: none;
}

progress[value]::-moz-progress-bar {
  background-color: var(--color-pink);
  border-radius: .2rem;
  border: none;
}

progress[value]::-moz-progress-value {
  background-color: var(--color-green);
  border-radius: .2rem;
  border: none;
}

nav[title="progress"] ol {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-around;
  padding: 0 2rem;
  margin-bottom: 1.6rem;
  box-sizing: border-box;
}

nav[title="progress"] a {
  text-decoration: none;
}

nav[title="progress"] li{
  position: relative;
  text-align: center;
  font-size: var(--text-xs)
}

nav[title="progress"] li::before {
  content: attr(value);
  position: absolute;
  top: -4.4rem;
  left: calc(50% - 1.1rem);
  font-size: var(--text-xs);
  line-height: var(--text-xs);
  padding: 0.55rem .75rem;
  background: var(--color-grey);
  color: var(--color-white);
  border-radius: 100%;
}

/*---------------
--Rating Styles--
---------------*/
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 40rem;
  background: var(--color-white);
  border-radius: .25rem;
}

fieldset > legend {
  float: left;
  width: 100%;
  padding: 1rem;
  margin-left: 0;
  font-size: var(--text-small);
  font-weight: bold;
  box-sizing: border-box;
}

fieldset > section {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 2rem;
}

fieldset > section > * {
  flex: 1;
}

label[for^="rating"] {
  text-align: center;
  font-size: var(--text-xs);
  max-width: 7rem;
  color: var(--color-background);
}

input[name="rating"] {
  display: none;
}

fieldset svg {
  width: 5rem;
  filter: grayscale(100%);
  transition: .3s all ease-in-out;
}

fieldset svg:hover {
  filter: grayscale(70%);
}

input[name="rating"]:checked + label > svg {
  filter: grayscale(0);
}

/*-------------
--Chat Styles--
-------------*/
.chat {
  width: 100%;
  max-width: 70rem;
}

.chat > article {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: url('./assets/img/chat-background.jpg');
}

.chat > article > section {
  margin: 1rem;
  max-width: 80%;
  background: var(--color-blue);
  color: var(--color-white);
  border-radius: .5rem;
  font-size: var(--text-body);
  align-self: flex-start;
}

.chat header {
  padding: .5rem 0 .5rem;
  margin-bottom: .5rem;
  background: #86aed6;
  border-radius: .5rem .5rem 0 0;
  font-size: 1.2rem;
}

.chat p {
  color: currentColor;
  padding: 0 1rem;
  font-size: inherit;
}

.chat section:nth-of-type(2) {
  background: #5aa86f;
  padding-bottom: .5rem;
  align-self: flex-end;
}

.chat section:nth-last-of-type(2) header {
  background: #a2d686;
}

.chat footer {
  padding-bottom: .5rem;
  text-align: right;
  opacity: .75;
  font-size: 1.2rem;
}

.chat form {
  width: 100%;
  height: calc(var(--text-body) + 2rem);
  font-size: var(--text-body);
  position: relative;
}

.chat label {
  display: none;
}

.chat textarea {
  resize: none;
  height: 100%;
  width: 100%;
  border: 0;
  padding: .8rem;
  padding-right: 4rem;
  font-size: inherit;
  box-sizing: border-box;
}

.chat button {
  position: absolute;
  background: none;
  border: 0;
  color: var(--color-blue);
  font-size: inherit;
  right: 1rem;
  top: .8rem;
}

/*--------------------
--Media Query Styles--
--------------------*/
@media (orientation: portrait) {
  img[data-orientation="portrait"] {
    height: initial;
    display: block;
  }

  img[data-orientation="landscape"] {
    height: 0;
    display: none;
  }

  figure > figcaption {
    bottom: 0;
  }
}