/* Box sizing rules */
*, *::before, *::after { box-sizing: border-box; }

/* Remove default padding */
ul[class], ol[class] { padding: 0; }

/* Remove default margin */
body, h1, h2, h3, h4, p, ul[class], ol[class], figure, blockquote, dl, dd { margin: 0; }

/* Set core root defaults */
html { scroll-behavior: smooth; }

/* Set core body defaults */
body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; }

/* Remove list styles on ul, ol elements with a class attribute */
ul[class], ol[class], li[class] { list-style: none; }

/* A elements that don't have a class get default styles */
a:not([class]) { text-decoration-skip-ink: auto; }

/* Make images easier to work with */
img, picture { max-width: 100%; display: block; }

/* Natural flow and rhythm in articles by default */
article > * + * { margin-top: 1em; }

/* Inherit fonts for inputs and buttons */
input, button, textarea, select { font: inherit; }

/* Blur images when they have no alt attribute */
img:not([alt]) { filter: blur(10px); }

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar { display: none; }

/* Hide scrollbar for IE, Edge and Firefox */
* { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }

/* Deafult list */
ul { margin: 0; padding: 0; height: 0; }

ol { padding: 0; }

/* Deafult button styling */
button { cursor: pointer; background-color: transparent; padding: 0; border: none; }

/* input styling */
input { background-image: none; background-color: var(--background); border: 1px solid #9D9D9D; color: inherit; font: inherit; margin: 0; outline: 0; padding: 0; transition: background-color 0.3s; width: 104%; transform: translateX(-0.44em); }

.form input[type="name"], .form input[type="email"], .form input[type="message"], .form input[type="submit"] { inline-size: 100%; }

input[type="text"]:focus, input[type="text"]:hover, input[type="email"]:focus, input[type="email"]:hover { background-color: #d8d8d8; }

textarea { background-color: var(--background); border: 1px solid #9D9D9D; }

input, textarea { padding: .3em .4em; }

:root { --base-color: #EDE8DE; --type-color: #1C1C1E; --button-color: #BEBEBE; --svg-color: none; --foreground: var(--type-color); --background: var(--base-color); }

.darkmode { --base-color: #b4b3b2; --type-color: #1C1C1E; --button-color: #969696; --svg-color: invert(85%) sepia(8%) saturate(45%) hue-rotate(349deg) brightness(85%) contrast(86%); --foreground: var(--base-color); --background: var(--type-color); }

@font-face { font-family: "gt-zirkon"; src: url("GT-Zirkon-Thin.woff2") format("woff2"), url("GT-Zirkon-Thin.woff") format("woff"); font-weight: thin; }

h1, h2, h3, h4 { font-family: "gt-zirkon"; text-transform: uppercase; font-weight: 100; }

h1 { font-size: clamp(1rem, 2vw, 1.5rem); line-height: calc(max(2.1vw, 1.2rem)); }

h2 { font-size: clamp(1.2rem, 3vw, 2rem); }

.project-title-single h2 { font-size: clamp(1.1rem, 2vw, 2rem); }

h3 { font-size: clamp(0.8rem, 1vw, 1.5rem); line-height: 1rem; }

h4 { font-size: 1.2rem; }

p { color: var(--foreground); font-family: "gt-zirkon"; font-size: .75rem; }

a { color: var(--foreground); text-decoration: none; }

a:hover { color: #666565; }

ol { color: var(--foreground); font-family: "gt-zirkon"; }

.project-number { color: var(--foreground); font-family: "gt-zirkon"; }

.header, .page-header { padding: 2em; }

.header { padding-bottom: 0; }

.logo, .page-logo { padding-bottom: 1em; font-family: brandon-grotesque, sans-serif; font-weight: 300; font-style: normal; text-transform: uppercase; letter-spacing: .7rem; font-size: clamp(0.7rem, 1.3vw, 1.5rem); white-space: nowrap; }

.page-logo a:hover { color: var(--typecolor); }

.header-info, .page-info { width: 230px; }

@media screen and (min-width: 768px) { .header, .page-header { display: flex; justify-content: space-between; text-align: right; padding: 3em; } .logo, .page-logo { letter-spacing: 1rem; } }

@media screen and (min-width: 1280px) { .svg-logo { width: 400px; } .header-info, .page-info { width: 300px; } }

/* landing animation */
.landing-container { width: 100%; position: absolute; top: 0; }

.landing-container { align-items: center; background: var(--base-color); display: flex; height: 100vh; justify-content: center; left: 0; position: fixed; top: 0; transition: opacity 1s linear; width: 100%; z-index: 9999; pointer-events: none; }

.landing-logo { display: flex; justify-content: center; align-items: center; height: 100vh; }

/*---coming soon---*/
.project-title:hover h2 a { display: none; }

.title-0:hover h2 a, .title-2:hover h2 a, .title-4:hover h2 a, .title-6:hover h2 a, .title-14:hover h2 a, .title-10:hover h2 a, .title-12:hover h2 a { display: block; }

.project-title:hover span h2:before { content: "Coming Soon"; }

.title-0:hover span h2:before, .title-2:hover span h2:before, .title-4:hover span h2:before, .title-6:hover span h2:before, .title-14:hover span h2:before, .title-10:hover span h2:before, .title-12:hover span h2:before { content: none; }

.project-title { width: 100%; }

/*-----welcome-----*/
.welcome-container, .about-welcome-container { padding: 2em; }

.welcome-gallery, .about-welcome-image { position: relative; width: 100%; }

.welcome-gallery img { display: none; }

.welcome-gallery img.active { animation-name: galleryFade, activeFadeOut; animation-duration: 2.5s, .3s; animation-timing-function: ease-out; animation-delay: 0s, 4.7s; animation-direction: alternate; display: block; }

@keyframes galleryFade { from { opacity: 0; }
  to { opacity: 1; } }

@keyframes activeFadeOut { from { opacity: 1; }
  to { opacity: 0; } }

.slider-nav { display: none; }

.slider-nav ul { display: flex; justify-content: space-between; }

button { filter: var(--svg-color); }

button.previous { transform: rotate(180deg) translateY(5px); }

.welcome-bio, .about-welcome-text { padding-top: 2em; }

/*-----end welcome-----*/
/*-----projects-----*/
.project-nav-container { padding-top: 8em; padding-bottom: 12.4em; }

.page-navigation { padding-top: 16.9em; }

.project-nav-container ol { list-style-type: decimal-leading-zero; }

.project-nav-container ol li { padding: .5em 0 .5em 2em; border-top: 1px solid #9D9D9D; }

.project-nav-container ol li:last-child { border-bottom: 1px solid #9D9D9D; }

li.project-data, li.page-data { display: flex; }

.project-number { padding-right: 1em; align-self: flex-end; }

.project-feature { opacity: 0; position: absolute; transform: translateY(-50%); width: 30%; right: 3em; transition: opacity .55s ease-in-out; background: #EDE8DE; }

.page-feature { width: 25%; }

.item-9, .item-19, .item-21, .item-23, .item-25, .item-27, .item-29, .item-17 { filter: blur(1rem); }

.project-title:hover + .project-feature, .page-title:hover + .project-feature { opacity: 1; transition: opacity .45s ease-in-out; }

/*-----end projects-----*/
/*-----footer-----*/
.footer-container { padding-top: 2em; padding: 2em; }

.footer-links { padding-bottom: 1em; }

.footer-links.contact { cursor: pointer; }

.section { padding-bottom: 2em; }

.osd-logo-container { padding: 2em; }

.osd-logo { display: flex; justify-content: center; }

.osd-logo svg { width: 50px; animation: logoRotate 3s linear infinite; filter: var(--svg-color); }

.header-logo svg { display: none; }

.osd-logo svg:hover { cursor: pointer; }

@keyframes logoRotate { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

.links-container { text-align: center; padding-top: 2em; }

.content-wrapper { position: relative; }

.form-wrapper { position: absolute; display: none; top: 0; left: 0; width: 100%; height: 100%; }

.form-modal { margin: 0 auto; position: fixed; z-index: 3000; background: var(--background); color: var(--foreground); top: 30%; left: 50%; transform: translateX(-50%); width: 90%; display: flex; justify-content: center; padding: 5em; box-shadow: 7px 3px 20px rgba(0, 0, 0, 0.1); }

.form-close { position: absolute; top: 1em; left: 1.5em; cursor: pointer; transition: transform .3s ease-out; }

.form-close:hover { transform: rotate(90deg); }

.overlay { position: absolute; background: rgba(0, 0, 0, 0.5); top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; }

form { display: flex; flex-direction: column; align-items: flex-end; }

form h4 { padding-bottom: .3em; }

button#form-submit { color: var(--foreground); cursor: pointer; background-color: transparent; padding: 0; border: none; border: 1px solid var(--foreground); padding: .2em .5em; width: 11.1em; }

button#form-submit:hover { background-color: var(--foreground); transition: background-color 0.3s; color: var(--background); }

.footer-links { position: relative; }

.svg-oval { position: absolute; top: -26px; bottom: 0; left: 50%; transform: translateX(-50%); filter: var(--svg-color); }

svg ellipse { stroke-dasharray: 450; stroke-dashoffset: 450; }

.contact:hover { color: #666565; }

/*-----end footer-----*/
@media screen and (min-width: 768px) { .header-info h3 { line-height: 1.1rem; } .welcome-container, .about-welcome-container { display: flex; } .welcome-gallery { width: 30%; } .welcome-container, .about-welcome-container { padding: 3em; } .header-logo svg { filter: var(--svg-color); width: 50px; height: 100%; padding-top: .2em; display: unset; } .welcome-bio { align-self: flex-end; padding-left: 2em; } .slider-nav { display: block; position: absolute; padding-top: .3em; width: 100%; } .project-data { position: relative; z-index: 1000; } .project-number { transform: translateY(-7px); } .project-feature img { z-index: 1; display: block; } .footer-container { padding-top: 20em; z-index: 2000; padding: 3em; } .osd-logo { padding: 2em 0 2em 0; } .links-container { padding-top: 0; } .links-top { display: flex; justify-content: space-between; } .links-bottom { display: flex; justify-content: space-between; } .footer-links.contact { transform: translateX(-0.7em); } .footer-links { padding-bottom: 0; } .form-modal { width: 40%; } }

@media screen and (min-width: 1280px) { .header, .welcome-container, .footer-container, .page-header, .about-welcome-container { padding: 3em 5em 3em 5em; } .project-nav-container ol li { padding-left: 5em; } .welcome-bio h1 { line-height: 1.7rem; } .header-info h3 { line-height: 1rem; } }

.project-container { position: relative; width: 100%; height: 100vh; }

.project-left-container { display: grid; width: 100%; height: 100vh; }

.project-close { position: absolute; top: 1.3em; left: 1.5em; z-index: 1000; transition: transform .3s ease-out; }

.project-close:hover { transform: rotate(90deg); }

.project-logo { text-align: center; padding: 5em 2em 0 2em; opacity: 0; }

.gallery-left-wrapper { align-self: center; }

/* gallery left images  */
.gallery-left-images { position: relative; width: 100%; }

.images img { display: none; }

.images img.active { display: block; }

.project-info { display: flex; justify-content: space-between; padding-bottom: 1em; }

.gallery-left img, .project-info { width: 80%; margin: 0 auto; }

/* project title */
.project-data-wrapper { width: 100%; padding-bottom: 2em; align-self: end; }

.project-data-single { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 2em; border-top: 1px solid #9D9D9D; border-bottom: 1px solid #9D9D9D; }

.project-data-left { display: flex; }

.project-title-single { transition: transform .3s ease-in-out; }

.project-title-single:hover { transform: translateX(1em); }

.project-number { transform: translateY(0px); }

.project-next { align-self: flex-end; cursor: pointer; transition: transform .3s ease-in-out; user-select: none; }

.project-next:hover { transform: translateX(1em); }

/* right gallery */
.project-right-container { display: none; }

.gallery-right img:hover { mix-blend-mode: luminosity; }

@media screen and (min-width: 500px) { .gallery-left-wrapper { padding: 2em; } }

@media screen and (min-width: 768px) { .project-logo { padding: 4em 2em 0 2em; } .project-container { display: grid; grid-template-columns: 1.2fr 1fr; } .gallery-left img, .project-info { width: 48%; margin: 0 auto; } .project-data-wrapper { position: relative; width: 100%; } .project-data-single { padding: 0 5em; } .project-number { margin: auto 0; } /* right gallery */ .project-right-container { display: block; position: relative; width: 100%; height: 100%; } .gallery-right > img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-size: cover; background-position: 50%; object-fit: cover; width: 100%; height: 100%; max-height: 100%; } }

@media screen and (min-width: 1280px) { .svg-logo { width: 400px; } }

/*-----welcome-----*/
/*-----end welcome-----*/
/*-----projects-----*/
.project-title, .page-title { transition: transform .3s ease-in-out; }

.project-title:hover, .page-title:hover { transform: translateX(1em); }

.project-data { opacity: 0; }

.nav-fade { animation: navFade 1s ease-out; animation-fill-mode: forwards; }

@keyframes navFade { from { transform: translateY(2em);
    opacity: 0; }
  to { transform: translateY(0);
    opacity: 100%; } }

/*-----end projects-----*/
/*-----footer-----*/
/*-----end footer-----*/
.page-feature img { mix-blend-mode: normal; }

.page-wrapper { position: relative; }

.about-welcome-text { max-width: 23em; }

.about-welcome-text h3 { text-transform: none; }

.about-container { position: relative; padding-top: 16em; display: none; }

.section-about { position: relative; padding-bottom: 30em; }

.section-about:last-child { padding-bottom: 17em; }

.about-header { padding-bottom: .7em; position: absolute; border-bottom: 1px solid #9D9D9D; right: 0; width: 92%; }

.about-body { position: absolute; max-width: 80%; padding-top: 3.4em; right: 12%; }

.about-image { width: 35%; position: absolute; transform: translateY(-92%); right: 2em; }

@media screen and (min-width: 500px) { .about-welcome-image { width: 70%; } .section-about:first-child { padding-top: 8em; } .about-image { transform: translateY(-95%); } .about-body { max-width: 53%; right: 39%; padding-top: 3em; } }

@media screen and (min-width: 768px) { .about-welcome-image { width: 30%; } .about-welcome-text { padding-top: 0; margin: auto auto; } .about-welcome-text h3 { text-transform: none; line-height: 1.35em; } .about-container { padding-top: 10em; } .about-header-right { right: 0; width: 80%; } .about-body-right { right: 54%; } .about-image-right { right: 20%; } .about-header-left { left: 0; width: 69%; text-align: end; } .about-body-left { left: 57.5%; } .about-image-left { left: 20%; } .about-body { width: 80%; max-width: 26%; padding-top: 2.8em; } .about-image { width: 20%; transform: translateY(-20%); } }

@media screen and (min-width: 1280px) { .section-about { height: 30em; } .about-body { padding-top: 3.6em; } .about-body-left { left: 60%; } }

@media screen and (min-width: 1800px) { .about-welcome-text { max-width: 30em; } .section-about { padding-bottom: 40em; } .about-body { padding-top: 4em; } .about-body-left { left: 61.7%; } }

body { margin: 0; background: var(--background); color: var(--foreground); transition: background .5s ease-in-out; }

/*# sourceMappingURL=main.css.map */