/* CSS for Transform */

:root {
    --bs-primary: #1e5c69;
    --bs-primary-rgb: 30,92,105;
    --bs-font-sans-serif: "Nunito Sans", sans-serif;
}

h1, h2, h3, h4 {
    font-family: "Marmelad";
}

.merm {
    font-family: "Marmelad", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.navbar-nav li a {
    color: white;
    font-family: "Marmelad", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-primary:hover {
    background-color: white;
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-outline-primary {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.btn-outline-primary:hover {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
    color: white;
}

#koppelopgaven {
    background-image: url(/static/images/koppelopgaven.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#overtransform {
    background-image: url(/static/images/over-transform.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.blog-card:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

a {
    color: var(--bs-primary);
}

/* Google frame */

.iframe-container {
    width: 900px; /* Set the width of the visible area */
    height: 200px; /* Set the height of the visible area */
    overflow: hidden; /* Hide content that goes outside the container */
    position: relative; /* Required for absolute positioning of the iframe */
}

.iframe-container iframe {
    position: absolute;
    top: -50px; /* Adjust these values to control which part of the iframe is visible */
    left: -50px;
    width: 1000px; /* Set the iframe width larger than the container */
    height: 300px; /* Set the iframe height larger than the container */
}

.unlock-regular {
    font-family: "Unlock", serif;
    font-weight: 400;
    font-style: normal;
  }