@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Story+Script&display=swap');














/* page post  */
.page-post-index{
	background-color:#ffe6ff;
	padding: 8px;
	height: auto;
	
}
.page-post-index-card-description-2{
	background-color: #f2ccff;
	padding: 8px;
	height: auto;
	
}
.page-post-index-card-description-2-box{
	display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
	
}
.page-post-index-card-description-2-card{
	width: 65%;
	height: auto;
	padding: 8px;
	background-color: transparent;
	margin: 15px;
}
.page-post-index-card-description-2-card h1{
	text-align: center;
	color: black;
	font-size: 50px;
	font-family: "Story Script", sans-serif;
  font-weight: 400;
  font-style: normal;
	background-color: white;
}
.page-post-index-card-description-2-card h2{
	text-align: center;
	color: black;
	font-size: 40px;
	font-family: "Story Script", sans-serif;
  font-weight: 400;
  font-style: normal;
	background-color: white;
	
}
.page-post-index-card-description-2-card-linkr {
	width: 40%;
	height: auto;
}
.page-post-index-card-description-2-card-linkr h3{
	text-align: left;
	background-color: #f2d9f2;
	padding: 5px;
	
}
.page-post-index-card-description-2-card{
	text-align: center;
	
}
.page-post-index-card-description-2-card p {
	text-align: center;
	color: black;
}
.page-post-index-box{
	display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
	margin-top: 25px;
}
.page-post-index-card-img{
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.page-post-index-card-description{
	width: 390px;
	height: auto;
	margin: 12px;
}
.page-post-index-card-description p { 
	font-size: 20px;
	font-family: "Story Script", sans-serif;
  font-weight: 400;
  font-style: normal;
color: black;
}
.page-post-index-card-description h1{
	font-size: 50px;
	font-family: "Story Script", sans-serif;
  font-weight: 400;
  font-style: normal;
color: black;
	
}
.page-post-index-card-description li{
	display: inline;
	color: black;
	margin: 5px;
	
}
.page-post-index-card-description-2-card-linkr a{
	color: black;
}
.page-post-autora-img{
	border-radius: 60px;
}
/* page post */


/* icons */
.fa-check-circle{
	background-color: white;
	color: #0073e6;
	font-size: 20px;
	border-radius: 60px;
	
}









#head{
  position:relative;
  background: url('https://images.unsplash.com/photo-1633545495735-25df17fb9f31?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MzQ5OTgwMTd8&ixlib=rb-4.0.3&q=85') top center no-repeat;
  background-size:fixed;
  color:#334;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:3em 1em;
  box-shadow:0 2px  0 #4041; 
  z-index:2;
  width:100%;
  box-sizing:border-box;
  margin:auto; 
  &:after{
    display:block;
    content:'';
    background:#fffa;
    position:absolute;
    inset:0;
    z-index:-1;
    backdrop-filter: brightness(2) blur(15px)
  }
  img{
    border-radius:12px;
    box-shadow:-10px 10px 10px #6366;
    object-fit:cover
  }
  .featured{
    max-width:40vw;
    width:100%
  }
  .info{
     max-width:500px;
  }
  h1{
    font-size:3em;
    font-weight:800
  }
  .tag{
    margin-top:2em;
    display:block;
    color:#404;
    text-decoration:none;
    font-weight:600
    
  }
  .meta{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:space-between;
   
    b{
      display:flex;
      align-items:center;
      gap:5px;
    }
    img{
      width:50px;
      height:50px;
      object-fit:cover;
      border-radius:50%
    }
  }
  .social{
    display:flex;
    margin:2em 0;
    gap:1em;
    a{
      width:50px;
      height:50px;
      background:#fff;
      border-radius:50%;
      box-shadow:6px 6px 6px #4041;
      display:flex;
      align-items:center;
      justify-content:center;
      &:hover{
        scale:1.1;
        box-shadow:6px 6px 6px #4043;
      }
    }
    svg{
      width:70%;
      height:70%;
      path{
        fill:#434
      }
    }
  }
}

#post{
  display:flex;
  gap:10px;
  padding:2em;
  color:#404;
  max-width:1200px;
  margin:10px auto;
  .content{
    padding-top:1.4em
  }
  .side{
    min-width:30%;
    li{
      padding:.3em 0;
      font-size:.9em;
      font-weight:500;
      &:hover{
        text-decoration:underline;
        cursor:pointer
      }
    }
  }
}