/* https://webfonts.ffonts.net/BigNoodleTitling.font.download# */
@font-face {
    font-family: 'BigNoodleTitling';
    src: url('BigNoodleTitling.ttf.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    --viewport-width: 1024px; /* Fallback values */
    --viewport-height: 768px;
    --heading-font-family: 'BigNoodleTitling', 'Arial Narrow', Tahoma, Geneva, Verdana, sans-serif;
    --small-font-size: calc(var(--regular-font-size) * 0.75);
    --light-green-theme: rgb(40, 180, 99 );
    --dark-green-theme: rgb(24, 106, 59);
    --border-radius: 6px;
    --body-side-margin: 4px;
}

@media (min-width: 1024px) {
    :root {
        --regular-font-size: 30px;
        --large-shadow-size: 6px;
        --small-shadow-size: 3px;
        --body-side-margin: calc(var(--viewport-width) * 0.3);
    }
}

@media (min-width: 540px) and (max-width: 1023px) {
    :root {
        --regular-font-size: 16px;
        --tooltip-font-size: 14px;
        --large-shadow-size: 4px;
        --small-shadow-size: 2px;
        --privacy-center-adjustment: 25%;
    }
}

@media (min-width: 390px) and (max-width: 539px) {

    :root {
        --regular-font-size: 15px;
        --tooltip-font-size: 13px;
        --large-shadow-size: 3px;
        --small-shadow-size: 2px;
        --privacy-center-adjustment: 5%;
    }
}

@media (min-width: 300px) and (max-width: 389px) {

    :root {
        --regular-font-size: 15px;
        --tooltip-font-size: 13px;
        --large-shadow-size: 3px;
        --small-shadow-size: 2px;
        --privacy-center-adjustment: 5%;
    }
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, Arial, Helvetica, sans-serif;
    width: max(1024, var(--viewport-width));
    padding: var(--large-shadow-size);
    background-color: #f4f4f4;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.privacybutton {
    position: relative;
    top: 2px;
    float: right;
    font-family: var(--heading-font-family);
    font-size: var(--small-font-size);
    color: white;
    background-color: var(--dark-green-theme);
    border-radius: var(--border-radius);
}

.privacynotice {
    max-width: min(1024, var(--viewport-width));
    max-height: var(--viewport-height);
    margin: 4px var(--body-side-margin) 0 var(--body-side-margin);
    justify-content: center;
    align-items: center;
    position: fixed;
    overflow-y: auto; /* This enables vertical scrolling */
    overflow-x: hidden;
    padding-right: 5px;
}

.closeprivacynotice {
    cursor: pointer;
    font-size: var(--regular-font-size);
    line-height: 1;
    position: relative;
    float: left;
    margin: 1px 0 0 1px;
    z-index: 9999;
}

.indent {
    padding-left: var(--big-font-size);
}

h1, h2, h3, h4, .hometitletext, .copyrighttitle {
    font-family: var(--heading-font-family);
    color: var(--dark-green-theme);
}

h1, .hometitletext {
    font-size: var(--huge-font-size);
    font-weight: bold;
    /*text-shadow: var(--head-text-shadow);*/
    letter-spacing: calc(var(--regular-font-size) / 12);
    text-align: center;
}

h2, h3, .copyrighttitle {
    font-size: var(--regular-font-size);
    /* text-shadow: var(--subhead-text-shadow);*/
    letter-spacing: calc(var(--regular-font-size) / 12);
    margin: 14px 4px 4px 4px;
}

h2 {
    text-align: center;
    font-size: var(--regular-font-size);
}

h3, h4 {
    text-align: left;
}

h4 {
    font-size: calc(var(--regular-font-size) *0.9);
    margin: 0 4px 0 4px;
}

p {
    opacity: 1.0;
    margin: 4px 0 12px 4px;
    text-align: left;
    font-size: var(--small-font-size);    
}