:root {

  /* VERY DARK BLUE */

  --very-dark-blue: hsl(233, 47%, 7%); /*main background*/
  --dark-blue: hsl(244, 38%, 16%); /*card background*/
  --soft-violet: hsl(277, 64%, 61%); /*accent*/

  /* NEUTRAl */

  --white: hsl(0, 0%, 100%); /* (main heading, stats) */
  --transparent-white-75: hsla(0, 0%, 100%, 0.75); /* (main paragraph) */
  --transparent-white-60: hsla(0, 0%, 100%, 0.6); /* (stat headings) */

  /* FONTS */

  --inter: 'Inter', sans-serif;
  --lexend-deca: 'Lexend Deca', sans-serif;
}

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

body {
  width: 100vw;
  height: 100vh;
}

/* BODY CONTAINER */
.container {
  width: 100%;
  height: 100%;
  background-color: var(--very-dark-blue);
  padding: 20px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container-card {
  width: 80%;
  height: auto;
  background:var(--soft-violet);
  color: white;
  border-radius: 10px;
  overflow: hidden;

  display: flex;
}

.container-content {
  flex: 1;
  background-color: var(--dark-blue);
  padding: 20px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container-content .head {
  width:80%;
  margin-bottom: 20px;
}

.container-content .head h1 {
  font-size: 2.2rem;
  font-weight: 700;
  font-family: var(--inter);
  color: var(--white);
}

.container-content .head span {
  color: var(--soft-violet);
}

.container-content .content {
  width: 80%;
  margin-bottom: 50px;
}

.container-content .content h2{
  font-size: 15px;
  font-weight: 400;
  font-family: var(--lexend-deca);
  color: var(--transparent-white-60);
  text-align: left;
}

.container-content .insights {
  width: 80%;

  font-family: var(--lexend-deca);

  display: flex;
  justify-content: space-between;
}

.container-content .insights .insight {
  width: 100px;
  color: var(--white);
  font-size: 1.5rem;
}

.container-content .insights .insight p {
  color: var(--transparent-white-60);
  font-size: 15px;
}

.container-image {
  flex: 1;
  background: var(--soft-violet);

  display: flex;
}

.container-image img {
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
}

.attribution {
    font-size: 11px;
    text-align: center;
    color: var(--white);
    padding: 10px;
  }

.attribution a {
    color: var(--transparent-white-60);
}

@media (max-width: 1000px) {

  body {
    height:auto;
    min-height: 100%;
  }

  .container-card {
    flex-direction: column;
    max-width: 500px;
    height: auto;
  }

  .container-content {
    flex: 1;
    order: 1;
  }

  .container-image {
    flex: 1;
    order: 0;
    border-radius: 10px 10px 0 0;
  }

  .container-image img {
    border-radius: 10px 10px 0 0;
  }
}

@media (max-width: 645px) {
  
  .container-content .insights {
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
  }

  .container-content .insights .insight {
    text-align: center;
    margin: 10px;
  }
}