/*-----------------------------------------------------------*/
/*	@Import Google Fonts
/*-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;800;900&display=swap');
/*-----------------------------------------------------------*/
/*	Global Variables
/*-----------------------------------------------------------*/
:root {
    --main-background: #fff;
    --main-transition: all 0.2s ease-in-out;

    /* Dialog box styles */
    --dialog-background: #ffffff50;
    --dialog-font: 'Playfair Display', serif;
    --dialog-font-size: 3rem;
    --dialog-text: #000;
    --dialog-line-height: initial;
    --dialog-padding: 1rem;
    --dialog-border: 1px solid transparent;
    --dialog-border-radius: 15px;

    /* Dialog button styles */
    --button-background-1: #000;
    --button-background-2: #555;
    --button-background-1-hover: #555;
    --button-background-2-hover: #000;
    --button-font: 'Playfair Display', serif;
    --button-text: #fff;
    --button-text-hover: #fff;
    --button-border: 0px solid transparent;
    --button-border-radius: 15px;
}
/*-----------------------------------------------------------*/
/*  Global
/*-----------------------------------------------------------*/
body {
    height: 100vh;
    background-color: var(--main-background);
    background-image: url('../img/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top right;
}
/*-----------------------------------------------------------*/
/*  Landingpage
/*-----------------------------------------------------------*/
.flexbox {
    display: flex !important;
}
.hidden {
    display: none !important;
}
.dialog-box {
    font-family: var(--dialog-font);
    background-color: var(--dialog-background);
    padding: var(--dialog-padding);
    border: var(--dialog-border);
    border-radius: var(--dialog-border-radius);
}
.dialog-text {
    color: var(--dialog-text);
    font-size: var(--dialog-font-size);
    line-height: var(--dialog-line-height);
}
.dialog-button {
    color: var(--button-text);
    background-image: linear-gradient(20deg, var(--button-background-1) 60%, var(--button-background-2) 60%);
    border: var(--button-border);
    border-radius: var(--button-border-radius);
    margin-bottom: 2vh;
    padding: 0 4vh;
}
.dialog-button:hover,
.dialog-button:active {
    color: var(--button-text-hover);
    background-image: linear-gradient(20deg, var(--button-background-1-hover) 60%, var(--button-background-2-hover) 60%);
}
/*-----------------------------------------------------------*/
/*  Media Querys
/*-----------------------------------------------------------*/
@media (max-width: 1200px) {
    body {
        background-size: 150%;
    }
    .dialog-text {
        font-size: calc(var(--dialog-font-size) / 1.2) !important;
    }
}
@media (max-width: 992px) {
    .dialog-text {
        font-size: calc(var(--dialog-font-size) / 1.2) !important;
        margin-bottom: 0.8rem;
    }
}
@media (max-width: 768px) {
    body {
    height: 100vh;
    background-color: var(--main-background);
    background-image: url('../img/backgroundmob.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}
    .dialog-text  {
        font-size: calc(var(--dialog-font-size) / 1.4) !important;
    }
}
@media (max-width: 575px) {
    .dialog-text  {
        font-size: calc(var(--dialog-font-size) / 1.8) !important;
        margin-bottom: 0.5rem;
    }
}