@import url('https://fonts.googleapis.com/css2?family=Overpass:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,700;1,700&display=swap');

html {
  height: 100dvh;
  overflow: hidden;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  background: hsl(216, 12%, 8%);
}

.cardContainer {
  background: linear-gradient(
    180deg,
    hsl(217.5deg 18.6% 16.86%),
    hsl(215.29deg 26.98% 12.35%)
  );
  border-radius: 2rem;
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 375px;
  height: 475px;
}

.starCircle {
  background: hsl(210deg 19.15% 18.43%);
  height: 60px;
  width: 60px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  font-family: 'Overpass', sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 32px;
  color: hsl(0, 0%, 100%);
}

p {
  font-family: 'Overpass', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: hsl(220deg 7.56% 53.33%);
}

.numberBtnContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
}

.numberBtn {
  background: hsl(210deg 19.15% 18.43%);
  font-family: 'Overpass', sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  color: hsl(220deg 7.56% 53.33%);
  font-size: 18px;
  height: 60px;
  width: 60px;
  border-radius: 50px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition-duration: 0.4s;
  cursor: pointer;
}
.numberBtn:hover {
  background: hsl(25, 97%, 53%);
  color: hsl(0, 0%, 100%);
}
.numberBtn:focus {
  background: hsl(217, 12%, 63%);
  color: hsl(0, 0%, 100%);
}

.submitBtnContainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 10px;
}
.submitBtn {
  width: 100%;
  font-family: 'Overpass', sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  border: none;
  background: hsl(25, 97%, 53%);
  color: hsl(0, 0%, 100%);
  height: 50px;
  border-radius: 25px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.submitBtn:hover {
  background: hsl(0, 0%, 100%);
  color: hsl(25, 97%, 53%);
}
.submitBtn:focus {
  background: hsl(25, 97%, 53%);
  color: hsl(0, 0%, 100%);
}

.showContainer {
  display: none;
  background: linear-gradient(
    180deg,
    hsl(217.5deg 18.6% 16.86%),
    hsl(215.29deg 26.98% 12.35%)
  );
  border-radius: 2rem;
  padding-left: 40px;
  padding-right: 40px;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 375px;
  height: 475px;
}
.showArticle {
  display: none;
  flex-direction: column;
  align-items: center;
}
.showRating {
  background: hsl(210deg 19.15% 18.43%);
  color: hsl(25, 97%, 53%);
  font-family: 'Overpass', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 17px;
  width: 230px;
  height: 37px;
  border: none;
  border-radius: 25px;
  display: none;
  align-items: center;
  justify-content: center;
}
.showHeader {
  display: none;
  font-family: 'Overpass', sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 32px;
  color: hsl(0, 0%, 100%);
  margin-top: 0px;
  margin-bottom: 15px;
}
.showP {
  display: none;
  font-family: 'Overpass', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: hsl(220deg 7.56% 53.33%);
  text-align: center;
  margin-top: 0px;
  margin-bottom: 18px;
  padding: 0px 5px;
}

.showImg {
  width: 200px;
}

.attribution {
  font-size: 11px;
  text-align: center;
  color: white;
  bottom: 10px;
  position: fixed;
  font-size: 12px;
}
.attribution a {
  color: hsl(220deg 7.56% 53.33%);
  transition-duration: 0.4s;
}
.attribution a:hover {
  color: hsl(25, 97%, 53%);
}

@media (max-width: 430px) {
  body {
    flex-direction: row;
  }
  .cardContainer,
  .showContainer {
    max-width: 250px;
    max-height: 400px;
  }
  .starCircle {
    margin-top: 20px;
    height: 45px;
    width: 45px;
  }
  .numberBtnContainer {
    min-width: 250px;
    justify-content: space-between;
  }
  .numberBtn {
    height: 45px;
    width: 45px;
  }
  .submitBtn {
    color: hsl(25, 97%, 53%);
    margin: 20px 0;
  }
}