@import "../basics.css";

@keyframes slide-down {
  from {
    transform: translateY(-2rem);
  }

  to {
    transform: translateY(0rem);
  }
}

@keyframes slide-up {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-2rem);
  }
}

h3{
  font-weight: 600;
}

form{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1vh;
  width: 50%;
   position: relative;
}

input{
  border-radius: 10px;
  border: none;
  width: 20vw;
}

.labelInput{ 
  display: flex;
  flex-direction: column-reverse;
  width: 50%;
  align-items: center;
  gap: 10px;
}

.articles-container {
  width: 100%;
  height: 80vh;
  background-image: url(../../assets/articole/Fundal-Articole1.webp);
  background-size: cover;
  display: flex;
  image-rendering: optimizeQuality;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  top: 0;
  position: relative;
  margin-bottom: 0;
  padding-bottom: 60px;
}

.errorMessage{
  padding: 30vh 20px;
  font-size: 2rem;
}

.terminal-container {
  top: 50%;
  bottom: 50%;
  width: 54vw;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0; /*Ca sa fie pe mijloc  */
  /* margin-top: 10vh; */
  color: aliceblue;

  background: rgba(27, 27, 27, 0.72);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4.3px);
  -webkit-backdrop-filter: blur(4.3px);
  border: 1px solid rgba(27, 27, 27, 1);
}

.terminaltopper {
  background-color: #0e0e0e;
  display: flex;
  justify-content: center;
  position: relative;
  border-radius: 14px 14px 0px 0px;
}

.terminaltitle {
  color: var(--lime-green);
}

.terminal-top-title{
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  gap: 10px;
}

.verde{
  color: var(--forest-green);
  font-weight: 700;
}


.start {
  width: 20rem;
  background: var(--lime-green);
  backdrop-filter: blur(15px);
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 3vh;
  padding: 10px;
  font-weight: 600;
  border: none;
  overflow: hidden;
}

.start::before{
   content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.2), transparent);
  transform: skewX(45deg) translate(0);
  transition: 0.5s;
  filter: blur(0px);
}

.start:hover::before{
  transform: skewX(45deg) translate(20rem);
}

.butonRand{
  width: 100%;
  display: flex;
  justify-content: center;
}

.quiz-img{
  height: 30vh;
  width: auto;
  border-radius: 2rem;
}

.carusel{
    width: 54vw;
    height: 70vh;
    overflow: hidden;
}

.caruselTrack {
     display: flex;
    transition: transform 0.5s ease;
}

.questionSlide {
  min-width: 54vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.answerSlide{
  display: block;
  justify-content: center;
  text-align: center;
  align-items: center;
  flex-wrap: wrap;
  width: 90%;
   background: rgba(21, 85, 13, 0.164);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 2px solid rgba(255, 255, 255, 0.274);
  color: white;
  box-shadow: 0 0 2rem 0.3rem rgba(10, 136, 10, 0.538);
  padding-top: 2vh;
  padding-bottom: 2vh;
  margin-top: 4vh;
  z-index: 100;
}

.answerSlide:hover{
  /* background-color:#074a28a1; */
  background: #07a52180;
    box-shadow: 0 0 5px #09721b, 0 0 15px #0ac129b9, 0 0 30px #0abe28bd, 0 0 60px #1eff4497;
}

.next{
   width: fit-content;
   height: fit-content;
 background: var(--lime-green);
  backdrop-filter: blur(15px);
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 3px;
  font-weight: 600;
  border: none;
  overflow: hidden;
  position: relative;
  left: 20vw;
  margin-top: 10vh;
}

.ptForm{
  margin-top: 1vh;
}

.active{
  background:#07a521bd;
}

.inactive{
  background-color: grey;
}

.eroare {
  color: red;
}

.invisible {
  opacity: 0;
}

.iconRand{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: fit-content;
  margin-top: -5vh;
  margin-bottom: 3vh;
}

.circles {
  left: 5px;
  position: absolute;
}

b :not(footer) {
  font-weight: 700;
  align-self: center;
}

/* b footer {
    margin: 0;
} */

.cards-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 80rem;
  height: auto;
}

.article-cards {
  position: sticky;
  right: 2rem;
  top: 25%;
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  align-content: center;
  width: 20vw;
  height: 100%;
  /* max-height: 80vh; */
  z-index: 1;
}

.article-button {
  all: unset;
  text-align: center;
  padding: 0.5rem 1rem 0.5rem 1rem;
  color: aliceblue;
  cursor: pointer;
  font-family: "Titillium Web", sans-serif;
  background-color: var(--lime-green);
  border-radius: 5px;
  height: 100%;
  width: 90%;
  /* From https://css.glass */
  background: rgba(27, 27, 27, 0.72);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4.3px);
  -webkit-backdrop-filter: blur(4.3px);
  border: 1px solid rgba(27, 27, 27, 1);
}

.article-button:hover {
  transition: 0.5s ease;
  transform: scale(1.05);
}

.article-cards:hover {
  animation: "slide-up" 0.5s;
  animation-fill-mode: forwards;
}

.article-button.active {
  transform: scale(1.05);
  background: var(--lime-green);
  border: 1px solid var(--lime-green);
  color: white;
  transition: 0.3s ease;
}

.article-img {
  width: 10rem;
  justify-content: center;
  position: relative;
  align-items: center;
  z-index: 2;
  margin-bottom: 1rem;
}

.content-article {
  display: flex;
  margin-bottom: 2rem;
}

.article {
  display: none;
  justify-content: center;
  text-align: center;
  margin: 0 5rem;
  transition: all 2s ease;
}

.article-text b {
  font-weight: 700;
}

.article-text {
  font-size: 2rem;
  margin-bottom: 2vh;
  text-align: justify;
}

.article-text:not(strong, br) {
  text-indent: 20px;
}

.article active {
  display: flex;
  flex-direction: column;
}

.article h1 {
  position: relative;
}

.article img {
  width: 20rem;
  height: auto;
}

.terminal-text {
  margin: 5rem;
}

.terminal-top {
  margin: 5rem;
  display: flex;
}

.loading:after {
  content: "...";
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  animation: ellipsis-dot 2s infinite 1s;
  animation-fill-mode: forwards;
  width: 1.25em;
}

@keyframes ellipsis-dot {
  25% {
    content: "";
  }

  50% {
    content: ".";
  }

  75% {
    content: "..";
  }

  100% {
    content: "...";
  }
}

.article-signature {
  display: flex;
  justify-content: flex-end;
  text-align: end;
  margin-top: 4vw;
}

@media only screen and (max-width: 912px) {
  .articles-container {
    align-items: center;
    width: 100vw;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .quizCloud {
    width: 90vw;
  }

  .article-cards {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    width: 90%;
    max-height: none;
    order: 2;
    margin-top: 2rem;
  }

  form{
    gap:20px;
  }

  .terminal-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 88vw;
    padding: 0 10px;
    margin: 0rem; /*Ca sa fie pe mijloc  */
  }

  .carusel{
    width: 90vw;
    height: 70vh;
  }

  .questionSlide{
    min-width: 90vw;
  }

  .answerSlide{
    padding-top: 1vh;
    padding-bottom: 1vh;
  }

  .next{
    left: 26vw;
  }

  .labelInput{
    width: 90%;
  }

  input{
    width: 60vw;
  }

  .ptForm{
    margin-top: 3vh;
  }

  .article {
    display: none;
    justify-content: center;
    text-align: center;
    margin: 0rem 1rem;
    transition: none;
  }
  .content-article {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .article-text b {
    font-weight: 700;
    font-size: 1.5rem;
  }

  .article h1 {
    font-size: 3rem;
  }

  .terminal-top {
    margin: 3rem;
  }
  p {
    font-size: 1.5rem;
  }

  .eroare{
    font-size: 2rem;
  }

  .terminal-text {
    margin: 3rem;
  }

  ul {
    list-style-position: inside;
  }
}