/* Fonts */
@font-face {
    font-family: 'OsFont';
    src: url("assets/fonts/OsFont-Light.woff2") format("woff2"), url("/assets/fonts/OsFont-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OsFont';
    src: url("assets/fonts/OsFont-LightItalic.woff2") format("woff2"), url("/assets/fonts/OsFont-LightItalic.woff") format("woff");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'OsFont';
    src: url("assets/fonts/OsFont-Book.woff2") format("woff2"), url("/assets/fonts/OsFont-Book.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OsFont';
    src: url("assets/fonts/OsFont-BookItalic.woff2") format("woff2"), url("/assets/fonts/OsFont-BookItalic.woff") format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'OsFont';
    src: url("assets/fonts/OsFont-Medium.woff2") format("woff2"), url("/assets/fonts/OsFont-Medium.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OsFont';
    src: url("assets/fonts/OsFont-MediumItalic.woff2") format("woff2"), url("/assets/fonts/OsFont-MediumItalic.woff") format("woff");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* Variables */
/* https://www.color-hex.com/color-palette/1062192 */
:root {
    --background-color: #f4f4f4;
    --text-color: #2f2f2f;
    --main-color: #4a4a4a;
    --secondairy-color: #4f3c52;
    --highlight-color: #fbe26c;
}

/* Containers */
* {
    box-sizing: border-box;
    font-family: OsFont, Arial, sans-serif;
    transition: background-color 100ms linear;
    transition: color 100ms linear;
    transition: stroke 100ms linear;
}

::selection, ::-moz-selection {
    background: var(--highlight-color);
    color: var(--secondairy-color);
    text-shadow: none;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    background-color: var(--background-color);
    min-height: 100vh;
    color: var(--text-color);
}

header {
    flex: 1;

    .header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        max-width: 1366px;
        margin: 0 auto;
        padding: 0 2rem;

        .menu-items {
            display: flex;
            gap: 0.5rem;
        }
    }
}

.container {
    flex: 1;
    height: 100%;
    padding: 3rem 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
    max-width: 1366px;
    min-height: 500px;
    padding: 0 2rem;
}

.item,
.item-4,
.item-6 {
    min-height: 15rem;
}

.item {
    flex: 1 0 auto;
    width: 100%;
}

.item-4 {
    flex: 0 0 auto;
    width: calc(33.33333% - 1.5rem);
}

.item-6 {
    flex: 0 0 auto;
    width: calc(50% - 1rem);
}

dialog {
    border-radius: 2rem;
    border: #bdc1ce .2rem solid;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    min-height: 350px;
    padding: 20px 30px;
}

dialog::backdrop {
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(5px);
}

/* Components */
h1 {
    font-weight: 400;
    font-size: 2.5rem;
}

h2 {
    font-weight: 400;
    font-size: 2.2rem;
    border-bottom: 0.125rem solid var(--main-color);
}

h3 {
    font-weight: 400;
    font-size: 2rem;
}

h1, h2, h3 {
    color: var(--main-color);
    margin: 0;

    span {
        color: var(--highlight-color);
    }
}

a {
    display: inline-flex;
    position: relative;
    text-decoration: none;
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8125rem;

    &::after {
        content: '';
        position: absolute;
        width: 0;
        height: 0.125rem;
        display: block;
        margin-top: -0.125rem;
        left: 0;
        bottom: 0;
        background: var(--secondairy-color);
        transition: width .3s ease-in-out;
        -webkit-transition: width .3s ease-in-out;
    }

    &:hover {
        background-size: 100% 0.125rem;
        transition-delay: 0s;

        &::after {
            width: 100%;
            left: 0;
            background: var(--secondairy-color);
        }
    }

    &:focus {
        outline: var(--main-color) solid .2rem;
        outline-offset: 0.5rem;
        border-radius: 0.5rem;
    }

    &:focus:not(:focus-visible) {
        outline: 0;
    }
}


strong {
    color: var(--main-color);
}

button {
    background-color: var(--secondairy-color);
    color: var(--background-color);
    border: none;
    border-radius: 10px;
    padding: 1rem;
    text-wrap: nowrap;
    font-weight: 600;

    &:hover {
        cursor: pointer;
        background-color: var(--main-color);
    }

    &:focus-visible {
        outline: var(--main-color) solid .2rem;
    }
}

.hidden {
    display: none;
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 56px;
    background-color: #222222;
    position: relative;
    /*border-radius: 32px;*/
    overflow: hidden;
    font-size: 18px;
    cursor: pointer;
    
    .bg {
        background: #F0F0F0;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        transform: translateX(-100%);
        transition: transform .25s linear;
    }

    &:hover .bg {
        transform: none;
    }

    span {
        color: white;
        mix-blend-mode: difference;
    }

    .svg {
        margin-right: 10px;
        mix-blend-mode: difference;
        line-height: 0;
    }

    svg path {
        stroke: white;
    }
}

/* Toggle switch, checkbox and radio */

.toggle-switch {
    display: inline-flex;
    align-items: center;
    position: relative;

    .switch {
        position: relative;
        display: inline-block;
        height: 2.4rem;
        margin-right: 0.75rem;

        > input {
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            position: absolute;
            right: -0.4rem;
            top: -0.2rem;
            display: block;
            margin: 0;
            border-radius: 2.8rem;
            width: 4.8rem;
            height: 2.8rem;
            outline: none;
            pointer-events: none;
            transition: transform 0.2s 0.1s;

            &:focus {
                outline: 0.2rem solid var(--main-color);
            }

            &:focus:not(:focus-visible) {
                outline: 0;
            }

            &:checked + span::before {
                background-color: var(--secondairy-color);
            }

            &:checked + span::after {
                transform: translateX(1.6rem);
            }

            &:active + span::before {
                background-color: var(--text-color);
            }

            &:checked:active + span::before {
                background-color: var(--highlight-color);
            }

            &:disabled + span {
                cursor: progress;
            }

        }

        > span {
            cursor: pointer;

            &::before {
                content: "";
                display: inline-block;
                border-radius: 2.4rem;
                width: 4rem;
                height: 2.4rem;
                background-color: var(--main-color);
                vertical-align: top;
                transition: background-color 0.2s;
            }

            &::after {
                content: "";
                position: absolute;
                top: 0.2rem;
                right: 1.8rem;
                border-radius: 50%;
                width: 2rem;
                height: 2rem;
                background-color: var(--background-color);
                box-shadow: 0 0.3rem 0.1rem -0.2rem rgba(0, 0, 0, 0.2), 0 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.14), 0 0.1rem 0.5rem 0 rgba(0, 0, 0, 0.12);
                transition: background-color 0.2s, transform 0.2s;
            }
        }
    }
}

.checkbox {
    position: relative;

    input[type='checkbox'] {
        position: absolute;
        height: 2.5rem;
        width: 2.5rem;
        margin: .6rem 0;
        outline: none;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
    }

    input[type='checkbox'] + label {
        position: relative;
        display: inline-flex;
        margin: .6rem 0;
        align-items: center;
        color: var(--text-color);
        transition: color 250ms cubic-bezier(.4,.0,.23,1);
    }

    input[type='checkbox'] + label > span {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 0.75rem;
        width: 2.5rem;
        height: 2.5rem;
        background: transparent;
        border: 0.125rem solid var(--secondairy-color);
        border-radius: 0.25rem;
        cursor: pointer;
        transition: all 250ms cubic-bezier(.4,.0,.23,1);
    }

    input[type='checkbox']:focus + label > span {
        outline: var(--main-color) solid .2rem;
        outline-offset: 0.5rem
    }

    input[type='checkbox']:focus:not(:focus-visible) + label > span {
        outline: 0;
    }

    input[type='checkbox']:checked + label > span {
        border: 1.25rem solid var(--secondairy-color);
        animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);
    }

    input[type='checkbox']:checked + label > span:before {
        content: "";
        position: absolute;
        top: .6rem;
        left: .6rem;
        border-right: 0.2rem solid transparent;
        border-bottom: 0.2rem solid transparent;
        transform: rotate(45deg);
        transform-origin: 0% 100%;
        animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards;
    }
}

@keyframes shrink-bounce {
    0% {
        transform: scale(1);
    }

    33% {
        transform: scale(.85);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes checkbox-check {
    0% {
        width: 0;
        height: 0;
        border-color: var(--background-color);
        transform: translate3d(0,0,0) rotate(45deg);
    }

    33% {
        width: .5rem;
        height: .5rem;
        transform: translate3d(0,0,0) rotate(45deg);
    }

    100% {
        width: .5rem;
        height: 1rem;
        border-color: var(--background-color);
        transform: translate3d(0,-.5rem,0) rotate(45deg);
    }
}

.radio {
    &:focus-within {
        outline: var(--main-color) solid .2rem;
        outline-offset: 0.5rem;
        border-radius: 0.5rem;
    }

    p:focus-within {
        /*background-color: var(--highlight-color)*/
        font-weight: bold;
    }
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    height: 2.6rem;
    width: 2.6rem;
    margin: 0;
    outline: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label {
    position: relative;
    padding-left: 3rem;
    cursor: pointer;
    line-height: 2.6rem;
    display: inline-block;
}

/*[type="radio"]:focus + label:before {
    outline: var(--main-color) solid .2rem;
}*/

[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2.3rem;
    height: 2.3rem;
    border: 0.125rem solid var(--secondairy-color);
    border-radius: 100%;
    background: var(--background-color);
}

[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    background: var(--secondairy-color);
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

/* Form fields */

.form-group {
    position: relative;
    margin: 0;
    margin-bottom: 3rem;

    input[type="date"] {
        -webkit-text-fill-color: var(--text-color);
        color: var(--text-color);

        &::-webkit-calendar-picker-indicator {
            mask-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-image: none;
            background-color: var(--text-color);
            mask-type: match-source; 
        }

        & ~ label {
            top: -0.875rem;
            font-size: 0.75rem;
            color: var(--secondairy-color);
        }
    }              

    input,
    textarea {
        background: none;
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 100%;
        border: none;
        border-radius: 0;
        border-bottom: 0.125rem solid var(--secondairy-color);

        &:focus {
            outline: none;
        }

        &:focus ~ label,
        &:valid ~ label,
        &:user-invalid ~ label {
            top: -0.875rem;
            font-size: 0.75rem;
            color: var(--secondairy-color);
        }

        &:user-invalid ~ label {
            color: red;
        }

        &:focus ~ .bar:before {
            width: 100%;
        }
    }

    label {
        font-weight: normal;
        position: absolute;
        pointer-events: none;
        left: 0.25rem;
        top: 0.625rem;
        transition: 300ms ease all;
    }

    .bar {
        position: relative;
        display: block;
        width: 100%;

        &:before {
            content: '';
            height: 2px;
            width: 0;
            bottom: 0px;
            position: absolute;
            background: var(--main-color);
            transition: 300ms ease all;
            left: 0%;
        }
    }
}

/* Table */

.responsive-table {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;

    th, td {
        text-align: right;
        padding: 1.4rem;

        &:first-child {
            text-align: left;
        }
    }

    tbody tr:hover {
        box-shadow: 0 2px 3px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .12);
        background-color: rgba(56, 142, 60, 0.125);
    }
}

/* Image carousel */
.carousel {
    overflow: hidden;
    position: relative;

    button {
        position: absolute;
        top: calc(50% - 2rem);
        background: transparent;

        &:last-of-type {
            right: 0;
        }

        svg {
            width: 2rem;
            height: 2rem;

            path {
                stroke: var(--main-color);
            }
        }
        
        &:hover {
            svg path {
                stroke: var(--highlight-color);
            }
        }
    }
    
    .gallery {
        overflow-x: scroll;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        display: flex;
        aspect-ratio: 16/9;
        border-radius: 1rem;
        -ms-overflow-style: none;
        scrollbar-width: none;

        &::-webkit-scrollbar { 
            display: none;
        }

        div {
            display: block;
            max-width: 100%;
            scroll-snap-align: start;
            min-width: 100%;
            background-size: cover;
            background-position: center;
        }
    }
}

/* Dark light mode animation */
#mode-select {
    width: 50px;
    height: 50px;

    #earth {
        circle {
            animation: toMoon forwards 1s;
        }
    }

    &.day {
        color: gold;

        #earth {
            circle {
                animation: toSun forwards 1s;
            }
        }
    }
}

@keyframes toSun {
    0% {
        cx: 3.141592654px;
    }

    100% {
        cx: 13.141592654px;
    }
}

@keyframes toMoon {
    0% {
        cx: 13.141592654px;
    }

    100% {
        cx: 3.141592654px;
    }
}

.audio-item {
    width: 242px;
    height: 242px;
    position: relative;
    background: #e7e7e7;
    border-radius: 50%;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    .play-button {
        width: 200px;
        height: 200px;
        position: absolute;
        left: 20px;
        top: 20px;
        border-radius: 50%;
        object-fit: cover;

        &.markknopfler {
            background: url("assets/images/markknopfler.jpg") no-repeat center;
        }

        .fa-pause, 
        .fa-redo, 
        &.play .fa-play, 
        &.stopped .fa-play {
            display: none;
        }

        &.play .fa-pause,
        &.stopped .fa-redo {
            display: inline-block;
        }

        .controls {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            width: 120px;
            height: 120px;
            top: 40px;
            left: 40px;
            cursor: pointer;

            > div {
                width: 60px;
                height: 60px;
            }

            .fa-play, .fa-pause {
                svg {
                    fill: var(--text-color);
                }
            }

            .fa-redo svg path {
                stroke: var(--text-color);
            }
        }
    }

    .circle {
        position: absolute;
        display: inline-block;
        text-align: center;
        margin: 0;
        left: 0;

        .progress {
            fill: transparent;
            stroke: var(--main-color);
            stroke-width: 20;
            stroke-dasharray: 691;
            -ms-transition: stroke-dashoffset 0.5s;
            -o-transition: stroke-dashoffset 0.5s;
            -webkit-transition: stroke-dashoffset 0.5s;
            transition: stroke-dashoffset 0.5s;
            -webkit-animation-play-state: running;
            stroke-dashoffset: 691px;
        }
    }
}

.audio-description {
    width: 242px;
    font-size: 1.1rem;
    
    p {
        margin: 0.25rem 0;
    }
}

/* Footer */
footer {
    flex: 1;
    color: #FFFFFF;
    background: var(--text-color);

    .footer {
        max-width: 1366px;
        margin: 0 auto;
        padding: 2rem;
        text-align: center;
    }
}

/* Media queries */

/* Large */
@media (max-width: 992px) {
    .item-4 {
        flex: 1 0 auto;
        width: 100%;
    }
}

/* Medium */
@media (max-width: 768px) {
    header {
        margin-bottom: 1rem;
    }

    .item-6 {
        flex: 1 0 auto;
        width: 100%;
    }

    .carousel .gallery {
        aspect-ratio: 4/3;
    }
}

/* Small */
@media (max-width: 576px) {
    h1 {
        font-size: 1.5rem;

        span {
            display: block;
        }
    }

    header .header,
    .content {
        padding: 0 0.8rem;
    }
}