/* font sizes in pt 14 18 28 36 72 */

:root {
    --blue1: #5CD4EF;
    --blue2: #15B1D7;
    --blue3: #036E94;
    --blue4: #023C66;
    --orange: #F57104;
    --warmOrange: #BF3C05;
}


body {
    margin: 0; padding: 0;
    font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
    font-weight: normal;
    font-size: 14pt;
    line-height: 1.5;
}

header {
    position: relative;
    overflow: clip;
    height: 80vh; width: 100vw;
    background: url("/media/noisy-texture-64x64-o5-d10-c-eddae0-t1.png"), linear-gradient(45deg, var(--blue3), var(--blue2)) ;
    display: flex;
    justify-content: center;
    align-items: center;

    & nav {
        position: absolute;
        top: 10px; right: 20px;

        & a {
            color: white;
            text-decoration: underline 2px;
        }
    }

    & h1 {
        margin: 0;
        padding: 0;

        & svg {
            height: auto;
            width: 60vw;

            & path {
                fill: #fff;
            }
        }
    }
}

em {
    background-color: #000;
    color: var(--orange);
    font-style: normal;
}

h2 {
    font-size: 36pt;
    text-align: center;
}

#M {
    overflow-x: clip;
}

section {
    display: flex;
    justify-content: center;
}

section > .inner
{
    flex: 1;
    max-width: 100vw;
    padding: 5px;
}

@media screen and (min-width: 769px) {
    section > .inner {
        max-width: 50rem;
    }

    h2 {
        text-align: left;
    }
}

#Intro {
    padding-top: 5vh;
    padding-bottom: 60px;

    & h2 {
        text-align: center;
        margin-top: 30px;
        color: var(--orange);
    }

    & p {
        padding: 5px;
        font-size: 28pt;
    }
}

#Services {

    background: var(--warmOrange) url("/media/noisy-texture-64x64-o5-d10-c-eddae0-t1.png");
    padding-bottom: 30px;

    & h2 {
        color: #fff;
        margin-top: 70px;
        text-align: center;
    }

    & h4 {
        color: white;
        font-size: 28pt;
        text-transform: uppercase;
        font-weight: normal;
    }

    & ul {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 20px;
        list-style-type: none;
        padding-left: 0;

        & li {
            display: grid;
            grid-template-rows: 2fr 3fr;
            gap: 20px;

            & div {
                color: #fff;
                font-size: 72pt;
                align-content: center;
                display: none;
            }

            & h4 {
                align-content: center;
                line-height: 140%;
                margin-bottom: 0;
            }

            & p {
                align-content: center;
                background: url("/media/noisy-texture-64x64-o5-d10-c-eddae0-t1.png"), white;
                border-radius: 20px;
                padding: 20px;
                text-align: center;
            }
        }
    }
}

@media screen and (min-width: 769px) {

    #Services {
        transform: rotate(-2deg) translateX(-20vh);
        width: 140vw;

        & .inner {
            padding: 0;
            transform: translateX(-15vh) rotate(2deg);
        }
        & h2 {
            text-align: left;
            margin-top: 12pt;
        }

        & ul li {
            grid-template-columns: 1fr 2fr 3fr;
            grid-template-rows: 1fr;
            gap: 20px;

            & div {
                display: block;
            }

            & h4 {
                margin-bottom: 40px;
            }
        }
    }
}


#Technologies {
    padding: 80px 0 30px;

    & h2 {
        color: black;
    }

    & ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        list-style-type: none;
        padding-left: 0;

        & li {
            align-content: center;
            min-width: 100px;

            & svg {
                filter: grayscale(100%) opacity(90%);
            }

            & a {
                cursor: pointer;
            }

            & a:hover svg {
                filter: grayscale(0%) opacity(100%);
            }
        }
    }
}

#Specifics {
    padding: 30px 0 30px 0;

    & h2 {
        margin-bottom: 50px;
    }

    & ul {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
        gap: 20px;
        list-style-type: none;
        padding-left: 5px;
        padding-right: 5px;


        & li {
            background: url("/media/noisy-texture-64x64-o5-d10-c-eddae0-t1.png"), linear-gradient(45deg, var(--blue1), var(--blue2));
            padding: 90px 20px 20px 20px;
            position: relative;
            overflow: clip;
            display: flex;
            align-items: center;

            & span {
                position: absolute;
                top: -70px;
                left: -20px;
                color: white;
                font-weight: bold;
                font-size: 160px;
                line-height: 190px;
                transform: rotateZ(-30deg);
            }
        }
    }
}

@media screen and (min-width: 769px) {
    #Specifics ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;

        & li {
            padding: 20px 20px 30px 120px;
        }
    }

}

#QA {
    background: var(--orange) url("/media/noisy-texture-64x64-o5-d10-c-eddae0-t1.png");
    padding: 50px 0 50px 0;

    & h2 {
        color: #fff;
        font-size: 36pt;

    }

    & h4 {
        color: #fff;
        font-size: 18pt;
        font-weight: normal;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        cursor: pointer;
        margin-bottom: 5px;
    }

    & .answer {

        display: block;

        &.hidden {
            display: none;
        }
    }

    & p {
        background: #fff url("/media/noisy-texture-64x64-o5-d10-c-eddae0-t1.png");
        padding: 20px;
        font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
        font-weight: normal;
        line-height: 160%;


        & em {
            background-color: var(--warmOrange);
            color: #fff;
        }


    }
}

@media screen and (min-width: 769px) {
    #QA {
        transform: rotate(-2deg) translateX(-20vh);
        width: 140vw;

        & .inner {
            transform: translateX(-15vh) rotate(2deg);
        }

        & h2 {
            margin-top: 0;
            display: inline-block;
            transform: rotate(-90deg) translateY(-10rem);
            position: absolute;
        }
    }

}

#Respect {

    & .inner {
        max-width: 80rem;
    }

    padding: 80px 0 30px 0;

    & h2 {
        max-width: 50rem;
        margin: 50px auto 30px;
    }

    & h3 {
        text-align: center;
        background: url("/media/noisy-texture-64x64-o5-d10-c-eddae0-t1.png"), var(--warmOrange);
        color: white;
        padding: 10px 20px;
        align-content: center;
        min-height: 4rem;
    }

    & ul {
        display: grid;
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: 1fr;
        gap: 20px;
        list-style-type: none;
        padding-left: 0;

        & li p {
            padding: 5px;
        }
    }
}

@media screen and (min-width: 769px) {
    #Respect {

        & ul {
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: 1fr;
        }
    }

}



#Contacts {
    background: url("/media/noisy-texture-64x64-o5-d10-c-eddae0-t1.png"), linear-gradient(170deg, var(--blue3), var(--blue4));
    padding: 50px 0 80px 0;
    color: #fff;
    font-size: 28pt;

    & a {

        text-decoration: underline;
        text-decoration-thickness: 2px;
        color: white;

        & span {
            font-size: 80%;
        }
    }

    & .call {
        font-size: 14pt;
    }
}