:root {
    --text-color-primary: #47494F;
    --text-color-secondary: #FFFFFF;

    --background-color-primary: var(--text-color-secondary);
    --background-color-secondary: #F4F4F4;
    --background-color-tertiary: var(--text-color-primary);

    --mobile-side-padding: 0.5rem;
}

@font-face {
    font-family: 'Lato';
    src: url('/media/fonts/Lato/Lato-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('/media/fonts/Raleway/Raleway-VariableFont_wght.ttf') format('truetype');
    font-display: swap;
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Raleway', sans-serif;
    line-height: 1.75;
    background-color: var(--background-color-primary);
}

.raleway {
    font-family: "Raleway";
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.lato {
    font-family: "Lato";
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6, div, span, p, a {
    color: var(--text-color-primary);
}

a {
    text-decoration: none;
}

ol, ul {
    padding-left: 1rem;
}

article#hero {
    background-color: var(--background-color-secondary);
}

.hero-image {
    max-width: 50mm;
}

span.skill {
    color: var(--text-color-secondary);
    background-color: var(--background-color-tertiary);
    border: none;
    border-radius: 5px;
    padding: 2px 5px 5px 5px;
    white-space: nowrap;
}

.btn-group-fab {
    position: fixed;
    width: 50px; 
    height: auto;
    right: 20px;
    bottom: 20px;
  }

button.btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}    

.page {
    margin: 0mm auto;
}

@media (max-width: 767.98px) {
    section {
        padding-left: var(--mobile-side-padding);
        padding-right: var(--mobile-side-padding);
    }
    section#head {
        padding-left: 0;
        padding-right: 0;
    }
}

/* A4 page styling */
@media (min-width: 768px) {
    h1, h2, h3 {
        letter-spacing: 0.3rem;
    }
    .page {
        width: 210mm;
    }
    button.btn {
        margin-top: 10px;
    }
}

/* Print specific styles */
@media print {
    .page {
        size: A4;
        page-break-after: always;
        margin: 0;
        padding: 10mm 0 0 0;
    }
    div.page#page-1 {
        padding-top: 0mm;
    }
}