#logoanim img{
  width: auto;
  height: 50px;
  object-fit: cover;
  transform: scale(1.2);
}

.bg{
    position: fixed;
    top: 0;
    left: 0;
    z-index: -100;
    height:100vh;width:100%; 
    background: var(--pico-background-color);
}

.bg .cnt-y{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
    align-items: center;
}

.bg .cnt-x{
    display: flex;
    justify-content: center;
    flex-direction: row;
    width: 100%;
    height:100%;
}

.bg .gridz {
    position:absolute;
    display: grid;
    grid-template-columns: repeat(10, minmax(30px, 1fr));
    grid-auto-rows: 30px;
    grid-gap:60px;
  }
  
.bg .gridz > * {
    background: transparent;
    background-image: url('data:image/svg+xml,<svg width="30" height="30" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="50" x2="100" y2="50" stroke-width="2" stroke="white"/><line x1="50" y1="0" x2="50" y2="100" stroke-width="2" stroke="white"/></svg>');
  }

.ssection{
    margin-bottom: 0px;
}

@keyframes cardzanim{
    0%   {box-shadow: none;}
    25%  {box-shadow: -10px 10px 0px rgba(24, 28, 37, 1);}
    50%  {box-shadow: -10px 10px 0px rgba(24, 28, 37, 1), -20px 20px 0px rgba(24, 28, 37, 0.7);}
    100% {box-shadow: -10px 10px 0px rgba(24, 28, 37, 1), -20px 20px 0px rgba(24, 28, 37, 0.7), -30px 30px 0px rgba(24, 28, 37, 0.4);}
}

.cardz{
    outline: var(--pico-color-blue-500) solid 0px;
    transition: .3s;
    box-shadow: none;
    cursor: default;
    height: 550px;
}

.cardz:hover{
    outline: var(--pico-color-blue-500) solid 1px;
    animation-name: cardzanim;
    animation-duration: 0.4s;
    box-shadow: -10px 10px 0px rgba(24, 28, 37, 1), -20px 20px 0px rgba(24, 28, 37, 0.7), -30px 30px 0px rgba(24, 28, 37, 0.4);
}

.cardz img{
    border-radius: 10px;
}

.p-linux progress[value]::-webkit-progress-value{
    background-color: var(--pico-color-pink-500);
}
.meter {
    margin: 4px 0px;
	width: 100%;
	height: 12px;
	position: relative;
	background: #555;
	border-radius: 15px;
	padding: 0px;
	transition: .3s;
}
.meter .pink {
	background: var(--pico-color-pink-500);
}
.meter span {
	display: block;
	width: 0%;
	height: 100%;
	border-radius: 25px;
	position: relative;
	overflow: hidden;
}

.contacts button{
	border:0px;
	color:white;
	padding:6px 10px;
    margin: 0px 5px;
    border-radius: 50px;
	width:50px;
    height:50px;
	transition: .3s;
    outline: 0;
}

.contacts button:hover{
	opacity: 0.8;
}

.contacts button img {
    height: 30px;
}

.contacts .discord{
	background: rgb(139,154,223);
}

.contacts .telegram{
	background: rgb(67,146,197);
}

.contacts .fiverr{
	background: rgb(29, 191, 115);
}

.featured{
    padding: 40px 0px;
}

.featured article {
    display:inline-block;
    margin: 10px 20px;
    width: 500px;
    height:300px;
}

.featured article b{
    font-size: 28px;
}


.ffooter{
    background: rgb(19, 23, 31);
    padding: 50px 0px;
}

.ffooter a{
    text-decoration: none;
    color: #c2c7d0;
}

.ffooter a:hover{
    text-decoration: underline;
}