/* Homepage */
/* General */
body {
    background-color: var(--col-drk);
    color: var(--col-brt);
}

footer {
    background-color: var(--col-brt);
    color: var(--col-drk);
}

ul {
    padding: 0pt;
    list-style-type: none;
}

/* Logo & title */
#navlogo, #navtitle {
    position: absolute;
    /* Dynamic scroll display. */
    opacity: 0;
    transition: all var(--tsn-dur) var(--tsn-eas);
}

/* Sections */
/* Header */
header {
    display: grid;
    width: 100vw;
    max-width: 100%;
    text-align: center;
    padding: 0;
}

header .wrapp {
    width: 600pt;
    max-width: calc(100% - (var(--lay-nvh) * 1.5));
    margin: auto;
    padding: calc(var(--lay-nvh) * 3) 0 calc(var(--lay-nvh) * 3) 0;
}

@media only screen and (max-width: 800px) {
    header .wrapp {
        width: calc(100% - (var(--lay-nvh) * 1.5));
    }
}

header p {
    text-align: var(--fnt-txa);
}

header.h1 {
    font-size: 0pt;
    margin: 0;
}

#Welcome h2 {
    margin: 3em 0 1em 0;
}

#Concept li img {
    width: 100%;
}

#Services li, #Contact li {
    display: inline-block;
    vertical-align: top;
}

#Contact li {
    width: 60pt;
    max-width: calc(100% - (var(--lay-nvh) * 0.5));
    margin: calc(var(--lay-nvh) * 0.25) calc(var(--lay-nvh) * 0.25) calc(var(--lay-nvh) * 0.25) calc(var(--lay-nvh) * 0.25);
    text-align: center;
}

#Contact ul {
    margin: calc(var(--lay-nvh) * 1) calc(var(--lay-nvh) * 0) calc(var(--lay-nvh) * 1) calc(var(--lay-nvh) * 0);
}

#Contact li img {
    display: inline-block;
    width: 40pt;
}

#Contact li a {
    display: inline-block;
    font-size: 0pt;
    border-radius: 50%;
    overflow: hidden;
    line-height: 1em;
}

#Areas li {
    display: inline-block;
    width: 142.5pt;
    max-width: calc(100% - (var(--lay-nvh) * 1.4));
    margin: var(--lay-nvh) calc(var(--lay-nvh) * 0.70) var(--lay-nvh) calc(var(--lay-nvh) * 0.70);
    text-align: center;
}

#Areas h3 {
    margin: -17pt 0pt 0pt 0pt;
    font-size: 1em;
}

@media only screen and (max-width: 470px) {
    #Areas li {
        width: 100%;
    }
}

.profile {
    margin: var(--lay-nvh) calc(var(--lay-nvh) * 0.5) var(--lay-nvh) calc(var(--lay-nvh) * 0.5);
    text-align: center;
}


/* WebGL */
.wGLinstCnt, header h1 .wGLinstCnt, .profile .wGLinstCnt{
    display: inline-block;
}

#Areas .wGLinstCnt, #Services .wGLinstCnt, #Concept .wGLinstCnt {
    width: 100%;
    max-width: 70vw;
    aspect-ratio: 1 / 1;
}

header h1 .wGLinstCnt {
    width: 50vw;
    min-width: 120pt;
    max-width: 600pt;
    aspect-ratio: 1 / 1;
}

.profile .wGLinstCnt {
    width: 142.5pt;
    max-width: calc(100% - (var(--lay-nvh) * 1));
    aspect-ratio: 1 / 1;
    border-radius: 100%;
}

#profilePicture {
    overflow: hidden;
}

@media only screen and (max-width: 600px) {
    .profile .wGLinstCnt {
        width: 100pt;
    }
}