@charset "UTF-8";
/* CSS Document */
:root {
	--color-text: #222222;
	--color-fog: #f0f0f0;
    --color-rain: #E4E4E4;
	--color-mist:#AFAFAF;
	--color-slate: #545D6A;
    --color-charcoal: #2E2E2E;
	--color-midnight: #011a1d;
    --color-sageLight:#B4CBCE; 
	--color-sage:#96AEAE;
    --color-sageDark:#8DA1A1;
    --color-sageDarker:#758686; 
    --color-forestgreen:#173527   ;
    --color-forestgreenDark:#122a1f;
    --color-forestgreenDarker:#0e2017; 
    --color-sands:#C8B6A2   ;
    --color-sandsDark:#a09282;
    --color-sandsDarker:#786d61; 
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
    --spacing-1:1rem;
    --spacing-2:2rem;
    --spacing-3:3rem;
    --v-padding-sm: calc(1 * var(--spacingunit-1));
}
html {
    scroll-behavior: smooth;
  }
.img-contained{
  height: auto;
  width: 100%;
}
.dashed-divider{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex: 1 1 1;
    height:100%;
    max-height:31px;
    margin:2rem 0 2rem;
}
.dashline{
    border: none;
    width:105%;
    height: 1px;
    background: repeating-linear-gradient(90deg,#000,#000 6px,transparent 6px,transparent 12px);
}
.divider-left {
    margin-left:-16px;
    margin-top:4px;
}
.divider-right {
    margin-right:-16px;
    margin-top:4px;
}

/* Layouts */
.content{
    width: clamp(8rem, 90vw, 100rem);
    margin: 0 auto;
    padding:2rem 0;
}
.content-5050 {
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-column-gap: 24px;
}
.content-6040 {
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 60% 40%;
    grid-column-gap: 24px;
}
.content-4060 {
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 40% 60%;
    grid-column-gap: 64px;
    
}
.align-center{ 
    align-items: center;
    justify-items: center;
}
.align-top{
    align-items: top;
    justify-items: center;
}
.center{
    margin: 0 auto;
    display:flex;
    flex-direction: column;
    align-items: center;
}
.left{
    display:flex;
    flex-direction: column;
    align-items: flex-start;
}
.right{
    display:flex;
    flex-direction: column;
    align-items: flex-end;

}
.col-3, .col-3-np{
    display:flex;
    flex-wrap: nowrap;
    gap: 24px;
}
    /* individual columns */
.col-3 > * {
    width:100%;
    padding:1rem;
}
.col-3-np > * {
    width:100%;
    padding:0;
}

/* tablet breakpoint */
@media (min-width:768px) {
    .col-3 > * {
        width:calc(100% / 3);
        flex-wrap: nowrap;
    }
}

@media (max-width: 640px) {
    .content-5050, .content-6040 {
        grid-template-columns: 100%;
    }
}

/* vertical spacing */
    .spacing-tb-2{
        padding:2rem 0;
    }
    .spacing-3{
        padding-top:3rem;
    }
    .spacing-tb-3{
        padding:3rem 0;
    }
    .spacing-b-3{
        padding:0 0 3rem 0;
    }
    .spacing-t-4{
        padding-top:4rem;
    }
    .spacing-b-4{
        padding-bottom:4rem;
    }
    .spacing-tb-4{
        padding:4rem 0;
    }
    .spacing-t-6{
        padding-top:6rem;
    }
    .spacing-b-6{
        padding-bottom:6rem;
    }
    .spacing-tb-6{
        padding:6rem 0;
    }
    .spacing-b-8{
        padding-bottom:8rem;
    }
/* horizontal spacing */
    .sidespace-2{
        padding: 0 2rem;
    }
    .sidespace-3-r{
        padding: 0 3rem 0 0;
    }

/* background color styles */
.fog{
    background-color: var(--color-fog);
}
.radial-grad{
    padding:4rem;
    background: radial-gradient(ellipse at 50% 0%, #949494, #d0d6d5 56.4%, #f0f0f0);
    border-radius:2rem;
    margin: 3rem 0 0 0;
}

.radial-grad-sm{
    padding:1.5rem;
    background: radial-gradient(ellipse at 50% -25%, #d0d6d5,#E0E3E3 56.4%, #f0f0f0);
    border-radius:1.125rem;
    margin: 0 0 0 0;
}
.white-to-fog{
    background: linear-gradient(#FFFFFF,#F0F0F0);
}
.fog-to-white{
    background: linear-gradient(#F0F0F0,#FFFFFF);
}


@media (max-width: 800px) {
    .radial-grad{
        padding:2rem;
        border-radius:2rem;
        margin: 2rem 0;
    }
}

/* home - overview styles */
.traits{
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding:3rem 0 0 0;
}
.trait{ 
    font-size:2.5rem;
    line-height: 1.15em;
    padding:.5rem 1.25rem .75rem 1.25rem;
    border-radius: 2rem;
    border:1px solid var(--color-midnight);
    text-align: center;
}
marquee {
    font-size:5rem;
    color:var(--color-mist);
    line-height:1em;
}



@media (max-width: 640px) {
    marquee {
        font-size:2.5rem;
    }
}
/* portfolio */
.portfolio{
    background:  url("../img/bkg-pattern-noisy_grid.jpg") #9BADB0 repeat fixed center;
    background-blend-mode: multiply;
}