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

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-color: aquamarine;
  display: flex;
  justify-content: center;
  align-items: center;
}

#card {
  height: 570px;
  width: 350px;
  background-color: #000000;
  border: 2px solid #000;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  transition: all 1s ease-in-out;
}

/* storiyaan */

#stories {
  height: 120px;
  width: 100%;
  /* background-color: red; */
  border-bottom: 1.5px solid #dadada;
  padding: 15px;
  gap: 4px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  /* this property is for firefox browser and edge to hide the scrollbar */
}
/* for removing the scroll bar we will use webkit scrollbar from chrome and safari  */

#stories::-webkit-scrollbar {
  display: none;
}

.story {
  height: 80px;
  width: 80px;
  overflow: hidden;
  display: inline-block;
  margin-right: 5px;
  border: 3px solid transparent;
  border-radius: 80%;
  background: linear-gradient(#000, #000) padding-box,
    linear-gradient(45deg, #833ab4, #fd1d1d, #f56040, #fcaf45) border-box;
}

.story img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

#full-screen {
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
  position: absolute;
  display: none;
}

/* post section
 */