@font-face
{
    font-family: FiraRegular;
    src: url(../ttf/FiraSansCondensed-Regular.ttf);
}

@font-face {
    font-family: FiraLight;
    src: url(../ttf/FiraSansCondensed-Light.ttf);
}

:root
{
    --fontRegular: FiraRegular, sans-serif;
    --fontLight: FiraLight, sans-serif;
    
    --colorWhite: #fff;
    --colorBlack: #001822;
    --colorGold: #d2ab67;
}

*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: var(--fontRegular);
    color: var(--colorWhite);
    font-size: 0.85rem;
}


body
{
    background-image: url(../jpg/bg.jpg);
    background-size: contain;
    height: 100dvh;
    padding: 2rem;
}

a:hover
{
    color: var(--colorGold);
    text-decoration: none;
}



div.logo,
div.underConstruction
{
    border-bottom-right-radius: 30px;
    border-top-left-radius: 30px;
    background-color: var(--colorBlack);
    width: max-content;
}

div.logo
{
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.logo > img.logo
{
    width: 13vw;
}



div.underConstruction
{
    padding: 2.5rem;
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

div.underConstruction > p
{
    font-size: 1.2rem;
}

div.underConstruction > p.notice_en
{
    font-family: var(--fontLight);
}



@media screen and (max-width: 500px)
{
    div.logo > img.logo
    {
        width: 70vw;
    }

    div.underConstruction
    {
        width: 90vw;
    }
    
    div.underConstruction > p
    {
        font-size: 1.2rem;
    }
}