/**
 * general
 *
 * @format
 */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

:root {
  --Light-red: hsl(0, 100%, 67%);
  --Orangey-yellow: hsl(39, 100%, 56%);
  --Green-teal: hsl(166, 100%, 37%);
  --Cobalt-blue: hsl(234, 85%, 45%);
  --Light-slate-blue-background: hsl(252, 100%, 67%);
  --Light-royal-blue-background: hsl(241, 81%, 54%);
  --Violet-blue-circle: hsla(256, 72%, 46%, 1);
  --Persian-blue-circle: hsla(241, 72%, 46%, 0);
  --White: hsl(0, 0%, 100%);
  --Pale-blue: hsl(221, 100%, 96%);
  --Light-lavender: hsl(241, 100%, 89%);
  --Dark-gray-blue: hsl(224, 30%, 27%);
  --Font-size-paragraphs: 18px;
}

/*start Project*/

body {
  background-color: var(--White);
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10vh;
}

.container {
  border-radius: 4vw;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

/*The project is divided into two sides, right and left.*/
/*start left*/

.Left {
  background: linear-gradient(
    to bottom,
    var(--Light-slate-blue-background),
    var(--Light-royal-blue-background)
  );
  border-radius: 2vw 1vw 1vw 2vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 3vw;
}

h2 {
  text-align: center;
  color: var(--Light-lavender);
}

.Result {
  background: linear-gradient(
    to bottom,
    var(--Violet-blue-circle),
    var(--Persian-blue-circle)
  );
  border-radius: 50%;
  width: 15vw;
  height: 15vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

span {
  color: white;
  font-size: 4vw;
}

p {
  color: var(--Light-lavender);
  font-size: var(--Font-size-paragraphs);
  width: 19vw;
  text-align: center;
}

h3 {
  text-align: center;
  color: white;
  font-size: x-large;
}

/*start right*/

.Right {
  background-color: var(--White);
  padding: 5vw;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
  border-radius: 0vw 1vw 1vw 0vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
}

.Elements {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.icon1,
.icon2,
.icon3,
.icon4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  padding: 1vh 1vw;
  border-radius: 1vw;
}

small {
  color: rgb(197 199 214);
}

.icon1 {
  color: var(--Light-red);
  background-color: hsl(0deg 100% 67% / 20%);
}

.icon2 {
  color: var(--Orangey-yellow);
  background-color: hsl(39deg 100% 56% / 20%);
}

.icon3 {
  color: var(--Green-teal);
  background-color: hsl(166deg 100% 37% / 20%);
}

.icon4 {
  color: var(--Cobalt-blue);
  background-color: hsl(234deg 85% 45% / 20%);
}

.button {
  text-align: center;
  padding-top: 5vh;
}

button {
  padding: 2vh 2vw;
  color: white;
  border-radius: 3vw;
  background-color: var(--Dark-gray-blue);
  width: 20vw;
  cursor: pointer;
  border: none;
}

button:active {
  background-color: var(--Cobalt-blue);
}

big {
  color: var(--Dark-gray-blue);
}

/*To control mobile screens up to 480px */

@media screen and (max-width: 480px) {
  body {
    padding-top: 0vh;
  }

  .container {
    flex-direction: column;
    width: 100%;
  }

  .Left {
    border-radius: 0vw 0vw 5vw 5vw;
  }

  .Result {
    width: 35vw;
    height: 35vw;
  }

  span {
    color: white;
    font-size: 10vw;
  }

  p {
    width: 60vw;
  }

  .Elements {
    width: 100%;
  }

  button {
    border-radius: 10vw;
    width: 80vw;
  }
}