@font-face {
	font-family: 'Nunitu';
	font-style: normal;
	src: url("../fonts/NunitoSans.ttf") format("truetype");
    display: swap;
}
@font-face {
	font-family: 'Nunitu';
	font-style: italic;
	src: url("../fonts/NunitoSansItalic.ttf") format("truetype");
    display: swap;
}

:root {
    --container: 1400px;
    --gap: 2rem;
    @media (max-width:1000px) {
        --gap: 1rem;
    }
    --fontsize: 18px;
    --lineheight: 1.5;
    --grid: 
        [full-width-start] 
            minmax(var(--gap), 1fr) 	
                [picture-start]
                    calc(var(--gap) * 2)
                        [content-start]	
                            min((50% - calc(var(--gap) * 3)), calc(var(--container) / 2)) 
                                [center-start] 
                                    0px 
                                [center-end] 
                            min((50% - calc(var(--gap) * 3)), calc(var(--container) / 2)) 
                        [content-end] 
                    calc(var(--gap) * 2)
                [picture-end]
            minmax(var(--gap), 1fr) 
        [full-width-end];
    --columns-fit-6: repeat(auto-fit, minmax(min(calc(calc(var(--container) / 6) - calc(var(--gap) * 1)), 100%), 1fr));
	--columns-fit-5: repeat(auto-fit, minmax(min(calc(calc(var(--container) / 5) - calc(var(--gap) * 1)), 100%), 1fr));
	--columns-fit-4: repeat(auto-fit, minmax(min(calc(calc(var(--container) / 4) - calc(var(--gap) * 1)), 100%), 1fr));
	--columns-fit-3: repeat(auto-fit, minmax(min(calc(calc(var(--container) / 3) - calc(var(--gap) * 1)), 100%), 1fr));
	--columns-fit-2: repeat(auto-fit, minmax(min(calc(calc(var(--container) / 2) - calc(var(--gap) * 1)), 100%), 1fr));
}
html,
body {

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*font-family: "Nunitu", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;*/
    font-family: "Nunitu", sans-serif;
    font-size: var(--fontsize);
    font-weight: 200;
    font-style: normal;
    color: var(--black);
    line-height: var(--lineheight);
    interpolate-size: allow-keywords;
    scroll-behavior: smooth;

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        max-width: 100%;
        z-index: 1;
    }

    > header,
    > main,
    > footer {
        display: grid;
        grid-template-columns: var(--grid);
        *:not(section):not(div) {
            margin-block: calc(var(--gap) / 2);
            text-wrap: pretty;
            hyphens: auto;
            -moz-hyphens: auto;
            -webkit-hyphens: auto;
        }
        > * {
            grid-column: content;
            @media (max-width:1000px) {
                grid-column: picture;
            }
            &.bg {
                grid-column: full-width;
                display: grid;
                grid-template-columns: var(--grid);
                background: color-mix(in srgb, lightgrey, white 75%);
                margin-block: var(--gap);
                padding-block: var(--gap);
                > * {
                    grid-column: content;
                    @media (max-width:1000px) {
                        grid-column: picture;
                    }
                }
                &.blue {
                    background: color-mix(in srgb, lightblue, white 75%);
                }
                &.green {
                    background: color-mix(in srgb, lightgreen, white 75%);
                }
            }
        }
        h1, h2, h3, h4, h5, h6 {
            margin-block: 1rem;
            text-wrap: balance;
            width: min-fit-content;
            hyphens: none;
            -moz-hyphens: none;
            -webkit-hyphens: none;
            * {
                font-size: 1rem;
                font-weight: inherit;
                text-wrap: balance;
            }
            small {
                font-size: .75rem;
                font-weight: 100;
            }
        }
        h1 {
            font-size: 3rem;
            font-weight: 300;
        }
        h2 {
            font-size: 2.5rem;
            font-weight: 100;
        }
        h3 {
            font-size: 2rem;
            font-weight: 300;
        }
        h4 {
            font-size: 1.5rem;
            font-weight: 300;
        }
        h5 {
            font-size: 1.25rem;
            font-weight: 300;
        }
        h6 {
            font-size: 1.1rem;
            font-weight: 200;
        }
        figure {
            grid-column: picture !important;
            img {
                width: 100%;
            }
        }
        strong {
            font-weight: 500;
        }
        hr {
            border: 1px solid lightgrey;
            margin-block: var(--gap) !important;
        }
        a {
            color: inherit;
        }
        address {
            font-style: normal;
        }
        img {
            height: auto;
            width: 100%;
        }
    }
    header {
        background: rgba(255, 255, 255, 90%);
        align-content: space-between;
        padding-block: 1rem;
        width: 100%;
        margin: 0;
        padding: 0;
        z-index: 99;
        @media (max-width: 1320px) {
            position: fixed;
            bottom: 0;
        }
        * {
            margin: 0 !important;
            padding: 0;
        }
        nav {
            display: flex;
            margin-block: 1rem !important;
            @media (max-width: 1320px) {
                grid-column: full-width;
            }
            * {
                list-style: none;
                margin: 0;
                padding: 0;
                display: flex;
                gap: 0 var(--gap);
                text-decoration: none;
                color: inherit;
                font-size: 1.5rem;
                text-transform: uppercase;
                width: min-fit-content;
            }
            ul {
                flex: 1;
                align-items: center;
                align-content: center;
                justify-content: center;
                flex-wrap: wrap;
                * {
                    font-size: 1rem;
                }
                @media (max-width: 1320px) {
                    align-items: space-around;
                    align-content: space-around;
                    justify-content: space-around;
                    flex-wrap: nowrap;
                }
            }
            a {
                white-space: nowrap;
                text-wrap: unset;
                gap: 0;
                svg {
                    display: none;;
                }
                @media (max-width: 1320px) {
                    text-indent: -9999px;
                    svg {
                        display: inline-block;
                        width: 2rem;
                    }
                }
            }
        }
    }

    main {
        
    }

    > footer {
        margin-top: calc(var(--gap) * -1);
        /*background: lightblue;*/
        > * {
            width: 100%;
            display: flex;
            align-content: space-between;
            justify-content: space-between;
            nav {
               a {
                    margin-left: 1rem;
                    text-decoration: none;
                    color: inherit;
               }
            }
        }
		@media (max-width: 800px) {
			padding-bottom: 5rem;	
		}
    }
    @media(max-width: 800px) {
        p {
            text-align: justify;
            text-wrap: balance;
        }
    }
}

.row {
    display: flex;
    gap: 0 var(--gap);
    margin: 0;
    flex-wrap: wrap;

    
    > * {
        flex: 1;
        min-width: 0;
        margin: 0;
        flex-basis: calc(33% - var(--gap));
        @media (max-width: 1200px) {
            flex-basis: calc(50% - var(--gap));
        }
        @media (max-width: 900px) {
            flex-basis: 100%;
        }
    }

    &:has(> :nth-last-child(n+3)) {
        > * {
            flex-basis: calc(25% - var(--gap));
             @media (max-width: 1400px) {
                flex-basis: calc(33% - var(--gap));
            }
            @media (max-width: 1100px) {
                flex-basis: calc(50% - var(--gap));
            }
            @media (max-width: 800px) {
                flex-basis: 100%;
            }
        }
    }

    p {
        hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        text-align: justify;
        text-wrap: wrap;
    }
    figure {
       
        flex-grow: 0;
        position: relative;
        overflow: clip;
        z-index: 1;
        figcaption {
            position: absolute;
            left: 0;
            right: 0;
            /*bottom: calc(100% + 1rem);*/
            bottom: 1rem;
            background: rgba(0, 0, 0, 50%);
            color: white;
            padding: .5rem 1rem;
            text-align: center;
            transition: 1s all ease;
        }
       
        /*
        &:hover {
            figcaption {
                bottom: 1rem;
            }
        }
            */
    }
}
.grid {
    display: grid;
	grid-template-columns: var(--columns-fit-4);
	gap: var(--gap);
    &.grid-5 {
        grid-template-columns: var(--columns-fit-5);
    }
    &.grid-6 {
        grid-template-columns: var(--columns-fit-6);
    }
}

#hero {
    grid-column: full-width;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    padding: 5dvh;
    aspect-ratio: 9 / 4;
    background-image: url(../img/hero.png?time=1);
    background-position: 0% 95%;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 550px;
    * {
        color: white;
    }
    h1 {
        font-size: clamp(50px, 5vw, 150px);
        font-weight: 200;
        text-transform: uppercase;
        margin: 0;
    }
    h2 {
        font-size: clamp(20px, 1.5vw, 50px);
        font-weight: 100;
        text-transform: uppercase;
        margin: 0;
    }
    a {
        border: 2px solid white;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 400;
        border-radius: 100vw;
        margin: 3vw 0 0 0;
        padding: calc(var(--gap) / 2) var(--gap);
        transition: 1s background ease;
        &:hover {
            background: white;
            color: lightblue;
            
        }
    }
    @media (max-width:800px) {
        background-position: 0 100%;
        min-height: 70dvh;
        h1, h2 {
            text-shadow: 0px 0px 1px #000 !important;
        }
    }    
}

form {
    .message {
        padding: var(--gap);
        border: 1px solid green;
        background: lightgreen;
        &.error {
            border-color: red;
            background: color-mix(in srgb, red, white 50%);
        }
    }
    label {
        display: block;
        margin: calc(var(--gap) / 2) 0 calc(var(--gap) / 6) 0 !important;
    }
    button, input, textarea {
        width: 100%;
        margin-block: 1px !important;
        padding: 5px;
        border: 1px solid black;
        border-radius: 5px;
        min-height: var(--gap);
        font-family: inherit;
        font-size: inherit;
        font-weight: 100 !important;
    }
    textarea {
        height: 90%;
    }
    button {
        margin-top: 1rem !important;
        border: 2px solid lightblue;
        background: color-mix(in srgb, lightblue, white 50%);
        text-transform: uppercase;
        font-weight: 200 !important;
        padding: 10px;
        transition: 1s all ease;
        &:hover {
            background: lightblue;
            border-color: transparent;
        }
    }

    span:has(input[type=checkbox]) {
        display: grid;
        grid-template-columns: 20px auto;
        gap: calc(var(--gap) / 2);
        > * {
            display: inline;
            margin: 0 !important;
            word-wrap: balance;
        }
    }
}

#to-top {
    position: fixed;
    right: calc(var(--gap) * 2);
    bottom: var(--gap);
    width: var(--gap);
    height: var(--gap);
    padding: 5px;
    background: color-mix(in srgb, lightgrey, white 75%);
}

.icons {
   /*gap: calc(var(--gap) * 2);*/
    /*> * {
        flex-basis: 20%;
    }*/
    * {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: center;
        text-align: center;
    }
    svg {
        height: calc(var(--gap) * 3);
    }
}

.cards {
    gap: var(--gap);
    > * {
        flex-basis: 20%;
        text-align: center;
        text-wrap: balance;
        background: color-mix(in srgb, lightgrey, white 90%);
        /*display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;*/
        padding: var(--gap);

        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;


        * {
            text-wrap: balance;
            margin-block: 0;
        }

        a {
            text-decoration: none;
            border: 2px solid lightgrey;
            background: transparent;
            color: inherit;
            padding: calc(var(--gap) / 2) var(--gap);
            border-radius: 100vw;
            transition: .5s all ease;
            &:hover {
                border: 2px solid black;
                background: white;
            }
        }
        small {
            display: block;
        }
        &.blue {
            background: color-mix(in srgb, lightblue, white 70%);
            a {
                border-color: color-mix(in srgb, lightblue, white 30%);
            }
        }
        &.green {
            background: color-mix(in srgb, lightgreen, white 70%);
            a {
                border-color: color-mix(in srgb, lightgreen, white 40%);
            }
        }
        &.orange {
            background: color-mix(in srgb, orange, white 80%);
            a {
                border-color: color-mix(in srgb, orange, white 50%);
            }
        }
        &.red {
            background: color-mix(in srgb, red, white 80%);
            a {
                border-color: color-mix(in srgb, red, white 70%);
            }
        }
        &.yellow {
            background: color-mix(in srgb, yellow, white 80%);
            a {
                border-color: color-mix(in srgb, yellow, white 10%);
            }
        }
        &:has(small) {
            /*grid-row: span 3;*/
        }
    }
}

dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--gap);
    margin: 0 !important;
    * {
        margin: 0 !important;
    }
    dt {
        font-weight: 400;
    }
}

details {
	border: 1px solid lightgrey;
	background: color-mix(in srgb, lightgrey, white 50%);
    margin-block: 5px !important;
	padding: 5px calc(var(--gap) / 2);
	overflow: hidden;
}
summary {
	cursor: pointer;
	margin-block: 5px !important;
}
details[open] {
    border: 1px solid lightgreen;
    background: color-mix(in srgb, lightgreen, white 50%);
    summary::-webkit-details-marker,
    summary::marker {
	    color: color-mix(in srgb, black, white 50%);
    }
}
details > *:not(summary) {
	display: block;
	margin: calc(var(--gap) / 2) calc(var(--gap) / 2);
}

#social {
    svg {
        width: 3rem;
    }
    * {
        text-decoration: none;
    }
}

#kekt-wrapper > * {
	margin-bottom: 2rem !important;
	@media (max-width:800px) {
		margin-bottom: 5rem !important;
	}
}