@import url('https://fonts.googleapis.com/css2?family=Asap+Condensed:wght@200;300;400;500;600;700;800&family=DM+Sans:wght@400;500;700&family=Fira+Sans:wght@100;200;300;400;500;600;700;800&family=Maven+Pro:wght@400;500;600;700;800;900&family=Mukta:wght@200;300;400;500;600;700;800&family=Oswald:wght@200;300;400;500;600;700&family=PT+Sans:wght@400;700&family=Source+Sans+Pro:wght@200;300;400;600;700;900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,700&family=Varta:wght@300;400;500;600;700&display=swap');



* {
  box-sizing: 0;
  font-family: 'dm sans';
  margin: 0;
  padding: 0;
}

*:not(h1, h2, hh3, h4, h5, h6) {
  font-size: .9rem;
  font-weight: 500;
}

h1, h2, h4, h3, h5, h6 {
  font-family: 'dm sans';
}

button {
  border: none;
}

img {
  width: 100%;
}

:root {
  --p_font_size: 1rem;
}

* p {
  font-size: var(--p_font_size);
  line-height: calc(var(--p_font_size) + .6rem);
  margin: 1rem 0;
}

body {
  width: 100vw;
  overflow-x: hidden;
}

.header {
  padding: 3rem 1rem;
  background: rgba(220, 220, 220, .3);
  display: grid;
  gap: 2rem;
  justify-content: center;
}

.header a {
  text-decoration: none;
}

.nav {
  display: flex;
  gap: 3rem;
  justify-content: center;
  align-items: center;
}

.logo > a {
  --font_size: 1.4rem;
  font-size: var(var(--font_size));
  background: red;
  width: calc(var(--font_size) + 1.2rem);
  display: grid;
  place-items: center;
  border-radius: 100rem; 
  aspect-ratio: 1 / 1;
  padding: 0;
  background: hsl(340, 88%, 58%, 1);
  color: white;
}

.fa-flask {
  font-size: var(--font_size);
  transform: rotate(-20deg);
}

.nav_links {
  display: flex;
  gap: .6rem;
}

.nav_links a {
  padding: .1rem .3rem;
  color: hsl(224, 72%, 43%, .99);
}

.wrapper {
  display: grid;
}

.main_container {
  padding: 4rem 2%;
  display: flex !important;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 30px 5vw;
  justify-content: center;
  gap: 3rem;
}

.question_container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  border-right: 2px solid hsl(340, 88%, 58%, 1);
  overflow-x:  scroll;
  height: fit-content;
  gap: 60rem;
  scroll-snap-type: x mandatory;
  width: min(100%, 40rem);
  scroll-margin: 20px;
}

.question_container .card {
  scroll-snap-align: start;
  scroll-margin: 20px;
  margin: 20px;
}

.card {
  justify-self: center;
  position: relative;
  overflow: hidden;
}

.container_card {
  width: min(100%, 36rem);
  margin: 0 auto;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(98%, 36rem);
  background: white;
  z-index: 10000;
  transform: translate(-50%, -50%) scale(0); 
  transition: .4s ease-in-out;
  overflow-y: auto;
  height: fit-content;
  max-height: 80vw;
}

.modal_active {
  transform: translate(-50%, -50%) scale(1);
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  right: 0;
  background: rgba(13, 13, 13, .7);
  transition: .3s ease-in-out;
}

.overlay_active {
  opacity: 1;
  pointer-events: all;
}

.close_modal_btn i, .open_modal_btn i {
  padding: 10px;
  --font-size: 1rem;
  font-size: var(--font-size) !important;
  width: calc(var(--font-size) + .3rem);
  aspect-ratio: 1 / 1;
  display: grid;
  justify-content: center;
  align-items: center;
  color: rgba(13, 13, 13, .7);
}

.card__header {
  background: rgba(180, 180, 180, .4);
  padding: 20px 40px;
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.box--shadow {
  box-shadow: 0 0 .6rem rgba(180, 180, 180, .4);
  /* border-radius: .4rem; */
}

.card__content {
  margin: 2.4rem 0;
  padding: 1.8rem;
}

.card_title {
  color: hsl(224, 72%, 43%, .99);
}

.about_link {
  --size: 1rem;
  font-size: var(--size);
  position: absolute;
  right: 0;
  background: white;
  border-radius: 100rem;
  top: 0;
  width: calc(var(--size) + 1.2rem);
  aspect-ratio: 1 / 1;
  box-shadow: 0 0 .6rem 0 rgba(13, 13, 13, .25);
  display: grid;
  justify-content: center;
  align-items: center;
  color: hsl(224, 72%, 43%, .99);
}

.revision_link {
  border: none;
}

.revision_link a {
  display: inline-block;
  text-decoration: none;
  background: hsl(224, 72%, 43%, .99);
  border-radius: .5rem;
  color: white;
  padding: .5rem 1rem;
  font-weight: 500;
}

/* SIDEBAR STYLES */

.list {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  background: hsl(224, 72%, 43%, .99);
  list-style-position: inside;
  padding: 2rem;
  color: white;
  justify-self: center;
  align-self: center;
}




.list a {
  color: white;
}

.link_container {
  display: flex;
  flex-direction: column;
  list-style: none;
  overflow: hidden;
  gap: .5rem;
  color: royalblue;
  background: lightpink;
  height: 0;
  transition: .3s ease-in-out;
  align-items: center;
  justify-content: center;
}

.container {
  overflow: hidden;
  margin: 5px 0;
}

.block__link {
  color: hsl(224, 72%, 50%, .99);
  padding: 10px 20px;
  text-decoration: none;
  display: block;
  border: 2px solid;
}

.link_container.active {
  height: 250px;
}

.rotate {
  --font_size: 1rem;
  background: salmon;
  color: white;
  font-size: var(--font_size);
  width: calc(var(--font_size) + 1rem);
  aspect-ratio: 1 / 1;
  border-radius: 100rem;
  transform: rotate(-90deg);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s ease-in-out;
}

.rotate.rotated {
  transform: rotate(90deg);
}

.arccodion_dropdown_btn {
  background: rgba(180, 180, 180, .4);
  display: flex;
  gap: 2rem;
  width: 100%;
  font-weight: 500;
  justify-content: space-between;
  padding: 10px 20px;
  border: none;
  align-items: center;
  border: .1rem solid salmon;
}