@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    /* --base-clr: #050505; */
    --base-clr: cream;
    /* --text-clr: lightgrey; */
    --text-clr: black;
    --heading-clr: #160505;

    --line-clr: #42434a;
    --hover-clr: #5e63ff4f;
    --hover-100per-clr: #3237d7;
    --hover-text-clr: #42446a;
    --newsbar-clr: rgba(32, 98, 179, 0.57);
    --newsbar-clr-dark: rgba(11, 33, 61, 0.57);
    
    --accent-clr: #ebbd4a;
    --secondary-text-clr: white;

    --debug-clr: green;
    
    --maintext-h1-size: clamp(12px, 4vw, 36px)
    --maintext-h2-size: clamp(10px, 3vw, 24px)
    --maintext-font-size: clamp(8px, 2vw, 20px)

    /* --h1-font-size: 60px; */

    --site-indent: 4vw;
        --site-spacingpara: 2.5vh;
        --site-spacing_top: 4vh;
        --site-spacing_bot: 2vh;
    
        --site-margin: 4vw;
        --site-max-width: 92vw;
}

* {
    /* margin: 5px 5px; */
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    box-sizing: border-box;
    /* background-color: whitesmoke; */
    /* background-color: lightgrey; */

    h1 {
        background-color: transparent;
        /* padding-left: var(--site-indent); */
        padding-right: var(--site-indent);
        /* padding-top: var(--site-spacing_top); */
        padding-bottom: var(--site-spacing_bot);
        line-height: 1.5;
        font-size: var(--maintext-h1-size);
    }
    h2 {
        background-color: transparent;
        /* padding-left: var(--site-indent); */
        padding-right: var(--site-indent);
        padding-top: var(--site-spacingpara);
        padding-bottom: var(--site-spacingpara);
    }
    p{
        /* padding-left: var(--site-indent); */
        /* padding-right: var(--site-indent); */
        padding-bottom: calc(var(--site-indent)/2);
        line-height: 2;
        background-color: transparent;
    }
    p.centered {
        display: flex;
        justify-content: center;
    }
    a {
        text-decoration: none;
        background-color: transparent;
        color: black;
    }
    a.https {
        text-decoration: underline;
        background-color: transparent;
        color: rgb(17, 1, 64);
        /* text-shadow: 1px 1px 2px black; */

    }
    a.pagelinks{
        text-decoration:underline;

    }
    em {
        background-color: transparent;
    }
}

html {
    font-family: Poppins, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 2.0rem;
    font-size: var(--maintext-font-size);
    margin: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    color: black;
    max-width: 100%;
    display: grid;

    /* grid-area settings*/
    grid-template-areas:
        "header"
        "main"
        "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;

}
img {
    padding-top: 10px;
    width: 40vw;
    border: black 1px solid;
}
img.logo {
    width: 30vw;
    border: None;
}
ul {
    text-align: left;
    list-style-position: inside;

}

.contactlink {
    font-weight: 800;
    text-shadow: 1px 1px var(--newsbar-clr);
}
/**********************************************************************/
/*                     HEADER                                         */
/**********************************************************************/

header {
    grid-area: header;

    width: 100%;
    /* border: dashed 5px red; */
    border-bottom: 2px solid black;
    /* padding: 1vh 1vw; */

    div#newsbar {
        height: 1vh;
        border-bottom: 2px solid black;
        background-color: var(--newsbar-clr);
        /* background-color: white; */
    }

    div#newsbarbot {
        height: 1vh;
        border-top: 2px solid black;
        background-color: var(--newsbar-clr);
        /* background-color: white; */
    }

    .topnav {
        overflow: hidden;
        background-color: var(--base-clr);
        display: flex;

        align-items: center;
    }

    .topnav img#logo {
        float: left;
        padding: 2vh 2vw;
        padding-left: var(--site-margin);
    }

    .topnav a {
        float: left;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: black;
        text-align: center;
        padding: 0 1vw;
        text-decoration: none;
        /* font-size: calc(1.25*var(--maintext-font-size)); */
        line-height: 1;
        height: 60px;
        max-width: 150px;
    }

    .topnav a:hover {
        background-color: #ddd;
        color: black;

        img {
            background-color: #ddd;
        }
    }

    .topnav a.active {
        background-color: var(--newsbar-clr);
        /* color: white; */
        /* img{
            background-color: blue;
        } */
    }

    .topnav .icon {
        display: none;
    }


}



/**********************************************************************/
/*                     FOOTER                                         */
/**********************************************************************/

footer {
    /* border-top: 1px solid var(--line-clr); */
    /* new */
    grid-area: footer;
    padding: min(10px, 2%);
    text-align: center;
    line-height: 1;
    div.iconrow {
        display: flex;
        align-items: center;
        justify-content: center;
        a{
            padding-inline: 8px;
        }
                img {
                    border: None;
                }

    }
}

/**********************************************************************/
/*                     MAIN                                         */
/**********************************************************************/

main {
    grid-area: main;
    margin: 4vw;
    border: solid 5px darkblue;

    div.columns{
        display: flex;
        flex-direction: row;
        background-color: transparent;
        justify-content: space-between;

        padding-bottom: var(--site-indent);
        /* border: red 1px dashed; */

        section {
            background-color: transparent;
            padding-bottom: var(--site-indent);
            max-width: 66vw;
            border: dashed 1px red;
            ul.showbullets {
                background-color: transparent;                
                li {
                    list-style:inside;
                    list-style-type:circle;
                    padding-left: calc(3*var(--site-indent));
                    padding-right: calc(1*var(--site-indent));
                    background-color: transparent;
                }
            }
            p.highlight {
                background-color: rgba(255, 255, 0, 0.224);
                
            }   
        }
        div {
            margin: 0 var(--site-indent);
            padding: 0;
            border: solid black 5px;
            height: fit-content;
            width: fit-content;
          
            /* background-color: transparent; */
            figure, video {
                /* border: dashed 1px red; */
                background-color: transparent;
        
                figcaption {
                    background-color: transparent;
                }
        
                padding: var(--site-indent);   
                padding-bottom: 0;
                img {
                    border: 1px solid black;
                    /* margin: var(--site-indent); */
                    background-color: transparent;
                    padding: 2px;
                    display: block;
                    /* max-width: 1200px;
                    max-height: 600px;
                    width: auto; */
                    /* object-fit: contain; */
                    max-width: 40vw;
                    width: auto;   
                }
            }
            p {
                /* margin: 0 0 ; */
                padding-left: var(--site-indent);
                padding-right: var(--site-indent);
            }
            
        }
    }
    div.centeredcolumns {
        display: flex;
        flex-direction: row;
        background-color: transparent;
        align-items: center;
        justify-self: center;

        section {
            background-color: transparent;
            padding-bottom: var(--site-indent);
            max-width: 30vw;
        }

        figure {
            /* border: dashed 1px red; */
            background-color: transparent;
            figcaption {
                background-color: transparent;
            }
            padding: var(--site-indent);
        }

        img {
            border: 1px solid black;
            /* margin: var(--site-indent); */
            background-color: transparent;
            padding: 2px;
            width: 320px;
            object-fit: contain;
        }

    }

}

main#indexpage, main#contactspage {
    background-image: url("../images/background_image.jpg");
    background-position: -120px -180px;

    /* height: fit-content; */
    /* min-height: 600px; */

    .titlepage-maintext {
    
        /* position: relative; */
        /* position: absolute; */
        /* top: calc(0.75*70vh); */
        /* left: var(--site-indent);
        max-width: calc(0.66*100vw);
        bottom: calc(0.25*70vh); */

        display: flex;
        flex-direction: column;
        margin: var(--site-indent);
        margin-top: 30vh;

        color: var(--secondary-text-clr);
        padding: 2vh 0.5vw 2vh 0;

        background-color: rgba(21, 12, 1, 0.45);

        border-width: 5px;
        border-style: solid;
        border-color: white;
        /* color: var(--text-clr); */

        h1 {
            color: var(--secondary-text-clr);
            padding-bottom: 6px;
            /* color: var(--text-clr); */
        }

        h2 {
            color: var(--secondary-text-clr);
            padding-bottom: 4px;

            /* color: var(--text-clr); */
        }
    }
}

main#software {

    background-image: url("../images/background_image.jpg");
    background-position: -120px -180px;

    height: fit-content;
    /* min-height: 600px; */
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

    div {
        border: black solid 5px;
        display: flex;
        flex-direction: column;
        background-color: transparent;

        margin: var(--site-indent) var(--site-indent);
        width: 45vw;

        /* position: relative; */
        /* position: absolute; */
        /* top: calc(0.75*70vh); */
        /* left: var(--site-indent); */
        /* max-width: calc(0.66*100vw); */
        /* bottom: calc(0.25*70vh); */

        color: var(--secondary-text-clr);
        background-color: rgba(21, 12, 1, 0.45);
        /* padding: 2vh 0.5vw 2vh 0; */

        /* background-color: rgba(21, 12, 1, 0.45); */

        /* border-width: 5px; */
        /* border-style: solid; */
        /* border-color: white; */
        /* color: var(--text-clr); */

        h1, h2, p {
            color: var(--secondary-text-clr);
            padding-bottom: 6px;
            /* color: var(--text-clr); */
            background-color: transparent;
            width: 100%;
        }

        img {
            width: 100%;
        }
        p.highlight {
            background-color: rgba(255, 255, 0, 0.224);
        }
        .overlay {
            position: absolute;
            /* left: 18vw;*/
            top: 30vh; 
            left: 20vw;
            width:30vw;     
            border: black solid 5px;
        }

    }
}

main#industrialapp{
    background-image: url("../images/background_image.jpg");
    background-position: -120px -180px;
    height: fit-content;

    display: grid;
    /* two columns */
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto auto;

    grid-gap: var(--site-indent);

    background-color: rgba(0, 0, 0, 0.5);
    padding: var(--site-indent);

    div.fullcell{
        grid-column: auto / span 2;
        align-items: center;
        div img{
            width: 40vw;
        }
    }

    div {
        display: flex;
        flex-direction: row;
        background-color: rgba(0, 0, 0, 0.476);
        color: white;
        text-align: left;
        /* justify-content: left; */
        padding: 20px;
        border: solid black 5px;
        video {
            width: 25vw;
        }
        img{
            background-color: transparent;
            width: 10vw;
            height: auto;
        }
        ul{
            background-color: transparent;
            list-style-type: circle;
            padding-left: var(--site-indent);
            padding-right: var(--site-indent);
            li{
                background-color: transparent;
                padding-left: var(--site-indent);
                padding-right: var(--site-indent);



            }
        }

        
        /* text spans both columns; */
        /* grid-column: auto / span 2;
        grid-area: description;
        margin: var(--site-indent);
        max-width: 50vw;
        background-color: rgba(0, 0, 0, 0.52);
        border: 5px solid #000;
        color: white;
        height: fit-content; */
    }

    /* div.halfcell{
        max-width: 50vw;
        display: flex;
        flex-direction: column;
        figure {
            img {
                position: absolute;
                margin: var(--site-indent);
                height: auto;
                max-width: fit-content;
            }
        }
    } */
}

main.backgroundcolor {
    background-color: whitesmoke;
    /* background-image: linear-gradient(rgba(32, 98, 179, 0.296), #0f3d68dc); */

}

/**********************************************************************/
/*                     contact form                                   */
/**********************************************************************/

/* Group of label and input */
form div.formgroup {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* margin-bottom: 20px; */
    padding: 1px 10px;
    background-color: transparent;
    /* border: dashed red 1px; */
}

form div label {
    display: block;
    padding-bottom: 0.5px;
    background-color: transparent;
    color: white;
}

form div input,
form div textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    background-color: lightgrey;
    border-radius: 5px;
    border: 2px solid black;
}

.container#contact {
    border: 5px solid white;
    /* border-radius: 1em; */
    max-width: 1400px;
    max-height: fit-content;
    margin: 5vh auto;
    padding: min(1em, 10%) min(2em, 10%);
    background-color: rgba(0, 0, 0, 0.565);

    display: grid;

    grid-template-areas:
        "contactdeets contactmessage"
        "contactdeets contactmessage"
        "contactdeets contactmessage"
        "deets deets";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto minmax(10px, 60px);
}
svg.my-svg{
    background-color: transparent;
}
.container#contact form#contact-form1 {
    grid-area: contactdeets;
    background-color: transparent;
}

.container#contact form#contact-form2 {
    grid-area: contactmessage;
    background-color: transparent;
}

/* .container#contact form#contact-form3 {
    grid-area: contactbutton;
    text-align: center;
    background-color: transparent;

    p {
        color: grey
    }

} */

.container#contact div#contact-details {
    grid-area: deets;
    background-color: transparent;
    /* border: dashed red 1px; */

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2em;
    padding: 1px 10px;

    span, address, email {
        background-color: transparent;
        span, a{
            background-color: transparent;
            color: white;
        }
    }

}

.icon,
.contactdeets {
    vertical-align: middle;
    display: inline-block;
}

.container#contact-form-submit {
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 2vh;
    padding: 0;
    /* border: dashed red 1px; */
    background-color: transparent;
    line-height: 1;

    p {
        max-width: 40vw;
        width: 40vw;
        padding-right: 20px;
    }

    button {
        background-color: blue;
        color: white;
        font-size: large;
        font-weight: 600;
        padding: 10px 20px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
    }
}

/* form button {
    padding: 10px 20px;
    font-size: 1em;
    background-color: var(--line-clr);
    border-radius: 10px;
    color: #fff;
    border: none;
    cursor: pointer;
  } */

.container#contact-form-submit button:hover {
    background-color: red;
}

/**********************************************************************/
/*                          MEDIA                                     */
/**********************************************************************/

@media (max-width: 850px) {
    .flex-container {
        flex-direction: column;
    }

    .center-container {
        max-width: 76vw;
    }

    img#dual {
        width: 40vw;
    }

    img {
        width: 80vw;
    }

}

@media screen and (max-width: 850px) {
    /* simple nav bar adjustment */
    nav#navtop {
        ul {     
            div#logobox {
                /* border: red solid 1px; */
                img {
                    width: 20vw;
                    max-width: 200px;
                    height: 40px; 
                    /* border: green 5px solid; */
                }
            }
            div#navbox{ 
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                li {
                    line-height: 2;
                    
                }
                a {
                    font-size: 14px;
                }
                
            } 

        }
    }

    main#contactspage {
        height: fit-content;
    }

    /* for pages like about */
    main div.columns {
        flex-direction: column;
        section {
            max-width: 100vw;
            ul {
                background-color: transparent;
                list-style-type: show;
                li{
                    list-style-type: show;
                    padding-left: calc(4*var(--site-indent));
                    background-color: transparent;
                }
            }            
        }
        div > figure > img {
            width: unset;
            height: unset;
            /* border: black dashed 2px; */
            max-width:80vw;
        }
        div > video {
            max-width: 80vw;
        }


    }

    .container#contact {
        border: 5px solid white;
        /* border-radius: 1em; */
        /* max-width: 1400px; */
        /* max-height: fit-content; */
        margin: 5vh auto;
        padding: min(1em, 10%) min(2em, 10%);
        background-color: rgba(0, 0, 0, 0.565);

        display: grid;

        grid-template-areas:
            "contactdeets"
            "contactdeets"
            "contactdeets"
            "contactmessage"
            "contactmessage"
            "contactmessage"
            "deets"
            "deets"
            "deets";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto auto auto auto;   

        div#contact-details {
            flex-direction: column;
        }
    }
    div.container#contact-form-submit {
        color: white;
        font-size: 16px;
        flex-direction: column;

        p {
            /* flex: 100; */
            padding: 0;
            padding-bottom: 20px;
            margin: 0;
            text-align: center;
            width: 75vw;
            max-width: 75vw;
        }

    }

    main#indexpage div.titlepage-maintext {   
        max-width: 100vw;
    }
    main#software {
        flex-direction: column;
        div {
            width: 95%;
            .overlay{
                position: block;
                left: 45%;

                width: 45%;
            }
        }
    }
    main#industrialapp {
        /* display: grid; */
        /* one column */
        display: flex;
        flex-direction: column;
        div {
            max-width: 100vw;
            padding: 2px;
            video{
                width: 85vw;
            }
            div
                ul{
                    padding-left: 2px;
                    padding-right: 2px;
                    li {
                        margin-left: 5px;
                        padding-left: 2px;
                        padding-right: 2px;

                    }
                }
                img {
                    width: 80vw;
                    height: auto;
                }
            }           
        
        div.fullcell{
            div img {
                /* border: red 5px solid; */
                width: 90vw;
                height: auto;
            }
        }
    }

    footer {
        font-size: 12px;
    }

}
@media screen and (max-width: 960px) {
    img.logo {
            width: 60vw;
        }
    .topnav {
        display: flex;
        justify-content: space-between;
        align-items: top;
        /* overflow: hidden; */
    }
    .topnav div a { /* : not(:first-child)*/
        display: none;
    }
    .topnav div a.icon {
        /* margin-right: 2vw; */
        display: flex; /* this unsets the display none*/
        color: black;
        /* border: red dashed 2px; */
    }
    .topnav div a.icon:hover {
        color: blue;
        background-color: unset;
    }

    .topnav.responsive {
        text-align: top;
    }
    .topnav.responsive img#logo{
        display: block;
        position: relative;
        top: -83px;
        left: 0px;
    }

    .topnav.responsive div {
        /* position: relative; */
        justify-content: right;
        display: flex;
        flex-direction: column;
        height: fit-content;
        padding-bottom: 5px;
    }

    .topnav.responsive div a.icon {
        position: absolute;
        right: 0;
        top: 32px; 
        
    }

    .topnav.responsive a {
        display: flex;
        text-align: left;
        align-content: center;
        justify-content: left;
        /* align-items: left; */
        /* justify-items: left; */
        /* position: relative;
        right: 0px;
        top: 15px; */
        height: 35px;
        padding-right:0;
        padding-left: 0;
        /* border: green 2px dashed; */

    }
    .topnav.responsive a.active {
        color: blue;
        background-color: transparent;
        font-weight: 800;

    }
}