/* Removing all the margin and Padding  */
* {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: var(--fs-primary);
}

p {
  font-size: var(--fs-content);
}

/* Navigation style  */
.navigation {
  font-family: var(--ff-primary);
  font-weight: var(--fw-primary);
  font-size: var(--fs-logo);
  /* height: 4.375rem; */
  /* background-color: orange; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navigation .left {
  display: flex;
}

#dot {
  height: 1.25rem;
  color: #6c63ff;
}

#h1-dot {
  height: 1.55rem;
  color: #ffb8b8;
}

#More {
  font-weight: var(--fw-secondary);
  list-style: none;
  align-items: center;
  text-decoration: none;
  display: flex;
  margin: 0 4.375rem;
}

#More li a, button {
  margin: 0 0.875rem;
  font-size: var(--fs-nav-items);
  text-decoration: none;
  color: black;
}

#More li a:hover {
  color: #6c63ff;
  transition: all 0.3s ease-in-out;
}

#follow button{
  background: white;
      color: black;
      border: 1px solid #6c63ff ;
      font-size: var(--fs-nav-items);
      transition: all .4s ;
      font-weight: var(--fw-content);
      font-weight: bold;
      border-radius: 10px;
      padding: 10px;
      font-family: var(--ff-primary);

}

#follow button:hover{
  transform: scale(1.1);

  cursor: pointer;
  box-shadow: 0 4px 8px #6c63ff;
  /* overflow: hidden; */
}

/* Content Style */
.content {
  height: 100%;
  /* background-color: rgb(223, 189, 189); */
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.content p {
  color: var(--clr-fc-content);
}

.content-left {
  font-family: var(--ff-content);
  font-weight: var(--fw-content);
  width: 50%;
  /* line-height: var(--lh-content); */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.content-right {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-right img {
  /* height: 24.25rem; */
  width: 100%;
  /* border: 2px solid black;
    border-radius: 12.5rem; */
  margin-left: 290px;
}

/* Home articles */

.home-articles {
  /* height: 31.25rem; */
  /* background-color: red; */
  display: flex;
  flex-direction: column;
  position: relative;
  /* justify-content: space-between; */
}

.home-article-layout {
  display: flex;
  width: 70%;
  padding: 19px 0;
  justify-content: space-between;
}

.home-article-content h3 a {
  font-size: var(--fs-head-content);
  font-family: var(--ff-head-content);
  color: var(--clr-fc-primary);
  line-height: var(--lh-head-content);
  font-size: var(--fs-head-content);
  font-weight: var(--fw-head-content);
  text-decoration: none;
  transition: all .3s ;
}

.home-article-content h3 a:hover{
  color: #6c63ff;
}
.home-article{
  width: 50%;

}


.home-article-content {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  padding: 19px;
  /* width: 100%; */
  /* height: 150px; */
  padding-left: 70px;
  width: 80%;
}

.home-article-content span {
  padding: 10px 0;
  font-size: 12px;
  font-family: var(--ff-primary);
}

.home-article img {
  height: 160px;
  /* width: 100%; */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Footer Style */
.footer {
  background-color: #6c63ff;
  /* height: 2.1rem; */
  display: flex;
  font-size: .81rem;
  font-weight: bold;
  flex-direction: column;
  color: black;
  align-items: center;
  justify-content: center;
  /* background-color: blue; */
}