:root {
  /* FONTS */
  --body-font: "Manrope", sans-serif;
  --font-Weight1: 500;
  --font-Weight2: 700;

  /* COLOR PALLET */
  --bg-color1: hsl(217, 19%, 35%);
  --bg-color2: hsl(214, 17%, 51%);
  --bg-color3: hsl(212, 23%, 69%);
  --bg-color4: hsl(210, 46%, 95%);

  /* SPACING */

  --spacing-x: 4.8rem;
  --spacing-l: 3.6rem;
  --spacing-m: 2.4rem;
  --spacing-s: 1.2rem;

  --standard-width: 114.4rem;

  /* media query
  1em = 16px 

  eg 600/16 = 37.5em

  0-600px = phone (0 - 37.5em)
  600-900 = tablet portrait  (37.5em - 56.25em)
  900-1200 = tablet landscape  (56.25em - 75em)
  1200-1800 = normal (as built)  (75em - 112.5em)
  1200- = big laptops  (112.5em - ) */

  --standard-box-shadow: 0px 2px 4rem rgba(0, 0, 0, 0.15);
}

/* reset start */

* {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  overflow-x: hidden;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

/* reset end */

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--bg-color4);
  font-family: var(--body-font);
  padding: var(--spacing-m);
}

.mainBox {
  background-color: white;
  border-radius: 1.2rem;
  box-shadow: var(--standard-box-shadow);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.mainBox .left {
  background: url(../images/drawers.jpg);
  background-size: cover;
  width: 54%;
  height: 100%;
  border-bottom-left-radius: 1.2rem;
  border-top-left-radius: 1.2rem;
}

.mainBox .right {
  padding: var(--spacing-m);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: flex-start;
  position: relative;
}

.mainBox .right h1 {
  font-size: 2.2rem;
  line-height: 1.5;
  font-weight: var(--font-Weight2);
  color: var(--bg-color1);
  max-width: 40rem;
  margin: 0 0 var(--spacing-s) 0;
}

.mainBox .right p {
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--bg-color3);
  max-width: 68rem;
  margin: 0 0 var(--spacing-m) 0;
}

.bottomSec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.bottomSec img {
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  margin: 0 var(--spacing-m) 0 0;
}

.bottomSec .total {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.bottomSec .textSec h2 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.bottomSec .textSec span {
  font-size: 1.2rem;
  color: var(--bg-color3);
}

.bottomSec .sImg {
  align-self: flex-end;
}

.shareCont {
  background-color: var(--bg-color3);
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  cursor: pointer;
  position: relative;
}

.shareCont img {
  width: 2.4rem;
  height: 2.4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popup {
  position: absolute;
  background-color: var(--bg-color1);
  padding: var(--spacing-s) var(--spacing-m);
  border-radius: var(--spacing-s);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  color: white;
  bottom: 2rem;
  right: -4rem;
  transform: scale(0.4);
  transition: transform 0.4s ease-in, bottom 0.4s ease-in;
  visibility: hidden;
}

.open_popupAction {
  bottom: 7rem;
  transform: scale(1);
  visibility: visible;
}

.popup .label,
.popup .icons > img:not(:last-child) {
  margin: 0 var(--spacing-s) 0 0;
}

.attribution {
  margin-top: var(--spacing-m);
}
.attribution a {
  color: var(--bg-color1);
}

@media (max-width: 40.875em) {
  .mainBox {
    flex-direction: column;
    max-width: 70%;
  }
  .mainBox .left {
    width: 100%;
    height: 30rem;
    border-bottom-left-radius: 0;
    border-top-left-radius: 1.2rem;
    border-top-right-radius: 1.2rem;
  }
  .open_popupAction {
    bottom: 7rem;
    transform: scale(1);
    width: 100%;
    bottom: 0rem;
    right: 0rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .goHidden {
    visibility: hidden;
  }
}

@media (max-width: 38.625em) {
  .mainBox {
    max-width: 90%;
  }
}
@media (max-width: 29.5em) {
  .mainBox {
    flex-direction: column;
    max-width: 95%;
  }
}