@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

body,
html {
    background: #66D4EC;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #101011;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

a, a:hover {
    color: #101011;
    text-decoration: none;
    font-weight: 400;
    transition: 0.3s ease-out;
}

img {
    max-width: 100%;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8, 0.8);
    }
    to {
        opacity: 1;
        transform: scale(1, 1);
    }
}

.content {
    width: 320px;
    margin: 24px 0;
    z-index: 999;
    animation: .3s fadeIn;
}

.gits {
    overflow: hidden;
    background: #fff;
    box-shadow: 0px 0px 0px 2px #101011;
    border-radius: 8px;
    transition: 0.3s ease-out;
}

.gits div {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 2px solid #101011;
    transition: 0.3s ease-out;
}

.gits div:hover, .gits div:active {
    background: #F7F7F7;
    transition: 0.3s ease-out;
}

.gits div name:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -1px;
    left: 0;
    background-color: #101011;
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

.gits div:hover name:after, .gits div:active name:after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }

.gits div:first-child {
    border-top: 0px solid transparent;
    background: #F7F7F7;
}

.gits name {
    font-weight: 500;
    position: relative;
}

#particles-js{
   position: fixed;
   top: 0; left: 0;
   width: 100vw; height: 100vh;
}

@media (max-width: 368px){
    .content {
        width: calc(100vw - 48px);
        margin: 24px;
    }
}