html {
    scroll-behavior: smooth;
}

body {
    word-break: keep-all;
}

.field {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.35);
    padding: 1rem;
    color: #fff;
    outline: none;
}

.field:focus {
    border-color: rgba(215, 25, 32, 0.85);
}

.field::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.project-thumb {
    background-size: cover;
    background-position: center;
}

.project-thumb-1 {
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.15), rgba(215, 25, 32, 0.25)), url('/assets/images/homepage-concept.png');
}

.project-thumb-2 {
    background-image: linear-gradient(135deg, rgba(15, 23, 42, 0.2), rgba(0, 0, 0, 0.5)), url('/assets/images/homepage-concept.png');
    background-position: 70% 34%;
}

.project-thumb-3 {
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(20, 184, 166, 0.16)), url('/assets/images/homepage-concept.png');
    background-position: 42% 50%;
}

.project-thumb-4 {
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.35), rgba(215, 25, 32, 0.2)), url('/assets/images/homepage-concept.png');
    background-position: 88% 48%;
}

.project-thumb-5 {
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.08)), url('/assets/images/homepage-concept.png');
    background-position: 20% 44%;
}

.project-thumb-6 {
    background-image: linear-gradient(135deg, rgba(20, 184, 166, 0.14), rgba(0, 0, 0, 0.45)), url('/assets/images/homepage-concept.png');
    background-position: 60% 72%;
}