:root {
    --primary-color: rgb(156, 196, 228, 1);
    --secondary-color: color-mix(in srgb, var(--primary-color) 40%, white 40%);
    --font-large: 2rem;
    --font-medium: 1.25rem;
    --font-small: 1rem;
    --theme-border: 2px solid black;
    --mobile-phone-width: 360px;
    --ipad-width: 768px;
}

.bg-primary {
    background-color: var(--primary-color);
}

.main-theme {
    font-weight: bold;
}

body {
    color: black;
    font-family: Arial, sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: black;
    cursor: pointer;
}

a:hover {
    color: var(--secondary-color)
}

header {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: var(--theme-border);

    & .company-title {
        display: flex;
        gap: 10px;
        font-size: var(--font-large);
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);

        & a {
            color: black
        }

        & img {
            margin: 0;
            padding: 0;
            width: 50px;
            height: 40px;
            border-radius: 1px;
            box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
        }

        & img:hover {
            animation: shaking 0.3s linear 2;
        }
    }

    & nav {
        display: flex;
        flex-wrap: wrap;
        align-self: center;
        column-gap: 15px;
        font-size: var(--font-medium);
    }

    & nav a:hover {
        animation: shaking 0.3s linear 2;
    }

}

@keyframes shaking {
    0%, 50%, 100% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(-5deg);
    }
    70% {
        transform: rotate(5deg);
    }
}

.customer-quote {
    font-style: italic;
}

footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: auto;
    border-top: var(--theme-border);
    padding: 15px;
}

main.content {
    text-align: center;
    margin-bottom: auto;

    & h1 {
        font-size: 32px;
        margin-bottom: 20px;
        text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.8);
    }
}

@media (max-width: 1024px) {
    header {
        text-align: center;
        flex-direction: column;
    }

    footer {
        gap: 20px;
    }

    .customer-quote {
        display: none;
    }
}

@media (max-width: 380px) {
    header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    footer {
        flex-direction: column;
        text-align: center;
    }

    .company-title {
        font-size: 1.5rem;
    }
}