/*  I N D E X
________________________________________________

- text
- decorative
- borders

- Intro
- Qualifications
- Menu
- About

- Projects

- Effects
________________________________________________
*/


/*
OKLCH
*/



.txt-light {color:var(--light);}
.fill {width:100%;height:100%;}


html {
 font-size:15px;
 font-family: "Montserrat", sans-serif;
 font-weight:300;
 font-style: normal;
 line-height:1.8rem;
 letter-spacing:.03rem;
 /*background-color: var(--middark);*/
}
.Exo {font-family:"Exo 2", "Exo 2.0"}
.Montserrat {font-family: "Montserrat", sans-serif;}
.Baskerville { font-family: "Baskerville"}
.MrsEaves {font-family: "Mrs Eaves"}

html, body, main, section {
 flex-direction:column;
 position:relative;
 width:100%;
 justify-content:center;
}
section, .CTNR {
 flex-direction:column;
 display:flex;
 height:auto;
}
.CTNR {
 position:relative;
 margin:0 auto !important;
 width:100%;
 max-width:1120px;
}


html, body {
 height:100%;
}
header {
 padding:2rem;
 width:100%;
 color:var(--light);
}
header * {
 width:100%;
}

nav.top {
 font-weight:300;
 letter-spacing:.1rem;
 background-color:hsla(var(--hA), var(--snLower), var(--dark), .78);
}
nav.top li {
 padding:0 1rem 0 1rem;
}

footer {width:100%;}

footer.nav .brand .name {

}

footer ul li {
 padding:.33rem 0 .33rem 0;
 font-weight:400;
}
footer ul li:hover {
 color:var(--white);
 font-weight:500;
}
footer ul > li:first-child {
 margin-bottom:.5rem;
 text-transform: uppercase;
 letter-spacing:.12rem;
 font-weight:800;
 color:var(--black);
}
footer ul > li:first-child:hover {
 color:var(--black);
}

h1 img.Exo {height:5rem;width:auto;max-width:900px;}
h2 img.Exo {height:2rem;width:auto;max-width:900px;}

h1 img.MrsEaves {height:9rem;width:auto;max-width:900px;}
h2 img.MrsEaves {height:2rem;width:auto;max-width:900px;}

h1, h2 {font-weight:200;}

h3 svg {height:2.7rem;width:auto;}

span svg {height:1.5rem;width:auto;}
svg {
 position:relative;
 pointer-events:auto; /* Allow interactions */
}
#logo {
 position:relative;left:.24rem;
 width:.72rem;
}
#logo svg {width:100%; height:auto;}
h3#logo {width:1rem}

section.shadow {box-shadow:0 12px 9px 0 hsl(60 18% 24%);}

.card.shadow{box-shadow:1px 2px 12px 1px hsla(var(--ablack),.27);}

section.CTNReader {
 width:100%;
 align-items: center;
}

section#intro,
section#contact,
section#qual,
section#menu {z-index:10;}

figure figcaption {
 padding:.25rem 0 1rem .5rem;
 font-size: .857rem;
 text-transform: uppercase;
 font-weight: 400;
 letter-spacing:0;
}

figure.frame {
 border:1px solid #DDD;
 box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);
 border-radius:12px;
}




section#intro #title img.Exo {display:none;}
section#intro #title.MrsEaves {display:flex;}


/*

- QUALIFICATIONS

------------------------>>  */
section#qual .card {
 overflow:hidden;
 width:100%;max-width:1050px;
}
section#qual #header #date,
section#qual #header #edu {flex:0 0 auto;} /* width by content */
section#qual #header #dash {flex:1 1 auto;} /* fill space */

section#qual #adjust.field {
 position:relative;top:-.5rem;
 line-height:1.5rem;
}
section#qual #body #dynamic {
 width:200%;position:relative;z-index:10;}
section#qual #body #dynamic a {
 text-decoration:underline;
 text-underline-offset:4px;
 text-decoration-thickness:2px;
}

section#qual #body #dynamic ul {
 display:none;
 position:absolute; left:0;

 font-size:.9rem;
 font-weight:400;
 font-style:italic;
 text-transform:none;
}
section#qual #body #dynamic .group:hover ul {
 display:block;
}
section#qual #body #dynamic .default {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition: opacity 0.2s ease;
}
section#qual #body #dynamic .flex:hover .default-list {
  opacity: 0;
  visibility: hidden;
}
section#qual #body #dynamic .flex:not(:hover) .default-list {
  opacity: 1;
  visibility: visible;
}

section#qual #body #dynamic li {
 padding:0;
 padding-bottom:-.5rem;
}
section#qual #footer span#adjust {
 position:relative;bottom:1.2rem;
 line-height:1.2rem;
}
section#qual #footer div#barcodeA {
 height:1rem;
}
section#qual #footer div#barcodeA div {
 border-color:hsl(var(--dark))!important;
 height:1rem;
}
section#qual #footer div#barcodeB {
 width:1rem;height:1rem;
 right:0;
}
section#qual #disk {width:120px;height:120px;}

section#qual .field.label {
 color:var(--darker);
}

section#qual .field.input {
 background-color:var(--black);
 color:var(--white);
 cursor:pointer;
}
section#qual .field.input #stmnt {
 top:0;transform:translateY(-100%);
 align-items:flex-start;
}
section#qual .field.input #stmnt svg {height:.75rem;}
section#qual .card #text {
 top:1rem;right:-12%;
}

.field.input,
.field.label {
 padding:calc(var(--spacer)*.5) var(--spacer); /* p-2 p-3 */
 margin-bottom:4px;
 border:2px solid transparent;

}
.field.input {
 background-color:var(--black);
 color:var(--white);
 border-radius:4px;
 border-color:var(--white);
}


/*

- MENU

------------------------>>  */
section#menu ul {
 height:78%;
 padding:0 9%;
}
section#menu ul li {
 padding:4% 0;
}
section#menu ul li svg {
 display:block;
 width:100%;max-width:450px;
 height:auto;
}
section#menu ul a:hover li {
 color:var(--white);
}




/*

- ABOUT

------------------------>>  */
section#about {
 height:auto;
 background-color:var(--middark);
 border-top:1px solid var(--light);
 border-bottom:1px solid var(--light);
}
section#about h3 {padding-top:50px;}
/* Dependencies <–– circle_tab */


/*

- PROJECTS

------------------------>>  */
section#projects figure .thumb {
 box-shadow:0 0 .3rem 0 rgba(0, 0, 0, 0.2);
}
section#projects figure figcaption {
 display:flex;
 margin-top:.6rem;
}
section#projects figure figcaption span {
 margin-left:auto;
 padding:0 .4rem;
 max-height:1.5rem;
 font-size:.66rem;
 font-weight:500;
 color:var(--lighter);
 background-color:var(--neutral);
 border-radius:6px;
}
section#projects .thumb {
 width:100%;
 aspect-ratio: 16 / 9;
 border:1px solid var(--light);
 border-radius:12px;
}
section#projects figure {
 margin:1rem 1rem 0 1rem;
}


/*

- PROJECT

------------------------>>  */
body.project {
 background-color:var(--neutral);
}
body.project header {
 letter-spacing:.06rem;
}
.project section {
 align-items: center;
}
section.project .CTNR {
 width:90%;

 margin-bottom:4.25rem!important;
 margin-top:4.25rem!important;

 padding-bottom:5rem;
 padding-top:5rem;
 /*max-width:1120px;*/
 align-items:center;
 border-radius:12px;
 overflow:hidden;
 box-shadow:0 0 1rem 0 rgba(0, 0, 0, 0.2);
}
section.project > .CTNR:first-child {
 margin-top:0!important;
 padding-top:0!important;
}
section.project .CTNR > .slide:first-child {
 padding-top:0;
}
section.project .CTNR.clip-top {
 padding-top:0;
}
section.project .CTNR.clip-btm {
 padding-bottom:0;
}

section.project figure {
 width:100%;
 margin:0;
 overflow: hidden;
}
section.project figure.frame {
 width:calc(100% - 12rem);
 margin:1rem;
}
section.project img {
 width:100%;
}


section.project .space {
 width:100%; height:6rem;
}


section.project .slide {
 padding:4rem;
 width:100%;max-width:900px;
 border:none;
 box-shadow:none;
 font-size:1.3rem;
 line-height:2.4rem;
}
section.project .slide.pop {
 max-width:none;
}
section.project .slide .spacing {
 padding-top:2rem;
 padding-bottom:5rem;
 background-color:transparent;
 border:none;box-shadow:none;
}



.svg-container {
 position:relative;
 pointer-events:auto; /* Allow interactions */
 display:flex;
 justify-content:center;align-items:center;
 height:100%;
}
.svg-container svg {
 width:100%!important;height:auto;
 max-height: none !important;
}

.overlay-centre {
 position:absolute;z-index:0;
 bottom:50%;right:50%;
 transform:translate(50%,50%);
 background-repeat:no-repeat;
}


.lens.MULTI-dark {
 mix-blend-mode:multiply;
 background-color: hsl(var(--dark));
}

.overlay-texture {
 position:absolute;
 left:0;right:0;top:0;bottom:0;
 background-color:transparent;
 background-repeat:repeat;
 width:100%;height:100%;
}
.overlay-texture#t01 {
 background-image: url('/D/texture/01.png');
 background-size:200px 196px;
}
.lens#rays {
 background-size:200%;
 background-position: center;
}

section#intro #logo-area {
 width:144px;height:144px;
}
section#intro #contact {
 top:calc(66% + 100px + 0%);
 width:100%;height:72px;
}
section#intro #contact img {
 height:18px;
}
section#intro #contact #bg {
 width:100%;height:100%;
 border-top:1px solid white;
 border-bottom:1px solid white;
 background:linear-gradient(to right, #3D3D3D 0%, #3D3D3D 100%);
 opacity:0.1;
}


.circle_tab {
 position:absolute;
 left:50%;
 transform: translate(-50%, -50%);
 width:100px;height:100px;
 border-radius:50%;
}
.circle_tab#border {
 border:1px solid var(--light);
 width:101px;height:101px;
}
.circle_tab#fill {
 background-color: var(--middark);
 width:99px;height:99px;
}

/* - decorative */

.line {
 width:50%;
 margin-left:25%;
 margin-top:2rem;
 margin-bottom:2rem;
}
.line.horizon {
 border-bottom:1px solid transparent;
}
.line.vertical {
 height:100%;
 border:left:2px solid transparent;
}

.separation-text {

}

header .separation-text {
 margin-top:.12rem;
 margin-bottom:.12rem;
 margin-left:0;
 width:100%;
}


div.line.CTNRorizontal {
 border-bottom:2px solid transparent; width:100%;}

div.line.white {border-color:hsl(var(--white));}
div.line.lighter {border-color:hsl(var(--lighter));}
div.line.light {border-color:hsl(var(--light));}
div.line.midlight {border-color:hsl(var(--midlight));}
div.line.neurtal {border-color:hsl(var(--neutral));}
div.line.middark {border-color:hsl(var(--middark));}
div.line.dark {border-color:hsl(var(--dark));}
div.line.darker {border-color:hsl(var(--darker));}
div.line.black {border-color:hsl(var(--black));}





/* - text */

span.bold {font-weight:700; }

span.dark {color:var(--dark); }





/* - Projects */
/*

- aplokinshp
- drivingreport

*/


section.project#aplokinshp .CTNR {
 background-color:#7A9FC7;
 background-color:hsl(210 30% 56%);
 color:#FFF;
}

section.project#drivingreport .CTNR {
 background-color:hsl(210 3% 91%);
 font-weight:400;
}


section.project#drivingreport h1,
section.project#drivingreport h2,
section.project#drivingreport h3 {
 color:#2b317f;
 padding-top:4rem;
}

section.project#drivingreport h2 {
 width:90%;
 font-weight:700;
 padding-bottom:1.2rem;
 border-bottom:2px solid #2b317f;
 margin-bottom:4rem;
}
section.project#drivingreport h3 {}

section.project#drivingreport {
 font-weight:300;
}

section.project#drivingreport .slide.pop {
 color:#DDD;
 background-color:#2B317F;
}
section.project#drivingreport .slide.pop h2 {
 color:#DDD;
 border-bottom:none;
}
section.project#drivingreport .bar {
 padding:.5px;
}
section.project#drivingreport figure {
 background-color: #B3B5D1;
}


/* - Effects */


#alert_clickCopy {
 font-size:1.72rem;
 letter-spacing:.1rem;
}
.inlineIcon-medium svg {
 width:3.5rem;height:auto;
 margin:0 2rem;
}

.lens.hide {
 visibility: hidden;
 opacity: 0;
 transition: opacity 0.3s ease, visibility 0.2s;
}
.lens.show {
 visibility: visible;
 opacity: .9;
}

.cssMask::after {
 content: "design\40 dremyad.com"; /* Hex code for @ is \40 */
}





@media (min-width: 768px) { /* - break.md */

 section#intro #contact {
  top:calc(79% + 100px + 0%);
  width:100%;height:72px;
 }

 section#about {display:none}

 section#projects a {width:50%;}


} /* 768 */






@media (min-width: 992px) { /* - break.lg */


 section#intro h1 img {
  width:80%;max-width:890px;
 }

 section#projects a {
  width:33%;
 }

} /* break.lg */






@media (min-width: 1200px) { /* - break.xl */



} /* break.xl */






@media (min-width: 1400px) { /* - break.xxl */

 section#projects a {
 }

} /* break.xxl */