@font-face {
    font-family: roboto;
    src: url(fonts/Roboto/Roboto-Regular.ttf);
}

:root {
    --header: #000000;
    --background: #000000;
    --section_titles: #ffffff;
    --widget_titles: #ffffff;
    --widget_background: #800000;
    --widget_border: #ff0000;
    --widget_border: #ffffff;    
    --searchbar_background_active: #5f5f5f;
    --searchbar_background_inactive: #313131;
}

/* Desktop */
html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;

    background: var(--background);
}

header {
    width: 100%;
    height: 80px;
    padding: 15px;
    margin: 0%;
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    background: var(--header);  
}

header > img {
    width: auto;
    height: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.bodyContainer {
    width: 850px;
    padding: 25px 0 100px 0;
    margin: 0;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;

    background: var(--background);
}

.bodyContainerSearch {
    width: auto;
    height: fit-content;
    padding: 0%;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    border-radius: 10px;
    border: 1px solid var(--widget_border)
}

.bodyContainerSearch > input {
    width: 360px;
    min-height: 50px;
    padding: 10px;
    margin: 0;
    box-sizing: border-box;
    
    text-align: center;
    font-family: roboto;
    font-weight: 300;
    color: var(--widget_titles);
    
    border: none;
    background: var(--searchbar_background_active);
}

.bodyContainerSearch > input:focus {
    border: none;
    background: var(--searchbar_background_inactive);
    transition: all 1s;
}

.bodyContainerSearch > button {
    height: 50px;
    width: 100px;
    padding: 0;
    margin: 0%;
    box-sizing: border-box;

    font-family: roboto;
    font-weight: 800;
    color: var(--widget_titles);

    border: none;
    background: var(--widget_background);
    cursor: pointer;
}

.bodyContainerSection {
    width: 100%;
    height: auto;
    padding: 0%;
    margin: 0;
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;        
}

.bodyContainerSection > a {
    min-width: 300px;
    max-width: 300px;

    text-decoration: none;
    color: var(--widget_titles);
}

.widget {
    width: 100%;
    min-height: 80px;
    max-height: 80px;
    padding: 15px;
    margin: 0%;
    box-sizing: border-box;
    overflow: hidden;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    background: var(--widget_background);
    border: 1px solid var(--widget_border);
    border-radius: 10px;
}

.widgetIconContainer {
    min-width: 60px;
    max-width: 60px;
    min-height: 60px;
    max-height: 60px;
    padding: 5px;
    margin: 0%;
    box-sizing: border-box;
    overflow: hidden;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    background: var(--widget_border);
    border-radius: 50%;
}

.widgetIconContainer img {
    height: 30px;
    width: auto;
}

.widgetTextContainer {
    padding: 15px;
    margin: 0;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex-grow: 1;
    gap: 2px;
}

.widgetTextContainer > p {
    padding: 0%;
    margin: 0%;

    font-family: roboto;
}

.widgetTitle {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.widgetSubtitle {
    font-size: 10px;
    font-weight: 300;
    text-transform: lowercase;
}

/* Mobile */
@media only screen and (max-width: 600px) {
    html, body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        overflow: hidden;

        display: flex;
        flex-direction: column;
        align-items: center;

        background: var(--background);
    }
    
    header {
        width: 100%;
        height: 8%;
        padding: 15px;
        margin: 0%;
        box-sizing: border-box;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;

        background: var(--header);  
    }

    header > img {
        width: 50%;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .bodyContainer {
        width: 100%;
        height: 92%;
        padding: 10px 0 100px 0;
        margin: 0;
        box-sizing: border-box;
        overflow-y: auto;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 30px;

        background: var(--background);
    }

    .bodyContainerSearch {
        display: none;
    }

    .bodyContainerSection {
        width: 85%;
        height: auto;
        padding: 0%;
        margin: 0;
        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;        
    }

    .bodyContainerSection > a {
        width: 100%;

        text-decoration: none;
        color: var(--widget_titles);
    }

    .bodyContainerSectionTitle {
        padding: 0;
        margin: 0;
        
        font-family: roboto;
        font-size: 14px;
        text-transform: uppercase;
        color: var(--section_titles);
    }

    .widget {
        width: 100%;
        min-height: 80px;
        max-height: 80px;
        padding: 15px;
        margin: 0%;
        box-sizing: border-box;
        overflow: hidden;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        background: var(--widget_background);
        border: 1px solid var(--widget_border);
        border-radius: 10px;
    }

    .widgetIconContainer {
        min-width: 60px;
        max-width: 60px;
        min-height: 60px;
        max-height: 60px;
        padding: 5px;
        margin: 0%;
        box-sizing: border-box;
        overflow: hidden;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        background: var(--widget_border);
        border-radius: 50%;
    }

    .widgetIconContainer  img {
        height: 30px;
        width: auto;
    }

    .widgetTextContainer {
        padding: 15px;
        margin: 0;
        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        flex-grow: 1;
        gap: 2px;
    }

    .widgetTextContainer > p {
        padding: 0%;
        margin: 0%;

        font-family: roboto;
    }

    .widgetTitle {
        font-size: 14px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .widgetSubtitle {
        font-size: 10px;
        font-weight: 300;
        text-transform: lowercase;
    }

}