body {
    background: linear-gradient(0deg, rgba(255,246,229,1) 0%, rgba(231,199,192,1) 100%);
}

.frontpage {
    height: 100vh;
    padding: 0 36px;
}

.btn-frontpage {
    font-size: 20px;
    width: 100%;
    min-height: 60px;
    border-radius: 40px;
    border: none;
    font-family: qualy, sans-serif;
    padding: 10px;
}

.btn-frontpage:focus {
    min-height: 70px;
}

.btn-frontpage--filled {
    background: #35376C;
    color: #FFFFFF;
}

.btn-frontpage--border {
    background: none;
    color: #35376C;
    border: #35376C 4px solid;
}

.btn-frontpage:nth-child(1) {
    margin: 0 0 20px 0;
}

.frontpage-heading-container {
    display: flex;
    justify-content: center;
    margin: 22px 0 0 0;
}

.frontpage-heading-container h1 {
    font-size: 55px;
    line-height: 1.3;
}

.frontpage-heading-container h1 span {
    background: #35376C;
    color: #E7C7C0;
    padding: 1px 10px;
    margin-top: 50px;
}

.frontpage-paragraph-container {
    margin: 20px 0 0 0;
}

.frontpage-text-container {
    height: 48vh;
}

.frontpage-button-container {
    height: 35vh;
}

.compass-container {
    display: flex;
    justify-content: center;
    margin: 20px 0 22px 0;
}

    .compass-container img {
        height: 70px;
        width: 70px;
    }


.test-b {
    background-image: url('../images/newImages/Ellipse 15.svg');
    background-repeat: no-repeat;
    background-position-x: -596px;
    position: absolute;
    width: 100%;
    height: 41%;
    right: 0;
    bottom: 60px;
    z-index: -1;
}

.frontpage-button-container-desktop {
    display: none;
}

@media only screen and (min-width: 500px) {
    .test-b {
        background-position-x: -480px;
        height: 50%;
        bottom: 85px;
    }

    .btn-frontpage {
        width: 318px;
        min-height: 60px;
    }

    .question-btn-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}


@media only screen and (min-width: 690px) {
    .test-b {
        background-position-x: -365px;
        height: 50%;
        bottom: 85px;
    }
}

@media only screen and (min-width: 844px) {
    .test-b {
        background-position-x: -250px;
        height: 50%;
        bottom: 85px;
    }
}

@media only screen and (min-width: 1080px) {

    .frontpage-button-container-mobile {
        display: none;
    }

    .frontpage {
        background-image: url('../images/newImages/bashi-bakgrund.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        height: 87vh;
        background-position-x: -280px;
    }

    .btn-frontpage:hover {
        -moz-transform: scale(1.05);
        -webkit-transform: scale(1.05);
        -o-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
        -webkit-transition: transform 0.3s ease-in-out;
        -moz-transition: transform 0.3s ease-in-out;
        -ms-transition: transform 0.3s ease-in-out;
    }

/*    .btn-frontpage:hover:after {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: '\f061';
        margin: 0 0 0 3px;
    }*/

    .btn-frontpage:focus {
        min-height: 80px;
    }

    .frontpage-text-container,
    .frontpage-button-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 80vh;
    }

    
    .frontpage-button-container {
        width: 50%;
    }

    .frontpage-text-container {
        width: 60%;
        position: relative;
        left: 0;
    }

    .frontpage-button-container {
        width: 40%;
    }

    .frontpage-heading-container {
        justify-content: flex-start;
    }

    .frontpage-heading-container h1 {
        font-size: 70px;
    }

    .frontpage-paragraph-container {
        width: 70%;
    }

    .frontpage-paragraph-container p {
        font-size: 18px;
    }

    .compass-container {
        margin: 20px 0 41px 0;
    }

    .compass-container img {
        height: 128px;
        width: 128px;
    }

    .test-b {
        display: none;
    }

    .btn-frontpage {
        width: 364px;
        min-height: 80px;
    }
}

@media only screen and (min-width: 1220px) {

    .frontpage {
        background-position-x: -233px;
    }
}

@media only screen and (min-width: 1333px) {

    .frontpage {
        background-position-x: -141px;
    }

    .frontpage-heading-container h1 {
        font-size: 88px;
    }
}

/*@media only screen and (min-width: 1200px) {

    .frontpage-button-container {
        width: 50%;
    }

    .frontpage-text-container {
        width: 50%;
    }

    .test-b {
        width: 900px;
    }
}*/

@media only screen and (min-width: 1590px) {

    .frontpage {
        background-position-x: 0;
    }

    .frontpage-text-container {
        width: 50%;
        position: relative;
        left: 74px;
    }

    .frontpage-heading-container h1 {
        font-size: 88px;
    }
}


/*@media only screen and (min-width: 1800px) {

    .test-b {
        width: 1200px;
        background-position-x: 0px;
    }

    .frontpage-button-container {
        width: 50%;
    }

    .frontpage-text-container {
        width: 50%;
    }
}*/


/*background-position-x: -141px;*/

/*@media only screen and (min-width: 2200px) {
    .test-b {
        width: 50%;
        height: 100%;
        right: -200px;
        top: 0;
    }
}*/

/*.curve {
    width: 200px;
    height: 100px;
    border-radius: 50%;
    background-color: #E7C7C0;
    position: relative;
    top: -20px;
}*/

/*.test-b:after {
    content: "";
    width: 260px;
    height: 50px;
    background: red;
    border-radius: 100% 100% 0 0;
    position: absolute;
    bottom: 0;
    left: -15px;
}*/

/*.curve {
    position: absolute;
    height: 225px;
    width: 100%;
    top: 0;
}

.curve::after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 100% 50%;
    width: 55%;
    height: 100%;
    background: red;
    transform: translate(-4%, -5%);
    z-index: -1;
}
    .curve::before {
        content: "";
        display: block;
        position: absolute;
        border-radius: 100% 50%;
        width: 55%;
        height: 100%;
        background: red;
        transform: translate(-4%, -5%);
        z-index: -1;
    }
    .curve::after {
        content: "";
        display: block;
        position: absolute;
        border-radius: 100% 50%;
        width: 55%;
        height: 100%;
        background: red;
        transform: translate(-4%, -5%);
        z-index: -1;
    }*/