@import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap');

:root{
  --white: hsl(0, 0%, 100%);
  --light-grey: hsl(217, 12%, 63%);
  --medium-grey: hsl(216, 12%, 54%);
  --dark-blue: hsl(213, 19%, 18%);
  --very-dark-blue: hsl(216, 12%, 8%);
  --orange: hsl(25, 97%, 53%);
}

body {
  background-color: var(--very-dark-blue);
  color: var(--white);
  font-family: 'Overpass', sans-serif;
}

.container-start {
  margin: 25px;
  height: 500px;  
  display: flex;
  justify-content: center;
  align-items: center;  
}

.star {
  border-radius: 50%;
  background-color: #252e37;
  padding: 15px;
}

.rating-start {
  background-color: #212832;
  padding: 30px;
  border-radius: 30px;
  width: 300px;
  text-align: left;
}

p {
  font-size: 0.9375rem;
  line-height: 1.4rem;
  color: var(--light-grey);
}

.rating-btns {
  display: flex;
  justify-content: space-evenly;
}

.rating-btns button {
  padding: 10px;  
  height: 50px;
  width: 50px;
  border-radius: 50%; 
  border: 1px transparent;
  color: var(--white);
  transition: all 0.1s;
}


.inactive {
  background-color: #252e37;
}

.rating-btns button:hover { 
  border: 2px solid var(--orange);
  cursor: pointer;
}

.rating-btns button:focus {
  background-color: var(--orange);
}


.submit-container {
  display: flex;
  justify-content: center;
}

.submit-btn {
  margin-top: 30px;
  width: 280px;
  border: none;
  border-radius: 30px;
  padding: 10px;
  background-color: var(--orange);
  color: var(--white);
  transition:  0.3s;
}

.submit-btn:hover {
  background-color: var(--white);
  color: var(--orange);
  cursor: pointer;
}

.rating-end {
  background-color: var(--dark-blue);
  padding: 30px;
  border-radius: 30px;
  width: 300px;
  text-align: center;
}

.text { 
  display: flex;
  color: var(--orange);
  background-color: var(--very-dark-blue);
  border-radius: 20px;
  width: 300px;
  height: 30px;
  margin: 10px 5px;
  justify-content: center;
  align-items: center;
}

.container-end {
  margin: 25px;
  height: 500px;  
  display: flex;
  justify-content: center;
  align-items: center;
}

.hide {
  display: none;
}