@tailwind base;
@tailwind components;
@tailwind utilities;

html {
    position: relative;
    min-height: 100%;
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

body {
    font-family: Raleway, Helvetica Neue, Arial, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    letter-spacing: .03em;
    color: #0a0a0a;
    background: #fefefe;
    scroll-behavior: smooth;
}

input {
    border-radius: 5px;
    padding-left: 4px;
    padding-right: 4px;
}

h2 {
    font-size: 32px;
}

h4 {
    font-size: 24px;
}

.maxWidth50 {
    max-width: 50%;
}

.knowBestBtn {
    @apply btn cursor-pointer absolute w-[110px] h-[110px] rounded-s-full rounded-e-full bg-blue-button text-center -top-[50px] left-1/2 translate-x-[-50%];
}

.knowBestBox {
    @apply flex flex-col md:flex-row md:justify-evenly items-center md:items-start;
}

.max768Width {
    @apply bg-[url('../images/globalmap.jpg')] bg-cover bg-center bg-no-repeat w-full h-full pt-[50%] relative cursor-pointer md:cursor-auto block md:hidden;
}

.upper768Width {
    @apply bg-[url('../images/globalmap.jpg')] bg-cover bg-center bg-no-repeat w-full h-full pt-[50%] relative hidden md:block;
}