/* ========
css file has classes for each page
Layout is in the index order
========= */

/* ******* structure *******
First section global code - body (typography & font, a & li links).

T -  R -  B -   L

**** handheld:
image; container layout: header, page (eg index), footer, copyright;.
container.items: navbar, p*x*.

**** desktop; media query:
image; body (typography & font, a & [no li] & current-page & hover links for header and footer); navbar (ul & li & a links); dropdown (ul & li links);

page (eg index) layout: header, container.page; container.items: p*x*; container.footer with copoyright.

Further pages need structure visit to update this section.

end media query
== Notes: none ==
*/

/* ********** handheld ********** */

/* =====================
main & body / setup
===================== */

/* =============
typography - handheld
============= */

@import url("https://fonts.googleapis.com/css?family=Oxygen:400,500,600,700,900%display=swap");
body {
    font-family: 'Oxygen', sans-serif;
    color: snow;
    font-size: 3rem;
    font-weight: 400;
    background-color: #333333;
    margin: 0 auto;
    max-width: 1200px;
}

h1 {
	/* Main Title font size */
    font-size: 4rem;
	font-weight: 700;
	margin: 0;
    text-align: center;
}

h2 {
	/* Sub Title font size */
	font-size: 3.25rem;
	margin: 0;
    text-align: center;
}

h3 {
	/* Footer Title font size */
	font-size: 2.25rem;
	/* font-weight: 400; */
	margin: 0;
}

h4 {
	/* Footer Text font size */
	font-size: 2rem;
   
	font-weight: 600;
	margin: 0;
	color: darkgray;
}

h5 {
	/* copyright font size */
    font-size: 1.5rem;
	font-weight: 600;
	margin: 0;
	color: darkgray;
}

a {
    /* color: #5d82b3; */
    color: lightskyblue;
    font-weight: 600;
    text-decoration: none;
    /* border-bottom: 3px solid magenta; */
}

.current-page {
    /* Delft Blue */
    /* color: rgb(61, 94, 140); */
    color: rgb(4, 244, 4);
    font-weight: 900;
    box-shadow: 0 2px  rgb(4, 244, 4);
}

li {
    padding: 0px 0px 0px 0px;
    list-style: none;
    border: none;
}

/* ********** handheld ********** */

/* =============
images - handheld
============= */
.imgLogo {
	display: block;
    margin-top: 40px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
 	max-width: 400px;
}


.imgpCxQR {
    display: block;
    margin: 0rem auto 0rem auto;
    text-align: center;
}

.imgbody1 {
	display: block;
	margin-left: auto;
	margin-right: auto;
	/* width: 90%; */
 	size: 5px;
}

.imgconsulting1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
     /* max-width: 500px; */
}

.imgRFID {
    max-width: 10%;
    display: block;
    /* width: 80px; */
    justify-content: center;
}

.imgconst1 {
    /* max-width: 50%; */
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    padding: 10;

}


/* .imgfoot1 {
	max-width: 100%;
	display: block;
	width: 200px;
} */


/* =============================================
index.html
============================================= */


/* =============
index navigation - handheld
N/A; rows only
============= */


/* =============
index layout - handheld
============= */
.container.header {
    text-align: center;
    height: 100%;
}

.mainwords {
    text-align: center;
}

.container.index {
    display: grid;
    grid-template-rows: repeat(6, auto);
    /* grid-template-columns: 1fr 1fr 1fr 1fr; */
    gap: 5px;
}
.container.footer {
    display: grid;
    /* background-color: pink; */
    /* height: 100vh; */
    grid-template-rows: repeat(2, auto);
    /* background-color: lightgray; */
    /* grid-template-rows: auto auto; */
    /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr; */
    gap: 5px;
}

.item.footerC1 {
    text-align: left;
    padding: 0rem 2rem 0rem;
}

.item.footerC2 {
    text-align: left;
    padding: 0rem 2rem 0rem;
}

.item.footerC3 {
    text-align: left;
    padding: 0rem 2rem 0rem;
}

.item.copyright {
    text-align: center;
}

/* This is Global */
.item {
    padding: 8px;
    border-radius: 6px;
}

.item.navbar {
    text-align: center;
    margin: 0;
}

.item.p1x1 {
    text-align: left;
    padding: 0rem 2rem 0rem;
}

.item.p1x2 {
    display: block;
    text-align: left;
    border-style: solid;
    border-color: grey;
    border-radius: 25px;
    margin: 3rem 1rem 0rem 1rem;
    padding: 2rem 2rem 2rem 2rem;
    background-color:rgb(0, 0, 90);
}

.item.p1x3 {
    align-items: center;
    text-align: left;
    border-style: solid;
    border-color: grey;
    border-radius: 25px;
    margin: 3rem 1rem 0rem 1rem;
    padding: 2rem;
    background-color:rgb(0, 0, 90);
}

.item.p1x4 {
    display: block;
    text-align: left;
    border-radius: 25px;
    margin: 3rem 1rem 0rem 1rem;
    padding: 2rem 2rem 2rem 2rem;
}

.item.p1x5 {

    align-items: center;
    text-align: left;
    padding: 0rem 2rem 0rem;
}

.item.p1x6 {

    display: block;
    text-align: left;
    border-style: solid;
    border-color: grey;
    border-radius: 25px;
    margin: 3rem 1rem 0rem 1rem;
    padding: 2rem 2rem 2rem 2rem;
    background-color:rgb(0, 0, 90);


    /* align-items: center;
    text-align: center; */
}

.item.p1x7 {

    display: block;
    text-align: left;
    border-style: solid;
    border-color: grey;
    border-radius: 25px;
    margin: 3rem 1rem 0rem 1rem;
    padding: 2rem 2rem 2rem 2rem;
    background-color:rgb(0, 0, 90);

    /* padding: 0rem 2rem 0rem; */
}

/* ********** desktop ********** */

/* =============
index desktop start
============= */

/* =============
index desktop media query
============= */

@media (min-width: 981px) {
    /* =============
    index images - desktop
    ============= */
.imgLogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    max-width: 300px;
}


.imgpCxQR {
    display: block;
    margin: 0rem auto 0rem auto;
    text-align: center;
}


.imgbody1 {
	display: block;
	margin-left: auto;
	margin-right: auto;
	/* width: 90%; */
 	/* size: 5px; */
    align-items: center;
        background-color:rgb(0, 0, 90);
}

/* .imgfoot1 {
    max-width: 100%;
    display: block;
    width: 300px;
    padding: 10;
} */

.imgSpherewithNodes {
    /* max-width: 50%; */
    display: block;
    width: 40%;
        margin-left: auto;
        margin-right: auto;
    /* padding: 10; */
}

.imgdecentralisedIdentfiers {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
}
.imgweb {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
}

.imgapp1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 120%;
}

/* =============
typography - desktop
============= */

body {
    font-size: 1.25rem;
    font-weight: 400;
    background-color: pink;
}

hr {
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 1.25em;
    /* margin-bottom: 1.25em;
    width: 10px;
    height: 10px;
    background-color: #777; */
   }

h1 {
	/* Main Title font size */
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    /* color: #5d82b3; maxim blue */
}

h2 {
	/* Sub Title font size */
    font-size: 1.75rem;
    text-align: center;
    margin: 0;
    /* color: #3d5e8c; delt blue */
}

h3 {
	/* Footer Title font size */
    font-size: 1.3rem;
    margin: 0;
}

h4 {
	/* Footer Text font size */
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: lightgray;
}

h5 {
    /* copyright font size */
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0;
    color: lightgray;
}

a {
    color: lightskyblue;
    /* color: #3d5e8c; */
    font-weight: 700;
    /* text-decoration: none; */
}

/* .item {
    padding: 8px;
    background-color: #000;
    border: 4px solid tomato;
    border-radius: 6px;
} */

/* =============
navigation - Desktop (except for current-page, not required for handheld)
============= */
.current-page {
    color: rgb(4, 244, 4);
    font-weight: 900;
    box-shadow: 0 2px  rgb(4, 244, 4);
    /* margin: 0 1em 0 1rem; */
}

/* ============
navbar & hover
============ */
.navbar a:hover,
.navbar a:focus {
    color: #5d82b3;
    font-weight: 900;
}

/* =============
footer & links
============= */
.footer a:hover,
.footer a:focus {
    color: #5d82b3;;
    font-weight: 900;
}

/* This is driven by the footer hover above  */
/* .footerC2 a:hover,
.footerC2 a:focus {
    color: #5d82b3;
    font-weight: 900;
}
.footerC3 a:hover,
.footerC3 a:focus {
    color: #5d82b3;
    font-weight: 900;
}
.copyright a:hover,
.copyright a:focus {
    color: #5d82b3;
    font-weight: 900;
} */

/* ul {
    display: grid;
    flex-direction: row;
    padding: 0px 0px 0px 30px;
    list-style: none;
} */

    /* =============
    index navigation - desktop
    ============= */
.navbar {
    grid-column: 2 / span 4;
    grid-row: 1;
    margin: 0px 25px 0px 25px;
    /* 1100 */
    /* T R B L */
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-around;



/* This here is testing */
    margin-block-start: 1rem;
    margin-block-end: 1rem;
    margin-inline-start: 1rem;
    margin-inline-end: 1rem;
    padding-inline-start: 0rem;

}

nav li {
    margin: 1.2rem 1.2rem 1.2rem 1.2rem;
    /* margin: 0 1em 0 0; */
    padding: 0 0 0 0px;
}

nav a {
    font-size: 1.5rem;
    font-weight: 700;
}

    /* =============
    index layout - desktop
    ============= */
.header {
    grid-column: 1 / span 1;
    grid-row: 1;
    text-align: center;
}

.headerFrame {
    grid-column: 1 / span 1;
    grid-row: 1;
    text-align: center;
    /* position: absolute; */
    width: 100%;
    height: 100%;
}

.mainwords {
    grid-column: 1 / span 1;
    grid-row: 2;
    text-align: center;
}

.navbar {
    grid-column: 2 / span 3;
    grid-row: 1 / 3;
    text-align: center;
}

.container.header {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-template-areas:
    "header navbar navbar navbar"
    "mainwords navbar navbar navbar";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
    gap: 0px 0px;
    /* background-color: gray; */
    height: 100%;
}

.container.headerFrame {
    display: grid;
    grid-template-rows: repeat(1, auto);
    grid-template-areas:
    "headerFrame navbar navbar navbar";
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    gap: 0px 0px;
    background-color: gray;
}
    .container.index {
        display: grid;
        grid-template-rows: repeat(6, auto);
        grid-template-areas:
        "p1x1 p1x1 p1x1 p1x1"
        "p1x2 p1x2 p1x3 p1x3"
        "p1x4 p1x4 p1x4 p1x4"
        "p1x5 p1x5 p1x6 p1x6"
        "p1x5 p1x5 p1x7 p1x7";
        grid-template-columns: 1fr 1fr 1fr 1fr;
        justify-items: center;
        align-items: center;
        gap: 0px 0px;
    }

    .p1x1 {
        grid-column: 1 / span 4;
        grid-row: 3;
    }

    .p1x2 {
        grid-column: 1 / span 2;
        grid-row: 4;
    }

    .p1x3 {
        grid-column: 3 / span 2;
        grid-row: 4;
    }


    .p1x4 {
        grid-column: 1 / span 4;
        grid-row: 5;
        display: block;
        text-align: left;
        border-radius: 25px;
        width: 90%;
        margin-top: 3rem;
        padding: 2rem 2rem 2rem 2rem;
    }

    .p1x5 {
        grid-column: 1 / span 2;
        grid-row: 6;
        display: block;
        text-align: left;
        border-radius: 25px;
        margin: 3rem 1rem 0rem 1rem;
        padding: 2rem 2rem 2rem 2rem;
    }

    .p1x6 {
        grid-column: 3 / span 2;
        grid-row: 6;
        display: block;
        text-align: left;
        border-style: solid;
        border-color: grey;
        border-radius: 25px;
        margin: 3rem 1rem 0rem 1rem;
        padding: 2rem 2rem 2rem 2rem;
        background-color:rgb(0, 0, 90);
    }

    .p1x7 {
        grid-column: 3 / span 2;
        grid-row: 7;
        display: block;
        text-align: left;
        border-style: solid;
        border-color: grey;
        border-radius: 25px;
        /* height: 400px; */
        /* width: 80%; */
        margin: 3rem 1rem 0rem 1rem;
        padding: 2rem 2rem 2rem 2rem;
        background-color:rgb(0, 0, 90);


    }

    /* 4 columns container.footer created */
    .container.footer {
        display: grid;

        /* grid-template-rows: repeat(2, auto); */

        grid-template-rows: auto auto;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
        "footerC1 footerC2 footerC3"
        "copyright copyright copyright";
        /* justify-items: start;
        align-items:flex-start; */
        gap: 0px;
        width: 100%;
    }

    .footerC1 {
        grid-column: 1 / span 1;
        grid-row: 1;
        justify-self: stretch;
        align-self: start;
    }

    .footerC2 {
        grid-column: 2 / span 1;
        grid-row: 1;
        justify-self: stretch;
        align-self: start;
    }

    .footerC3 {
        grid-column: 3 / span 1;
        grid-row: 1;
        justify-self: stretch;
        align-self: start;
    }

    .copyright {
        grid-column: 2 / span 1;
        grid-row: 2;
        /* width: 100%; */
        justify-items: center;
        /* align-items: center; */
        text-align: center;
    }


/* =============================================
i-ir.html
============================================= */


/* ========
body / setup
========= */
/* body.i-ir {

    color: snow;
    font-size: 3rem;
    font-weight: 400;
    background-color: #333333;
    margin: 0 auto;
    max-width: 1200px;
} */

.imgiir1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
        /* max-width: 500px; */
}

.imgiir2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
        /* max-width: 500px; */
}

/* =============
i-ir typography - handheld
============= */


/* =============
i-ir layout - handheld
============= */
.container.i-ir {
    display: grid;
    grid-template-rows: repeat(9, auto);
    gap: 5px;
}

.item.p4x0 {
    display: flex;
    text-align: center;
    /* justify-content: center; */
}
.item.p4x1 {
    text-align: left;
    padding: 0rem 2rem 0rem;
}

.item.p4x1a {
    display: flex;
    justify-content: center;
}

.item.p4x2 {
    display: flex;
    justify-content: center;
}

.item.p4x3 {
    align-items: center;
    text-align: left;
    padding: 0rem 2rem 0rem;
}

.item.p4x4 {
    display: flex;
    justify-content: center;
}

.item.p4x5 {
    align-items: center;
    text-align: left;
    padding: 0rem 2rem 0rem;
}

.item.p4x6 {
    display: flex;
    justify-content: center;
}

.item.p4x7 {
    align-items: center;
    text-align: left;
    padding: 0rem 2rem 0rem;
}

.item.p4x8 {
    display: flex;
    justify-content: center;
}

.item.p4x9 {
    align-items: center;
    text-align: left;
    padding: 0rem 2rem 0rem;
}

/* =============
i-ir desktop start
============= */

/* =============
i-ir desktop media query
============= */

@media (min-width: 981px) {
/* =============
i-ir images - desktop
============= */
.imgLogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    max-width: 300px;
}

.imgiir1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
        /* max-width: 500px; */
}

.imgiir2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
        /* max-width: 500px; */
}

/* .imgfoot1 {
    max-width: 100%;
    display: block;
    width: 100px;
} */

/* body.i-ir {
    font-size: 1.25rem;
    font-weight: 400;
} */

/* =============
i-ir typography - desktop
============= */


/* =============
i-ir layout - desktop
============= */
.container.i-ir {
    display: grid;

    grid-template-rows: repeat(9, auto);

    grid-template-areas:
    "p4x0 p4x0 p4x0 p4x0"
    "p4x1 p4x1 p4x1 p4x1"
    "p4x1a p4x1a p4x1a p4x1a"
    "p4x2 p4x3 p4x3 p4x3"
    "p4x4 p4x5 p4x5 p4x5"
    "p4x6 p4x7 p4x7 p4x7"
    "p4x8 p4x9 p4x9 p4x9";

    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
    gap: 0px 0px;
}

.p4x0 {
    grid-column: 1 / span 4;
    grid-row: 3;
}

.p4x1 {
    grid-column: 1 / span 4;
    grid-row: 4;
}

.p4x1a {
    grid-column: 1 / span 4;
    grid-row: 5;
}

.p4x2 {
    grid-column: 1 / span 1;
    grid-row: 6;
}

.p4x3 {
    grid-column: 2 / span 3;
    grid-row: 6;
}

.p4x4 {
    grid-column: 1 / span 1;
    grid-row: 7;
}

.p4x5 {
    grid-column: 2 / span 3;
    grid-row: 7;
}

.p4x6 {
    grid-column: 1 / span 1;
    grid-row: 8;
}

.p4x7 {
    grid-column: 2 / span 3;
    grid-row: 8;
}

.p4x8 {
    grid-column: 1 / span 1;
    grid-row: 9;
}

.p4x9 {
    grid-column: 2 / span 3;
    grid-row: 9;
}
}



/* =============================================
i-contact.html
============================================= */

/* ========
i-contact body / setup
========= */
/* body.contact {

    color: snow;
    font-size: 3rem;
    font-weight: 400;
    margin: 0 auto;
    max-width: 1200px;
} */


/* =============
i-contact typography - handheld
============= */



/* =============
contact layout - handheld
============= */
.container.contact {
    display: grid;
    grid-template-rows: repeat(3, auto);
    gap: 5px;
}

.item.p5x1 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.item.p5x2 {
    display: flex;
    align-items: center;
    text-align: left;
    /* margin: 15px; */
}

.item.p5x3 {
    display: flex;
    align-items: center;
    text-align: left;
    margin: 15px;
}

/* ********** desktop ********** */

/* =============
contact desktop start
============= */

/* =============
contact desktop media query
============= */

@media (min-width: 981px) {
    /* =============
    contact images - desktop
    ============= */
    .imgLogo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 70%;
        max-width: 300px;
    }

    /* .imgfoot1 {
        max-width: 100%;
        display: block;
        width: 100px;
    } */

    /* body.contact {
        font-size: 1.25rem;
        font-weight: 400;
    } */

/* =============
contact typography - desktop
============= */


/* =============
contact layout - desktop
============= */
.container.contact {
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-template-areas:
    "p5x1 p5x1 p5x1 p5x1"
    "p5x2 p5x2 p5x2 p5x2"
    "p5x3 p5x3 p5x3 p5x3";

    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
    gap: 0px 0px;
}

/* ===
.container.contact {
    display: grid;
    column-width: 100%;
    background-color: tomato;
    grid-template-rows: repeat(3, auto);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
    "p5x1 p5x1 p5x1 p5x1"
    "p5x2 p5x2 p5x2 p5x2"
    "p5x3 p5x3 p5x3 p5x3";

    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
    gap: 0px 0px;
} */

.p5x1 {
    grid-column: 1 / span 4;
    grid-row: 1;
}

.p5x2 {
    grid-column: 1 / span 4;
    grid-row: 2;
    width: 70%;
    align-items: center;
    text-align: justify;
}

.p5x3 {
    grid-column: 2 / span 2;
    grid-row: 3;
}
}


/* =============
const (construction page) desktop start
============= */

/* =============
const (construction page) desktop media query
============= */

@media (min-width: 981px) {
/* =============
const (construction page) images - desktop
============= */
/* .imgLogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    max-width: 300px;
}
    */
/* body.const {
    font-size: 1.25rem;
    font-weight: 400;
} */

.container.const {
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-template-areas:
    /* "header header header header"
    "navbar navbar navbar navbar" */
    "pconstx1 pconstx1 pconstx1"
    "pconstx2 pconstx2 pconstx2"
    "pconstx3 pconstx3 pconstx3";

    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
    gap: 0px 0px 0px;
}

.pconstx1 {
    grid-column: 1 / span 3;
    grid-row: 1;
}

.pconstx2 {
    grid-column: 1 / span 3;
    grid-row: 2;
}

.pconstx3 {
    grid-column: 1 / span 3;
    grid-row: 3;
}

    /* =============
    apps images - desktop
    ============= */
/* removed img code & placed above*/

/* body.apps {
    font-size: 1.25rem;
    font-weight: 400;
} */

.container.apps {
    display: grid;
    grid-template-rows: repeat(6, auto);
    grid-template-areas:
    "pappsx0 pappsx0 pappsx0 pappsx0"
    "pappsx1 pappsx1 pappsx1 pappsx1"
    "pappsx2 pappsx3 pappsx3 pappsx3"
    "pappsx4 pappsx5 pappsx5 pappsx5"
    "pappsx6 pappsx7 pappsx7 pappsx7"
    "pappsx8 pappsx9 pappsx9 pappsx9";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
    gap: 0px 0px;
}

.pappsx0 {
    grid-column: 1 / span 4;
    grid-row: 1;
}

.pappsx1 {
    grid-column: 1 / span 4;
    grid-row: 2;
}

.pappsx2 {
    grid-column: 1 / span 1;
    grid-row: 4;
}

.pappsx3 {
    grid-column: 2 / span 3;
    grid-row: 4;
}

.pappsx4 {
    grid-column: 1 / span 1;
    grid-row: 5;
}

.pappsx5 {
    grid-column: 2 / span 3;
    grid-row: 5;
}

.pappsx6 {
    grid-column: 1 / span 1;
    grid-row: 6;
}

.pappsx7 {
    grid-column: 2 / span 3;
    grid-row: 6;
}

}