html {
scroll-behavior: smooth;
}
body {
font-family: "adobe-caslon-pro", Georgia, serif;
color: #1F1E1E;
line-height: 1.5em;
background-color: #EAE8E8;
font-family: "Libre Franklin", system-ui;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
margin: 75px auto; 
font-size: 14px;
position: relative;
max-width: 1250px;
}
#page { margin: 0 20px; }
a { color: #1F1E1E; text-decoration: underline; }
a:hover { text-decoration: none; }
section { margin-top: 75px; }
header { position: sticky; z-index: 10; top: 0px; background-color: #EAE8E8; padding: 20px 0; }
a span.arrow { text-decoration: none; display: inline-block; margin-left: 4px; color: #1F1E1E; }
h1 { margin: 0; font-size: 21px; }
h2 { margin-bottom: 60px; }
.intro, h3 {
font-size: clamp(2.75rem, 1.7237rem + 5.4737vw, 6rem);
line-height: 110%;
background: #1F1E1E;
background: linear-gradient(to right, #1F1E1E 0%, #0900FF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
letter-spacing: -.035em;
margin: 0 0 48px;
transition: all 300ms ease-in-out;
}
.intro:hover, h3:hover {
font-weight: 500;
}
h3 {
font-weight: 300;
}
header ul { margin: 0px;
list-style-type: none;
padding: 0;
}
header li {
display: inline-block;
margin-right: 3em;
}
header ul li a { text-decoration-color:rgba(31, 30, 30, 1);
transition: all 300ms ease-in-out; }
header ul li a:hover { text-decoration-color: rgba(31, 30, 30, 0); }
ul.secondaryblue {
margin: 0px;
padding: 0 0 0 20px;
}
ul.secondaryblue li {
margin-bottom: 18px;
position: relative;
left: 0;
transition: all 300ms ease-in-out;
}
ul.secondaryblue li:hover {
left: 14px;
}
ul.secondaryblue {
margin-bottom: 30px;
}
p.secondary {
font-family: "Forum", serif;
font-weight: 400;
font-style: normal;
font-style: normal;
font-size: 24px;
border-left: 0px solid rgba(31, 30, 30, 0);
padding-left: 0px;
margin-left: 0px;
transition: all 300ms ease-in-out;
}
p.secondary:hover {
border-left: 4px solid rgba(31, 30, 30, 1);
padding-left: 12px;
margin-left: 4px;
}
.secondary, .secondaryblue {
width: 50%;
font-size: 21px;
line-height: 140%;
text-wrap: pretty;
}
.secondaryblue, .caption span {
color: #0B03E6;
}
.product {
width: 100%;
border-radius: 16px;
}
.twothirds { width: 66.3%; }
.thirds { column-count: 3;
column-gap: 25px;
}
.twos { column-count: 2;
column-gap: 25px;
}
p.caption {
font-size: 14px;
margin: 12px 0 24px;
text-wrap: pretty;
overflow-y: scroll;
}
@media (max-width: 640px) {
h1 { margin-bottom: .5em; }
header li { margin-right: 1em; }
.secondary, .secondaryblue { width: 100%; }
.intro, h3 { font-size: 44px; }
.secondary, .secondaryblue {
font-size: 18px;
line-height: 140%;
width: auto;
}
.caption { text-wrap: pretty; }
.product { border-radius: 8px; }
.twothirds { width: 100%; }
.twos, .thirds { column-gap: 16px; margin-bottom: 16px; }
}
}