@font-face {
    font-family: "Inter";
    font-weight: normal;
    src: url("../webfonts/inter-v20-latin-regular.woff2");
}

@font-face {
    font-family: "Inter";
    font-weight: bold;
    src: url("../webfonts/inter-v20-latin-700.woff2");
}

@font-face {
    font-family: "DM Sans";
    font-weight: normal;
    src: url("../webfonts/dm-sans-v17-latin-regular.woff2");
}

@font-face {
    font-family: "DM Sans";
    font-weight: bold;
    src: url("../webfonts/dm-sans-v17-latin-600.woff2");
}

:root {
    --bs-body-font-size: 1.15rem;
    --bs-body-color: #333333;
    --bs-link-color: #dddddd;
    --bs-link-hover-color: #ffffff;
    --bs-primary: #387d7a;
    --bs-primary-rgb: 56,125,122;
    --bs-blue: #387d7a;
    --bs-success: #26a96c;
    --bs-success-rgb: 38, 169, 108;
    --bs-light: #dddddd;
    --bs-light-rgb: 221,221,221;
    --bs-focus-ring-color: rgba(56, 125, 122, 0.35);
}

a {
    text-decoration: none;
}

a:hover:not(.nav-link) {
    text-decoration: underline;
}

html {
    scroll-padding-top: 80px;
}

body {
    font-family: "Inter", Helvetica, "sans-serif";
    background: #ddd;
    position: relative;
    height:100%;
}

h1 {
    font-family: "DM Sans", Helvetica, "sans-serif";
    font-weight: bold;
    color:#ddd
}

h2 {
    font-family: "DM Sans", Helvetica, "sans-serif";
    font-weight: bold;
}

h3 {
    font-family: "DM Sans", Helvetica, "sans-serif";
    font-weight: bold;
    font-size: calc(2.5rem);
    scroll-margin-top: 80px;
}

h4 {
    font-family: "DM Sans", Helvetica, "sans-serif";
    font-weight: bold;
    font-size: calc(1.5rem);
}

footer {
    background: #555;
}

.header {
    background: url("../img/header/header2.webp");
    background-size: cover;
    background-position: center;
    min-height: 10vh;
    padding-top: 35vh;
    padding-right: 2rem;
    padding-left: 2rem;
    padding-bottom: 25vh;
    text-align: center;
    text-shadow: #000 3px 0 15px;
}



.page {
    min-height: 25rem;
}

.background-primary {
    background: linear-gradient(125deg, var(--bs-primary) 0%, var(--bs-success) 100%);
}

.navbar-nav .nav-link {
    color:var(--bs-body-color);
    transition: all 0.3s ease-in-out;
    /*border-radius: 1rem;*/
}

@media (min-width: 992px) {
    h4 {
        font-size: calc(2.0rem);
    }

    .header {
        padding: 35vh 10rem;
        min-height: 60vh;
    }

    .navbar-nav .nav-link:hover {
        color: var(--bs-light);
    }

    .navbar-nav .nav-link {
        text-decoration: none;
        position: relative;
        transition: all 0.5s;
        z-index: 2;
    }

    .navbar-nav .nav-link::before,
    .navbar-nav .nav-link::after {
        content: "";
        position: absolute;
        height: 50%;
        width: 0;
        background-color: var(--bs-primary);
        transition: all 0.5s;
        z-index: -1;
    }

    .navbar-nav .nav-link::before {
        right: 0;
        top: 0;
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
    }

    .navbar-nav .nav-link::after {
        left: 0;
        bottom: 0;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
    }

    .navbar-nav .nav-link:hover::before,
    .navbar-nav .nav-link:hover::after {
        width: 100%;
    }
}

.nav.nav-pills .nav-link {
    color:var(--bs-light);
    background:#666;
}

.nav.nav-pills .nav-link:hover {
    background:var(--bs-primary)
}

.card-ahn {
    padding: 1rem;
    transition: all 0.3s;
}

.card-ahn:hover {
    transform: scale(1.1);
}

.form-floating .form-control:focus {
    border-color: #198754;
    box-shadow: 0 0 0 0.25rem rgba(56, 125, 122, 0.25);
}