body {
    font-family: 'Roboto', sans-serif;
    width: 100%;
    font-weight: 300;

}

body, html {
    height: 100%;
}

.hero {
/ / display: flex;
}

.intro {
    margin: 15px 0;

}
.button-spacer {
    margin: 15px 0 50px 0;

}
.button-container-planet {
    position: relative;
    display: inline-block;
    width: 100%;

}

.button-container-planet button {
    background: #1f6a6b;
    width: 100%;
}

.button-container-planet a:hover button {
    background: #89cc9e;
    color: #1f6a6b;
    border-color: #89cc9e;
}

.button-container-planet a {
    text-decoration: none;

}

.button-container-planet a:hover img {
    top: 50%;
    right: 0%;
    transform: translate(-0%, -50%) scale(1.35); /* This will enlarge the image by 10% on hover */
    transition: transform 0.3s cubic-bezier(.68, -0.55, .27, 1.55); /* This will smooth the transition */
}

.button-container-planet a img {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(-0%, -50%) scale(1.0);
    width: 120px;
    height: 120px;
    transition: transform 0.3s cubic-bezier(.68, -0.55, .27, 1.55); /* This will smooth the transition */
}

.btn-planet {
    display: block;
    padding: 15px 140px 15px 30px;
}

@media (max-width: 1200px) {
    .btn-planet {
        display: block;
        padding: 10px 160px 10px 20px;
    }

}

/* Example media query for larger SVG on smaller screens */

@media (max-width: 600px) {
    .button-container-planet a img {
        width: 120px;
        height: 120px;
        right: 0px;
    }

    .btn-planet {
        display: block;
        padding: 10px 160px 10px 20px;
    }
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #004065;
    --bs-btn-border-color: #004065;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #7495c1;
    --bs-btn-hover-border-color: #053754;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #004065;
    --bs-btn-active-border-color: #004065;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #053754;
    --bs-btn-disabled-border-color: #053754;
}

.btn-primary:hover {
    color: #FFF;
    background-color: #7495c1;
    border-color: #7495c1;
}
.btn-primary-alt {
    --bs-btn-color: #fff;
    --bs-btn-bg: #7495c1;
    --bs-btn-border-color: #7495c1;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #7495c1;
    --bs-btn-hover-border-color: #053754;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #004065;
    --bs-btn-active-border-color: #004065;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #053754;
    --bs-btn-disabled-border-color: #053754;
}

.btn-primary-alt:hover {
    color: #FFF;
    background-color: #004065;
    border-color: #004065;
}

.hero-image {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    /*background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/hero_mafer.jpg");*/
    background-image: url("../img/hero_mafer.jpg");
    /* Set a specific height */
    height: 50%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.image-holder {
    height: 50%;
    width: 100%;
    display: flex;
}

.download-list {
    margin-bottom: 50px;
}

.download-list ul {
    list-style: none;
    padding: 0;
}

.download-list ul li {
    margin: 12px 0;
}

.download-list ul li a {
    width: 100%
}

.languageChooser ul {
    list-style: none;
    text-align: right;
    padding: 0;
    margin: 25px 0;
}

.languageChooser ul li {
    display: inline
}

@media only screen and (max-width: 600px) {
    .hero-image {
        /* Set a specific height */
        height: 25%;
    }
}