@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");

:root
{
    --oswald:"Oswald";
}

body, .mask, main
{
    position:fixed;
    width:100%;
    height:100%;
}
body
{
    margin:0;
    background-image:url("homepage_background.jpg");
    background-position:center;
    background-size:cover;
    background-attachment:fixed;
    -webkit-backdrop-filter:blur(10px);
    display:flex;
    justify-content:center;
    align-items:center;
}
main
{
    height:max-content;
    width:max-content;
    font-family:var(--oswald);
    padding:20px;
    border-radius:15px;
    background:rgba(0, 0, 0, 0.85);
}
main h1
{
    margin:0;
    font-size:24px;
    font-weight:bold;
    color:white;
    line-height:24px;
    text-align:center;
}
main p
{
    margin:0 0 10px 0;
    font-size:16px;
    color:rgb(153, 170, 187);
    text-align:center;
}
main hr
{
    width:100%;
    border-color:lightslategray;
    border-width:1;
    border-style:ridge;
}
main ul
{
    display:flex;
    flex-direction:column;
    margin:0;
    padding:0;
}
main ul a
{
    text-decoration:none;
    transition:0.3s;
}
main ul a:nth-child(1)
{
    color:#628ca7;
}
main ul a:nth-child(2)
{
    color:#9e5ca7;
}
main ul a:nth-child(3)
{
    color:#29bdbd;
}
main ul a:nth-child(4)
{
    color:#af813d;
}
main ul a:hover
{
    filter:brightness(1.5);
}