@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap");

/* RESET */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  font: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

body {
  box-sizing: border-box;
}

/* VARIBLES */
:root {
  /* font */
  --font-size-default: 1.6rem;
  --font-weight-normal: 400;
  --font-weight-bold: 900;
  /* colors */
  --primary-color: #9eff3d;
  --secondary-color: #161616;
  --tertiary-color: #dcdcdc;
  --secondary-color-transparent: rgba(0, 0, 0, 0.4);
  --tertiary-color-dark: rgb(192, 192, 192);
  --error-color: rgb(221, 11, 11);
  /* transitions */
  --transition-default: all 0.2s;
}

/* BASE */
html {
  /* 1rem = 10px */
  font-size: 62.5%;
  color-scheme: dark;
}
body {
  font-family: "Roboto", sans-serif;
  font-weight: var(--font-weight-normal);
  color: var(--secondary-color);
  font-size: calc(var(--font-size-default) + 1rem);
}

/* LAYOUT */

.container {
  display: flex;
  flex-direction: column;
  margin: 25rem auto;
  width: 100rem;
  align-items: flex-start;
  gap: 2rem;
  padding: 0 2rem;
}
.hidden {
  display: none !important;
}

/* less than or equal to 984px */
@media only screen and (max-width: 61.5em) {
  .container {
    width: 100%;
    margin: 10rem auto;
  }
  html {
    /* 1rem = 8px */
    font-size: 50%;
  }

  body {
    font-size: calc(var(--font-size-default) + 0.5rem);
  }
}

/* COMPONENTS */

/* button */
.btn {
  padding: 1.5rem;
  border: none;
  background-color: var(--primary-color);
  transition: var(--transition-default);
  cursor: pointer;
}
.btn-add {
  display: flex;
  gap: 1rem;
}
.icon-plus {
  font-weight: var(--font-weight-bold);
}
.btn:hover {
  opacity: 0.9;
}
.btn:active {
  transform: translateY(0.1rem);
}

/* crypto list */
.crypto-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}
.crypto-list span {
  flex: 1;
  text-align: center;
}
.crypto-list__header {
  background-color: var(--primary-color);
  padding: 1.5rem;
}

.crypto-list__item {
  background-color: var(--tertiary-color);
  padding: 1.5rem;
}

.crypto-list__header,
.crypto-list__item {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.crypto-list__delete {
  background-color: transparent;
  border: none;
  width: 0;
  opacity: 0;
  cursor: pointer;
  transition: var(--transition-default);
}

.crypto-list__item:hover .crypto-list__delete {
  opacity: 1;
  width: 4rem;
}
/* less than or equal to 480px */

@media only screen and (max-width: 30em) {
  .crypto-list__header {
    font-size: calc(var(--font-size-default) + 0.3rem);
  }
  .crypto-list__item {
    font-size: calc(var(--font-size-default) - 0.1rem);
  }
  .crypto-list__item span {
    overflow: hidden;
    height: 2rem;
  }
  .crypto-list__delete {
    opacity: 1;
    width: 4rem;
  }
}

/* total value */
.total {
  background-color: var(--primary-color);
  padding: 1.5rem;
  display: flex;
  gap: 2rem;
  align-self: flex-end;
}

/* overlay */
.overlay {
  height: 100vh;
  width: 100%;
  background-color: var(--secondary-color-transparent);
  position: absolute;
  top: 0;
}

/* form */

.form {
  background-color: var(--tertiary-color);
  padding: 4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.form__input {
  background-color: var(--tertiary-color-dark);
  border: none;
  padding: 1.5rem;
  outline: none;
}

.form__input:focus {
  opacity: 0.8;
}

.form__error-message {
  color: var(--error-color);
  font-size: var(--font-size-default);
}

/* error message */

.error {
  color: var(--error-color);
  background-color: var(--secondary-color);
  padding: 2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.error__ok {
  font-size: calc(var(--font-size-default) + 1rem);
  align-self: flex-end;
  padding: 1rem 2rem;
  color: var(--secondary-color);
  background-color: var(--primary-color);
  border: none;
  cursor: pointer;
}

.error__ok:hover {
  opacity: 0.8;
}