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

:root {
  --color-pale-blue: hsl(243, 100%, 93%);
  --color-grayish-blue: hsl(229, 7%, 55%);

  --color-dark-blue: hsl(228, 56%, 26%);
  --color-very-dark-blue: hsl(229, 57%, 11%);

  --color-white: #fff;

  --gradient: linear-gradient(to right,hsl(6, 100%, 80%),hsl(335, 100%, 65%))
}

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

body {
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  background-color: var(--color-very-dark-blue);
}

.wrapper {
  min-height: 100vh;
  max-width: 100%;
  color: var(--color-white);
  position: relative;
  overflow: hidden;

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

.wrapper .bg-image {
  width: 100%;
  position: absolute;
  bottom: -80px;
  z-index: -1;
}

.inner-wrapper {
    max-width: 950px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
}

.d-flex {
  display: flex;
}

.inner-wrapper section {
    padding: 40px;
    border-radius: 5px;
    background-color: var(--color-dark-blue);
}

.left {
    width: 350px;
    margin-right: 30px;
    border-top-right-radius: 100px !important;
}

.left .logo {
  margin-bottom: 30px;
}

.left .media-icons {
  display: flex;
}

.left .media-icons div {
  height: 50px;
  width: 50px;
  background-color: var(--color-very-dark-blue);
  border-radius: 10px;
  cursor: pointer;

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

.left .media-icons div:not(:last-child) {
  margin-right: 20px;
}


.right {
  width: 550px;
  position: relative;
}

.right h3 {
  font-weight: 400;
  margin-bottom: 20px;
}

.progress {
  background-color: var(--color-very-dark-blue);
  height: 18px;
  width: 100%;
  border-radius: 50px;
  padding: 3px 3px;
  margin-bottom: 10px;

  display: flex;
  align-items: center;
}

.progress-bar {
  height: 100%;
  width: 75%;
  background-image: var(--gradient);
  border-radius: 50px;
  position: relative;
}

.progress-bar::after {
  content: '';
  height: 12px;
  width: 12px;
  background-color: var(--color-white);
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
}

.storage-level {
  display: flex;
  justify-content: space-between;
}

.storage-left {
  padding: 18px 20px;
  font-weight: 700;
  background-color: var(--color-white);
  color: var(--color-very-dark-blue);
  border-radius: 5px;
  position: absolute;
  top: -30%;
  right: 40px;

  display: flex;
  align-items: center;
}

.storage-left::after {
  content: '';
  height: 30px;
  width: 30px;
  background-color: inherit;
  clip-path: polygon(0 0,100% 100%,100% 0);
  position: absolute;
  bottom: -25px;
  right: 0;
}

.storage-left .storage-free {
  font-size: 30px;
  margin-right: 10px;
}

.storage-left .storage-data-type {
  font-size: 14px;
  color: var(--color-grayish-blue);
  text-transform: uppercase;
}

/* media queries */

@media only screen and (max-width:900px) {
  .left,.right {
    width: 100%;
  }
}

@media only screen and (max-width:768px) {
  .inner-wrapper {
    flex-direction: column;
    align-items: center;
  }
  .left{ 
    margin-right: 0;
    margin-bottom: 20px;
  }
  .storage-left {
    padding: 12px 18px;
    top: 100%;
    transform: translate(-40%,-50%);
  }
  
  .storage-left::after {
    content: '';
    height: 0;
    width: 0;
  }
}

@media only screen and (max-width:700px) { 
  .wrapper {
    background-image: url('./images/bg-mobile.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10px;
  }
  .wrapper .bg-lg-image {
    display: none;
  }
  
  /* .wrapper .bg-sm-image {
    display: block;
  } */
}