﻿* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    &:link, &:visited, &:hover, &:active {
        text-decoration: none;
        color: inherit;
    }
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.italic {
    font-style: italic;
}

button {
    border: none;
    background: none;
}

h1, h2, h3, h4, h5, h6 {
    padding-top: 1em;
    padding-bottom: 1em;
}

.centered {
    text-align: center;
}

footer {
    border-top: 0.2rem solid var(--color-blue-500);
    background-image: linear-gradient(135deg, var(--color-muted-blue-850) 30%, var(--color-muted-blue-950) 30% 70%, var(--color-muted-blue-850) 70%) !important;
}

header {
    
    .background {
        background-image: linear-gradient(to right, var(--color-muted-blue-850) 75%, transparent 75%) !important;    
    }
    
    .content h1 {
        color: var(--color-white) !important;
        background-image: none !important;
    }
}

.andenes-contact-card {
    background-color: var(--color-muted-blue-600) !important;
    background-image: radial-gradient(circle at 100% 0%, var(--color-muted-blue-500), transparent, var(--color-muted-blue-800)),
    radial-gradient(circle at 0% 100%, var(--color-muted-blue-500), transparent, var(--color-muted-blue-800)) !important;
}

:root {

    font-family: 
            Inter,
            "Open Sans", 
            Arial, 
            sans-serif;
    color-scheme: light;
    
    --color-white: #ffffff;
    --color-black: #000000;

    --color-orange-50: #fff3e8;
    --color-orange-100: #ffe0c7;
    --color-orange-150: #ffe0c7;
    --color-orange-200: #ffc9a1;
    --color-orange-300: #f1a166;
    --color-orange-400: #ff9c54;
    --color-orange-500: #f5802c;
    --color-orange-600: #e56503;
    --color-orange-700: #b94f00;
    --color-orange-800: #7c3500;
    --color-orange-900: #401a00;
    --color-orange-950: #210c00;

    --color-theme-50: var(--color-orange-50);
    --color-theme-100: var(--color-orange-100);
    --color-theme-150: var(--color-orange-150);
    --color-theme-200: var(--color-orange-200);
    --color-theme-300: var(--color-orange-300);
    --color-theme-400: var(--color-orange-400);
    --color-theme-500: var(--color-orange-500);
    --color-theme-600: var(--color-orange-600);
    --color-theme-700: var(--color-orange-700);
    --color-theme-800: var(--color-orange-800);
    --color-theme-900: var(--color-orange-900);
    --color-theme-950: var(--color-orange-950);
}

