@font-face {
    font-family: 'UrbanistRegular';
    src: url(fonts/Urbanist-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'UrbanistBold';
    src: url(fonts/Urbanist-Bold.ttf) format('truetype');
}
@font-face {
    font-family: 'UrbanistMedium';
    src: url(fonts/Urbanist-Medium.ttf) format('truetype');
}
@font-face {
    font-family: 'UrbanistsemiBold';
    src: url(fonts/Urbanist-SemiBold.ttf) format('truetype');
}
@font-face {
    font-family: 'UrbanistsemiBoldItalic';
    src: url(fonts/Urbanist-SemiBoldItalic.ttf) format('truetype');
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}
html{
    scroll-behavior: smooth;
}
main {
    min-height: calc(100vh - 600px);
  }

body{
    background-color: #FFF2E2;
}

h1{
    font-family: 'UrbanistSemiBold';
    font-size: 3.5rem;
}
#overskrift, #overskrift2{
    color:#50320C;
    padding-top: 10rem;
    text-align: center;
    padding-left: 7rem;
    padding-right: 7rem;
}
#overskrift h2{
    font-family: 'UrbanistMedium';
    font-size: 2.5rem;
    color: #50320C;
}

.tiltoppen{
    position: fixed;
    bottom: 2%;
    right: 2%;
    z-index: 8;
    background-color: #457E33;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.tiltoppen a{
    color: #FFF2E2;
    text-decoration: none;
    font-weight: bold;
    padding: 2%;
    width: 100%;
    text-align: center;
}


#hero-section{
    width: 100%;
    height: 100vh;
    
}

#hero-section img{
    width: 100%;
    height: 100vh;
    object-fit: cover;
    z-index: 9;
    position: relative;
}

#hero-logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 9;
}
#hero-section #nedpil{
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}
#hero-section #nedpil img{
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    animation: bounce 2s infinite;
}
#hero-section #nedpil img:hover{
    transform: scale(1.05);
    transition: all 0.3s ease-in-out;
}

/* fremhævede vine*/

#highlighted-vine{
    text-align: center;
    margin-top: 7rem;
    width: 100%;
  }
  
#highlighted-vine h2 {
    font-size: 4rem;
    font-family: 'UrbanistMedium';
    color: #50320C;
    margin-bottom: 2rem;
}
  
#vin-kort-container{
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.vin-kort{
    border-style: solid;
    border-width: 30px;
    border-color: #457E33;
    position: relative;
}
.vin-kort img, .vin-kort2 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vin-kort2{
    border-style: solid;
    border-width: 30px;
    border-color: #6AAA57;
    position: relative;
}
.vin-info{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-left: 5rem;
    padding-right: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    position: absolute;

    top: 0;
    left: 0;

    opacity: 0;
    transition: opacity 0.2s ease;
}
.vin-info h3{
    font-family: 'UrbanistMedium';
    color: #FFF2E2;
    font-size: 2rem;
    text-align: left;
    padding-bottom: 2rem;
}
.vin-info p, .vin-info a{
    font-family: 'UrbanistRegular';
    color: #FFF2E2;
    font-size: 1.3rem;
    text-align: left;
    width: 50%;
    padding-bottom: 1rem;
}
.vin-info a{
    text-decoration: underline;
    padding-top: 1.5rem;
    cursor: pointer;
}

.vin-info img{
    width: 20rem;
    height: auto;
    margin-top: 4rem;
}

.vin-kort:hover .vin-info,
.vin-kort2:hover .vin-info {
    opacity: 1;
    background-color: rgb(80, 50, 12, 0.8);
    transition: opacity 0.7s ease;
}
#vin-info-afsnit, #vin-info-afsnit2{
    display: none;
    flex-direction: row;
    justify-content: space-around;
    padding: 1rem;
}
#vin-info-afsnit{
    background-color: #457E33;
}
#vin-info-afsnit2{
    background-color: #6AAA57;
}
#vin-info-afsnit h3, #vin-info-afsnit2 h3{
    font-family: 'UrbanistRegular';
    font-weight: 200;
    color: #FFF2E2;
    font-size: 2rem;
}
/*------------------------------------------------------*/
.knap4{
    border:#FFF2E2 solid 2px;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    border-radius: 50px;
    text-align: center;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
}
.knap4 a{
    text-decoration: none;
    color: #FFF2E2;
    font-family: 'UrbanistRegular';
    font-size: 1rem;
}
#forside-test{
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 6rem;

    background-color: #457E33;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
#forside-test h3{
    color: #FFF2E2;
    font-family: 'UrbanistRegular';
    font-weight: 300;
    text-align: center;
    font-size: 1.5em;
}
#forside-test .knap1{
    width: 35%;
    margin-top: 2rem;
}

/*border afsnit*/

#forside-vingaard-baggrund, #forside-gaardbutik-baggrund{
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin-top: 6rem;

    background-color: #50320C;
    border-radius: 20rem 0rem 20rem 0rem;
}

#forside-gaardbutik-baggrund{
    margin-bottom: 6rem;
}

#forside-cafe-baggrund{
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin-top: 6rem;
    margin-bottom: 6rem;

    background-color: #50320C;
    border-radius: 0rem 20rem 0rem 20rem;

}

.forside-border{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    gap: 6rem;
}

.info-tekst{
    color: #FFF2E2;
    font-family: 'UrbanistRegular';
    text-align: left;
    font-size: 1.5em;
    line-height: 2rem;
    width: 40%;

    display: flex;
    flex-direction: column;
    align-items: center;
}
.info-tekst h2{
    text-align: left;
    align-self: start;
}

.forside-border-img {
    width: 40%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    padding: 0;
    position: relative;
}

.forside-border-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease-in-out;
}

.forside-border-img:hover img {
    transform: scale(1.1);
}

.info-tekst div{
    display: flex;
    justify-content: center;
    align-items: center;
}

.knap1{
    background-color: #D194FF;
    color: #000000;
    font-size: 1rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: 50px;
    text-align: center;
    margin-top: 4rem;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    
    display: flex;
    justify-content: center;
    transform: scale(1);
}
.knap1:hover{
    background-color: #AB3DFF;
    transform: scale(1.05);
    transition: all 0.3s ease-in-out;
}
.knap1 a{
    text-decoration: none;
    color: #000000;
    font-family: 'UrbanistRegular';
    font-size: 1.3rem;
}

/*vinsmagning*/

#forside-vinsmagning{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 6rem;

    background-color: #457E33;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
#forside-vinsmagning h2{
    color: #FFF2E2;
    font-family: 'UrbanistMedium';
    text-align: center;
    font-size: 2em;
}

#forside-vinsmagning p{
    color: #FFF2E2;
    font-family: 'UrbanistRegular';
    text-align: center;
    font-size: 1.5em;
    line-height: 2rem;
}

/*------------------Responsive------------------*/

@media screen and (max-width: 1365px) {
    #overskrift, #overskrift2{
        padding-left: 5rem;
        padding-right: 5rem;
    }
    #overskrift h2{
        font-size: 2.5rem;
    }
    
    .vin-info img{
        margin-top: 3rem;
    }
    .vin-info p{
        padding: 0;
    }
    .vin-info h3{
        padding: 0;
    }
    .info-tekst{
        padding-top: 5rem;
    }
    .info-tekst .knap1{
        width: 50%;
        margin-top: 2rem;
    }
}

@media screen and (max-width: 1180px) {
    #overskrift, #overskrift2{
        padding-left: 3rem;
        padding-right: 3rem;
    }
    #overskrift h2{
        font-size: 2.5rem;
    }
    .vin-info img{
        width: 15rem;
        height: auto;
    }
    .vin-info p{
        padding: 0;
        font-size: 1.1rem;
    }
    .vin-info h3{
        padding: 0;
        font-size: 1.5rem;
    }
    .info-tekst{
        padding-top: 5rem;
    }
    .info-tekst .knap1{
        width: 70%;
        margin-top: 2rem;
    }
    
}

/*------------------Mobil------------------*/

@media screen and (max-width: 800px) {
    #hero-logo img{
        width: 75vw;
        height: auto;
        object-fit: cover;
    }
    #hero-section #nedpil img{
        width: 4rem;
        height: 4rem;
        object-fit: cover;
    }
    #hero-section{
        width: 100%;
        height: 100dvh;
        object-fit: cover;
    }
    #highlighted-vine{
        margin-top: 3rem;
    }
    #highlighted-vine h2{
        font-size: 2rem;
    }
    #vin-kort-container{
        flex-direction: column;
    }
    .vin-info{
        display: none;
    }
    #vin-info-afsnit, #vin-info-afsnit2{
        display: flex;
        align-items: center;
    }
    #vin-info-afsnit h3, #vin-info-afsnit2 h3{
        font-size: 1.2rem;

    }
    #forside-test{
        display: flex;
    }
    #overskrift, #overskrift2{
        padding-left: 2rem;
        padding-right: 2rem;
    }
    #overskrift h2{
        font-size: 2rem;
    }
    #forside-vingaard-baggrund, #forside-cafe-baggrund, #forside-gaardbutik-baggrund{
        flex-direction: column;
        border-radius: 12rem 0rem 12rem 0rem;
    }
    .forside-border{
        flex-direction: column;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .forside-border div{
        width: 100%;
        padding: 1rem;
    }
    .forside-border div img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        padding-top: 0rem;
        padding-bottom: 0rem;
    }
    .forside-border-img:hover img {
        transform: none;
    }
    .info-tekst{
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: center;
        
    }
    #forside-vinsmagning{
        padding-left: 2rem;
        padding-right: 2rem;
    }
    #forside-vinsmagning{
        word-break: break-word;
        font-size: 1rem;
    }
    #forside-vingaard-baggrund .info-tekst{
        padding-top: 2rem;
        margin: 0;
    }
    #forside-cafe-baggrund .info-tekst{
        padding-bottom: 2rem;
        padding-top: 0rem;
    }
    .info-tekst h2{
        text-align: center;
        align-self: center;
        
    }
    .info-tekst p{
        word-break: break-word;
        font-size: 1.3rem;
    }
    #forside-vingaard-baggrund .knap1, #forside-cafe-baggrund .knap1{
        width: 60%;
        margin-top: 2rem;
    }
    .knap1{
        width: 60%;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .knap1:hover{
        transform: none;
        transition: none;
        background-color: #D194FF;
    }
}