*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#0d1117;
    color:#e6edf3;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    overflow:hidden;
}

.photo img{
    width:280px;
    max-width:80vw;
    margin-bottom:40px;
}

.complex{
    text-align:center;
}

.container{
    width:700px;
    max-width:90vw;
    padding:20px;
    background:#161b22;
    border:1px solid #30363d;
    border-radius:12px;

    color:#ff8c42;
    font-family:'Fascinate Inline', cursive;
    letter-spacing:2px;

    box-shadow:0 0 20px rgba(255,140,66,.35);

    animation:area 8s infinite;
}

.container h1{
    font-size:42px;
}

.text h2{
    margin-top:25px;

    font-family:'Hi Melody', cursive;
    font-size:34px;
    letter-spacing:2px;

    color:#e6edf3;

    animation:txtone 4s infinite;
}

.txt-two{
    animation:txttwo 4s infinite;
    animation-delay:2s;
}

.dev{
    position:fixed;
    right:20px;
    bottom:20px;

    color:#8b949e;
    font-family:monospace;
    text-align:right;
}

@keyframes area{

    0%{
        box-shadow:0 0 15px #ff8c42;
    }

    25%{
        box-shadow:0 0 20px #ffd54f;
    }

    50%{
        box-shadow:0 0 10px #30363d;
    }

    75%{
        box-shadow:0 0 20px #ff8c42;
    }

    100%{
        box-shadow:0 0 15px #ff8c42;
    }

}

@keyframes txtone{

    0%,50%{
        color:#e6edf3;
    }

    75%{
        color:#ff8c42;
        transform:skewY(-4deg);
    }

}

@keyframes txttwo{

    0%,50%{
        color:#e6edf3;
    }

    75%{
        color:#ffb86b;
        transform:skewX(7deg);
    }

}