body {
    background-color: #1c2b2d;
    font-family: "poppins",sans-serif;
    margin: 100px;
}

a{
    text-decoration: none;
}
.periodic-table{
    display: grid;
    grid-template-columns: repeat(9,100px);
    grid-template-rows: repeat(4,100px);
    grid: gap 10px;
    margin: auto;
    max-width: 1200px;
    justify-content: center;
}

.perodic-element{
    padding: 4px;
    position: relative;
    z-index: 1;
    cursor: default;
    transition: all 0.3s ease;
}

.perodic-element .peroidc-element-inner{
    background: #202e38;
    padding: 10px 15px;
    width: calc(100% -30px);
    height: calc(100% - 20px);
    transition: inherit;
}

.perodic-element .title {
    font: 700 26.1538px "poppins",sans-serief;
    margin: 0.3em 0 0;
    transition: 0.8s ease 600ms;
}

.perodic-element .desc{
    font: 5500 12px"poppins",sans-serief;
    margin-top: -0.2em;
}

.perodic-element:hover{
    transform: scale(1.12);
    z-index: 10;
}

.perodic-element:hover .peroidc-element-inner {
    background: transparent;
}
.perodic-element:hover .title, .perodic-element:hover .desc{
    -webkit-text-fill-color: #222;
}

.perodic-element:hover :after{
    top: 105%;
    opacity: 1;
}
.perodic-element{
    cursor: pointer;
}
.one {
    background: linear-gradient(to bottom right,#f3f9a6 0%,#cbc634 100% );
}

.one .title ,.one .desc {
    background: -webkit-linear-gradient(#f3f9a6,#cbc634);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.four {
    background: linear-gradient(to bottom right, #fa7f72 0%,#ffc171 100%);
}

.four .title, .four .desc{
    background: -webkit-linear-gradient(#fa7f72,#ffc171);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
}
.two {
    background: linear-gradient(to bottom right, #37cfdc 0%,#5a88e5 100%);
}

.two .title, .two .desc{
    background: -webkit-linear-gradient(#37cfdc,#5a88e5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
}
.three {
    background: linear-gradient(to bottom right, #58ac30 0%,#a7df62 100%);
}

.three .title, .three .desc{
    background: -webkit-linear-gradient(#58ac30,#a7df62);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
}

.emptyspace-1{
    grid-column: 3/span 4;
    grid-row: 1;
}
.emptyspace-2{
    grid-column: 1;
    grid-row: 4;
}