*{
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Helvetica Neue","Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
}
body{
  background-image: url("../img/background.jpg");
}
.blog{
    background-color: rgba(255, 255, 255, 0.931);
}
.con{
    background-color: rgba(255, 255, 255, 0.769);
    position: fixed;
    right: 20px;
}
.con a{
  color: #000;
}

.top{
    padding-left: 16px;
}

body
{
  /* display: flex; */
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.container 
{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 70px 30px;
}
.container .box 
{
  margin: 28px;
  position: relative;
  display: flex;
  width: 300px;
  height: 350px;
  background: #2e2e2e;
  justify-content: center;
  align-items: center;
}
.container .box::before 
{
  content: '';
  position: absolute;
  border-top: 4px solid var(--clr);
  border-bottom: 4px solid var(--clr);
  inset: -10px 50px;
  z-index: -2;
  transform: skewY(15deg);
  transition: 0.5s ease-in-out
}
.container .box:hover::before 
{
  transform: skew(0deg);
  inset: -10px 40px;
}
.container .box::after 
{
  content: '';
  position: absolute;
  border-left: 4px solid var(--clr);
  border-right: 4px solid var(--clr);
  inset: 60px -10px;
  z-index: -1;
  transform: skew(15deg);
  transition: 0.5s ease-in-out
}
.container .box:hover::after 
{
  transform: skew(0deg);
  inset: 40px -10px;
}
 
 
.container .box .content 
{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 20px;
  padding: 0 20px;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.container .box .content .icon 
{
  color: var(--clr);
  font-size: 2.5em;
  width: 80px;
  height: 80px;
  display: flex;
  margin-top: 20px;
 
  justify-content: center;
  align-items: center;
  background: #2e2e2e;
  color: var(--clr);
  transition: 0.5s ease-in-out;
  box-shadow: 0 0 0 4px #2e2e2e,
  0 0 0 6px var(--clr);
}
.container .box:hover .content .icon
{
  color : #2e2e2e;
  background: var(--clr);
  box-shadow: 0 0 0 4px #2e2e2e,
  0 0 0 300px var(--clr);
}
.container .box .content .text h3 
{
    margin-top: 0px;
  font-size: 1.5em;
  color: #fff;
  font-weight: 500;
  transition: 0.5s ease-in-out;
}
.container .box:hover .content .text h3
{
  color: #2e2e2e;
}
.container .box .content .text p
{
  color: #777;
  transition: 0.5s ease-in-out;
}
.container .box:hover .content .text p
{
  color: #333;
}
.container .box .content .text a 
{
  position: relative;
  background: var(--clr);
  color: #2e2e2e;
  padding: 8px 15px;
  display: inline-block;
  text-decoration: none;
  font-weight: 500;
  margin-top: 10px;
  transition: 0.5s ease-in-out;
}
.container .box:hover .content .text a
{
  background: #2e2e2e;
  color: var(--clr);
}