@font-face 
{
    font-family: 'DDG-Regular';
    src: url('../font/Aileron-Regular.otf');
}

@font-face 
{
    font-family: 'DDG-Bold';
    src: url('../font/Aileron-Bold.otf');
}

@font-face 
{
    font-family: 'DDG-Heavy';
    src: url('../font/Aileron-Heavy.otf');
}

@font-face 
{
    font-family: 'DDG-Light';
    src: url('../font/Aileron-Light.otf');
}

@font-face 
{
    font-family: 'DDG-UltraLight';
    src: url('../font/Aileron-UltraLight.otf');
}

:root
{
    --bg-color-site: #dddddd;
    --bg-color-base: #cccccc;
    --header-color-base: #ffffff;
    --footer-color-base: #aaaaaa;
    --layer0-color: #1a4b5a;
    --layer1-color: #1f6074;
    --layer2-color: #3e8a9a;
    --layer3-color: #89bfc9;
    --highlight-color: #e5ca6f;
}

html[class="dark"]
{
    --bg-color-site: #000000;
    --bg-color-base: #2b1414;
    --header-color-base: #c2d13d;
    --footer-color-base: #c4930d;
    overflow-x: hidden;
}

body
{
    font-family: 'DDG-Bold';
    margin: 0px;
    padding: 0px;
    background-color: var(--bg-color-site);
    overflow-x: hidden;
}

div.info
{
    color: #003366;
    padding: 8px 16px;
    background-color: #40a0ff88;
    border-radius: 12px;
    border-left: 12px solid #2288ff;
    margin: 20px 0;
}

div.warning 
{
    color: #444400;
    padding: 8px 16px;
    background-color: #ffdd7888;
    border-radius: 12px;
    border-left: 12px solid #d49f00;
    margin: 20px 0;
}

div.danger
{
    color: #220000;
    padding: 8px 16px;
    background-color: #ffa0a088;
    border-radius: 12px;
    border-left: 12px solid #fe6c6f;
    margin: 20px 0;
}

div.main
{
	border-top: 4px solid;
	border-color: #3c5a4d; 
    z-index: 1;
}

main.content
{
    margin: 0px;
}

main.rounded-content
{
    margin-top: 15px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #ffffff88;
    backdrop-filter: blur(1px);
    padding: 10px;
    border: none;
    border-radius: 16px;
}