
ul#index-top {
    position: absolute;
    top: 30%;
    left: 50%;
    margin: 0;
    padding: 0;
    transform: translate(-50%,50%);
    width: 600px;
    height: 150px;
}

ul#index-top li {
    list-style: none;
    position: absolute;
    width: 200px;
    height: 200px;
    transform: rotate(45deg);
    transition: .5s;
    margin: -100px;
    overflow: hidden;
    opacity: .75;
    font-size: 25px;
}

ul#index-top li a{
    color:black;
}

ul#index-top li:hover {
    opacity: 1;
    cursor: pointer
}

ul#index-top li.item1 {
    top: 0;
    left: 0
}

ul#index-top li.item2 {
    bottom: 0;
    left: 25%;
}


ul#index-top li.item3 {
    top: 0;
    left: 50%;
}

ul#index-top li.item4 {
    bottom: 0;
    left: 75%;
}

ul#index-top li.item5 {
    top: 0;
    left: 100%;
}

ul#index-top li .bg {
    width: 100%;
    height: 100%;
    transform: rotate(-45deg) scale(1.42);
    background: #ffffff50;
    display: flex;
    align-items: center;
    justify-content: center;
}

#articles{
    background-image: url("../images/bg2.svg");
    background-size: 100% auto;
    padding-bottom: 4em;
}