index.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;
}

@font-face {
  font-family: 'Ampersand';
  src: local('Zapfino'),
    local('Comic Sans MS');
  unicode-range: U+26;
}

html {
  font-size: 62.5%;
  font-family: 'Ampersand', 'Lato', sans-serif;
  font-weight: normal;
}

: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-diabled: #575654;
  --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;
}

h1,
h2,
h3,
p,
ul,
li {
  margin: 0;
  padding: 0;
  color: var(--color-grey);
}

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

h2 {
  font-size: var(--text-medium);
  line-height: var(--text-medium);
  font-weight: bold;
  margin: 1.4rem 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);
}

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 {
  transform: scale(1.1);
}

svg path {
  fill: currentColor;
}

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

nav {
  position: fixed;
  width: 25rem;
  height: 100%;
  background: var(--color-white);
  top: 0;
  left: -25rem;
  z-index: 1;
  transition: all .3s ease-in-out;
}

.side-nav input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  z-index: -9999;
}

.side-nav svg {
  width: 2.4rem;
  height: 2.4rem;
  transition: all .3s ease-in-out;
}

.side-nav label {
  position: fixed;
  top: 1rem;
  left: 0;
  padding: 1rem;
  background: linear-gradient(to bottom right,#F8F3DF 50%,#DD7F77 50%);
  color: var(--color-grey);
  opacity: .9;
  transition: all .3s ease-in-out;
  z-index: 1
}

.side-nav input:focus + label {
  outline: 3px solid var(--color-blue);
}

.side-nav input:checked + label {
  left: 25rem;
}

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

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

.side-nav input:not(:checked) ~ nav a:focus {
  transform: translateX(25rem);
}

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

nav ul a:hover,
nav ul a:focus {
  background: #dfdfdf;
}

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

nav li > ul a:hover,
nav li > ul a:focus {
  background: #efefef;
}

/*-- Media Items --*/
.media-items {
  padding: 2.6rem 1.6rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  box-sizing: border-box;
  background: linear-gradient(to bottom right,#516B5E,#367588);
}

.media-items h1 {
  width: 100%;
  text-align: center;
  color: var(--color-white);
}

.media-items article {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 1.6rem;
  transition: all .3s ease-in-out;
}

.media-items img {
  min-width: 20rem;
  width: 100%;
  max-width: 40rem;
  height: 25rem;
  object-fit: cover;
}

.media-items a {
  position: absolute;
  text-align: center;
  padding: 1.6rem;
  box-sizing: border-box;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(to bottom right,hsla(0, 0%, 100%, .5),hsla(214, 50%, 50%, .5));
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  opacity: 0;
  transition: all .3s ease-in-out;
  text-decoration: none;
}

.media-items article:hover,
.media-items article:active {
  box-shadow: var(--main-shadow);
  transform: translateY(-5px);
}

.media-items article:hover > a,
.media-items article:active > a,
.media-items a:focus {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 1;
}

/*-- Login -- */
#login {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  z-index: 2;
}

#login:target {
  display: flex;
}

form[name="login"] {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 30rem;
  padding: 1.6rem;
  box-sizing: border-box;
  background: linear-gradient(to bottom right,hsla(213, 16%, 2%, .85),hsla(213, 16%, 22%, .85));
  color: var(--color-white);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

form[name="login"] h2 {
  color: currentColor;
  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;
  font-size: var(--text-body);
}

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;
}

label[for*="stay-logged"] {
  display: flex;
  align-items: center;
  cursor: pointer;
}

label[for*="stay-logged"] > input {
  opacity: 0;
  z-index: -9999;
  position: absolute;
}

label[for*="stay-logged"] > 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;
}

label[for*="stay-logged"] > 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;
}

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

label[for*="stay-logged"] > input:focus + span {
  outline: 3px solid var(--color-blue);
}

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

form[name="login"] > button[name="close-login"] {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border-radius: 50%;
  margin: 0;
  z-index: +1;
}

form[name="login"] > button[name="close-login"]:hover,
form[name="login"] > button[name="close-login"]:active,
form[name="login"] > button[name="close-login"]:focus {
  background: var(--color-blue);
}

form[name="login"]:invalid button[type="submit"] {
  background: var(--color-diabled);
}

form[name="login"] input:not([type="checkbox"]) {
  border: 2px solid;
}

form[name="login"]:invalid input:not([type="checkbox"]) {
  border-color: var(--color-pink);
}

form[name="login"] input:not([type="checkbox"]):valid {
  border-color: var(--color-green);
}

form[name="login"]:valid {
  background: linear-gradient(to bottom right,hsla(150, 14%, 32%, .85),hsla(213, 16%, 22%, .85));
}

/*-- Picture with text --*/
.picture-with-text {
  background: linear-gradient(to bottom right,#0D2C3F,#0EBCE9);
  color: var(--color-white);
}

.picture-with-text h2,
.picture-with-text p {
  color: currentColor;
}

.picture-with-text figure {
  margin: 0 auto;
  padding: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 80rem;
}

.picture-with-text img {
  width: 100%;
  max-width: 40rem;
  align-self: flex-start;
}

.picture-with-text figcaption {
  max-width: 30rem;
  align-self: center;
}

.picture-with-text footer {
  margin-top: .5rem;
  font-size: var(--text-xs);
  text-align: right;
  opacity: .7;
}

/*-- Rating -- */
fieldset {
  margin: 1rem 0;
  padding: 0;
  border: 0;
  width: 100%;
  border-top: 1px dashed var(--color-white);
  border-bottom: 1px dashed var(--color-white);
}

fieldset > legend {
  position: relative;
  top: 1rem;
  float: left;
  width: 100%;
  margin-left: 0;
  font-size: var(--text-xs);
  box-sizing: border-box;
}

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

label[for^="rating"] {
  text-align: center;
  font-size: var(--text-medium);
  max-width: 7rem;
  color: var(--color-background);
  flex: 1;
  filter: grayscale(100%);
  transition: .3s all ease-in-out;
}

input[name="rating"] {
  opacity: 0;
  z-index: -9999;
  position: absolute;
}

fieldset label:hover,
input[name="rating"]:focus + label {
  filter: grayscale(70%);
}

input[name="rating"]:focus + label {
  outline: 3px solid var(--color-blue);
}

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

/*-- chat --*/
.chat {
  font-size: var(--text-body);
  background: linear-gradient(to bottom right,#CEEBD6,#FDDAC7);
  padding: 1.6rem 0;
}

.chat h2,
.chat > article,
.chat form {
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
}

.chat h2 {
  color: var(--color-white);
  background: var(--color-grey);
  width:100%;
  max-width: 70rem;
  padding: 1rem;
  box-sizing: border-box;
  text-align: center;
}

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

.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.other-message {
  background: #5aa86f;
  padding-bottom: .5rem;
  align-self: flex-end;
}

.chat section.other-message header {
  background: #a2d686;
}

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

.chat form {
  height: calc(var(--text-body) + 2rem);
  font-size: var(--text-body);
  font-weight: light;
  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;
}

/*-- loading --*/
.loading {
  position: relative;
  background: hsl(20, 40%, 90%);
  background-image:
    linear-gradient(to bottom right,rgba(206, 235, 214, .75),rgba(253, 218, 199, .75)),
    url(https://unsplash.it/1920/1080/?random=7);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(90deg, #CE2533 11px, transparent 0),
    linear-gradient(90deg, #F8F6DF 23px, transparent 0),
    linear-gradient(90deg, #576371 41px, transparent 0);
  background-size: 41px 100%, 61px 100%, 83px 100%;
  opacity: .75;
  mix-blend-mode: color-burn;
}

.loading h2 {
  margin: 0;
  margin-bottom: 1.6rem;
  mix-blend-mode: multiply;
  padding: 0 1rem;
}

.loading span {
  width: 5rem;
  height: 5rem;
  border: 1rem solid #7512FF;
  border-radius: 50%;
  border-bottom: 1rem solid #FF9500;
  animation: bounce 5s infinite;
  -webkit-animation: bounce 5s infinite alternate;
  -moz-animation: bounce 5s infinite alternate;
  -o-animation: bounce 5s infinite alternate;
  mix-blend-mode: multiply;
}

@-webkit-keyframes bounce {
 0%, 100% {-webkit-transform: rotate(0);}
 40% {-webkit-transform: rotate(720deg);}
}

@-moz-keyframes bounce {
 0%, 100% {-moz-transform: rotate(0);}
 40% {-moz-transform: rotate(720deg);}
}

@-o-keyframes bounce {
 0%, 100% {-o-transform: rotate(0);}
 40% {-o-transform: rotate(720deg);}
}
@keyframes bounce {
 0%, 100% {transform: rotate(0);}
 40% {transform: rotate(720deg);}
}