body{
    background-color:#33333f;
    margin:0;
    min-height:100vh;
    font-family:'Space Mono', monospace;
    color:white;
}

#home{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 6vw;
}

#intro h1{
    margin:0;
    font-size:clamp(40px, 5vw, 90px);
    line-height:1.0;
}

.name{
    color:#f5a623;
}

.subtitle{
    margin:0;
    color:#9a9aa3;
    max-width: 500px;
}

#logo{
    width:clamp(280px, 32vw, 760px);
}

#language-picker {
    position: fixed;
    top: 16px;
    right: 20px;
    padding-bottom: 10px;
}

#language-button {
    background: #44444f;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 8px 14px;
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0;
    transition: gap 0.2s ease;
}

#language-button .language-name {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.2s ease, opacity 0.2s ease;
}

#language-picker:hover #language-button {
    gap: 8px;
}

#language-picker:hover .language-name {
    max-width: 150px;
    opacity: 1;
}

#language-picker:not(:hover) #language-button {
    transition: gap 0.2s ease 0.4s;
}

#language-picker:not(:hover) .language-name {
    transition: max-width 0.2s ease 0.4s, opacity 0.2s ease 0.4s;
}

#language-dropdown {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    background: #44444f;
    border-radius: 10px;
    position: absolute;
    right: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease, padding 0.2s ease;
}

#language-dropdown.open {
    max-height: 200px;
    padding: 6px 0;
}

#language-dropdown li {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
}

#language-dropdown li:hover {
    background: #f5a623;
}

@media (max-width: 768px){

    #home{
        padding:0 4vw;
        gap:10px;
    }

    #intro h1{
        font-size:clamp(28px, 8vw, 50px);
    }

    #logo{
        width:40vw;
        max-width:200px;
    }
}