body {
    background-color: #080808;
    color: #fff;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 18px;
}

header {
    text-align: center;
    font-size: 30px;
    color: #48308d;
}

a {
    color: #bfa9ff;
}

a:hover {
    color: #080808;
    text-decoration: none;
}

::selection {
    background: #ffffff79;
}

::-moz-selection {
    background: #ffffff79;
}

img#shodan {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: 200px;
    margin-top: 10px;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
}

.center img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: 80px;
    margin-top: 10px;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
}

#line {
    margin-top: 10px;
    text-align: center;
}

.moonl {
    font-size: 150px;
    color: #ffffff;
    margin-top: 5px;
    position: absolute;
    left: 100px;
}

.moonl::after {
    content: "⧝";
}

.moonr {
    font-size: 150px;
    color: #ffffff;
    margin-top: 5px;
    position: absolute;
    right: 100px;
}

.moonr::after {
    content: "⧝";
}


@media (max-width: 700px) {
    .moonl {
        font-size: 15vw;
        left: 30px;
    }

    .moonr {
        font-size: 15vw;
        right: 30px;
    }
}

/* .container {
    min-height:90vh;    
    display: flex;
    flex-direction: column;
} */

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
}

#back::after {
    content: '<<<';
}

/*GLITCH*/

.glitchcon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #fff;
    font-family: 'Ubuntu', monospace;
    user-select: none;
}

.glitch {
    animation: glitch .4s linear infinite;
}

@keyframes glitch {

    2%,
    64% {
        color: hsl(0, 0%, 27%);
        transform: translate(2px, 0) skew(-45deg);
        color: hsl(152, 84%, 51%);
    }

    4%,
    60% {
        transform: translate(-2px, 0) skew(12deg);
    }

    68% {
        color: hsl(152, 84%, 51%);
        transform: translate(-4px, 0) skew(45deg);
        color: hsl(0, 0%, 27%);
    }
}

div:before,
div:after {
    content: attr(title);
    position: absolute;
    left: 0;
}

div:before {
    animation: glitchTop .2s linear infinite;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@keyframes glitchTop {

    2%,
    64% {
        transform: translate(2px, -2px);
    }

    4%,
    60% {
        transform: translate(-2px, 2px);
    }

    62% {
        transform: translate(13px, -1px) skew(-13deg);
    }
}

div:after {
    animation: glitchBotom .5s linear infinite;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitchBotom {

    2%,
    64% {
        transform: translate(-2px, 0);
    }

    4%,
    60% {
        transform: translate(-2px, 0);
    }

    62% {
        transform: translate(-22px, 5px) skew(21deg);
    }
}

/*END GLITCH*/