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

html,body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:'Inter',sans-serif;
}

body{
    background:url("images/background.webp") center center/cover no-repeat;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    position:relative;
}

/* Dark overlay */

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(2px);
}

/* Hero */

.hero{
    position:relative;
    z-index:10;
    text-align:center;
}

.small{
    letter-spacing:10px;
    font-size:14px;
    margin-bottom:15px;
    color:#ddd;
}

h1{
    font-family:'Space Grotesk',sans-serif;
    font-size:110px;
    font-weight:700;
    cursor:pointer;
    transition:.35s;
    user-select:none;
}

h1:hover{
    color:#4da6ff;

    text-shadow:
    0 0 10px #4da6ff,
    0 0 30px #4da6ff,
    0 0 60px #4da6ff;
}

.tagline{
    margin-top:20px;
    font-size:20px;
    color:#ddd;
}

/* Portrait */

.portrait{

    position:absolute;

    left:50%;

    transform:translate(-50%,20px) scale(.85);

    bottom:180px;

    opacity:0;

    transition:.45s ease;

    pointer-events:none;

}

.portrait img{

    width:220px;

    height:220px;

    object-fit:cover;

    border-radius:50%;

    border:4px solid #4da6ff;

    box-shadow:

    0 0 15px #4da6ff,

    0 0 40px rgba(77,166,255,.6),

    0 0 80px rgba(77,166,255,.4);

}

/* Show portrait */

.portrait.show{

    opacity:1;

    transform:translate(-50%,0) scale(1);

}

/* Mobile */

@media(max-width:768px){

h1{
    font-size:64px;
}

.portrait img{
    width:160px;
    height:160px;
}

.tagline{
    font-size:16px;
}

.small{
    font-size:12px;
}

}