@font-face
{
    font-family: "Gilroy";
    src: url("Gilroy.ttf");
}

body
{
    margin: 0;
    padding: 0;

    background: radial-gradient(circle, 
    #D3F9C9 0%, 
    #A7E8B3 50%, 
    #B0F2B6 100%);

    font-family: "Gilroy";
}

.C-0
{
    margin: 25px;

    display: flex;
}

.C-0 img
{
    margin: auto;

    width: 90%;
}

.C-1
{
    margin: 25px;

    color: transparent;
    background: linear-gradient(90deg, 
    #FFD700,
    #FF6347,
    #D3F9C9);

    font-size: 24px;
    font-weight: bold;

    text-align: center;

    -webkit-background-clip: text;
}

.C-2
{
    margin: 10px;
    padding: 10px;

    background-color: rgba(255, 255, 255, 1);
    
    border-radius: 10px;

    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.25);
}

.C-2-0
{
    margin: 10px;
}

.C-2-1
{
    margin: 10px;

    font-size: 10px;
}

.C-2-2 /* Active */
{
    color: rgba(0, 100, 0, 1);

    text-align: right;

    text-decoration: underline;
}

.C-2-3 /* Inactive */
{
    color: rgba(0, 0, 0, 0.5);

    text-align: right;
}

.Highlight-1
{
    color: rgba(0, 100, 0, 1);

    font-weight: bold;
}

.Highlight-2
{
    margin-left: 10px;
    padding: 5px;
    padding-left: 25px;
    padding-right: 25px;

    color: rgba(255, 255, 255, 1);
    background-color: rgba(34, 139, 34, 0.8);

    font-size: 12px;

    border-radius: 100px;
}

.Highlight-3
{
    margin-left: 10px;
    padding: 5px;
    padding-left: 25px;
    padding-right: 25px;

    color: rgba(255, 255, 255, 1);
    background-color: rgba(220, 20, 60, 0.8);

    font-size: 12px;

    border-radius: 100px;
}

.Highlight-4
{
    color: rgba(0, 100, 0, 1);

    font-weight: bold;

    text-align: center;

    display: flex;
}

.C-3
{
    margin: 10px;
    padding: 25px;

    background-color: rgba(255, 255, 255, 1);
    
    font-size: 10px;

    border-radius: 10px;

    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.25);
}

.C-4
{
    margin: 25px;

    color: rgba(0, 0, 0, 0.5);

    font-size: 12px;

    text-align: center;
}

a
{
    color: inherit
}

.C-2-2:hover{
    cursor: pointer;
}

.C-2-3:hover
{
    cursor: not-allowed;
}

@media (min-width: 768px)
{
    .C-1
    {
        margin: 50px;

        font-size: 48px;
    }
    .C-2
    {
        margin: 50px;
    }
    .C-2-0
    {
        margin: 25px;

        font-size: 32px;
    }
    .C-2-1
    {
        margin: 25px;

        font-size: 16px;
    }
    .C-3
    {
        margin: 50px;

        font-size: 16px;
    }
}