.blackout {
    background-color: #000000
}


@font-face {
  font-family: 'GT Alpina Trial';
  src: url('fonts/GT-Alpina-Standard-Light-Trial.otf') format('otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'PP Hatton Medium';
  src: url('fonts/PPHatton-Medium.otf') format('otf');
  font-weight: normal;
  font-style: normal;
}



#landing-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    background-image: url("pics/background.png");
    background-repeat: repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.no-scroll {
    overflow: hidden;
    background-image: url("pics/background.png");
    background-repeat: repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}


.nav-text {
    font-size: clamp(1rem, calc(5vw - 48px), 1.5rem);
    font-family: 'GT Alpina Trial';
}

.gt-alpina {
    font-family: 'GT Alpina Trial';
}

.preview-text {
    font-size: clamp(0.85rem, calc(2.4375vw - 1.1rem), 1.15rem);
    font-family: 'GT Alpina Trial';
    margin-top: clamp(0.35rem, calc(0.40625vw + 0.025rem), 0.4rem);
}


#about-spacer {
    height: clamp(161px, calc(568.75vw - 7129px), 252px);
}

#container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#compass {
    width: 8.5vw;
    aspect-ratio: 1;
    margin-top: clamp(-110px, calc(100px - 16.25vw), -94px);
    margin-bottom: clamp(1.3rem, calc(8.125vw - 5.2rem), 2.3rem);
}

#name {
    margin-bottom: clamp(2.2rem, calc(11.375vw - 6.9rem), 3.6rem);
}

#name-link {
    opacity: 1.0;  
}

#name-link:hover {
    opacity: 0.7;  
}

#poem {
    margin-left: clamp(22px, calc(93.75vw - 1178px), 37px);
    line-height: clamp(1.2, calc((0.8px + 0.03125vw) / 1px), 1.25);
}

#footer {
    position: absolute;
    bottom: clamp(3px, calc(10.625vw - 133px), 20px);
    font-size: clamp(0.6rem, calc(2.03125vw - 1.025rem), 0.85rem);
    color: #9D9D9D;
}

.a-no-styling {
    text-decoration: none;
    color: inherit;
}

.intro-width {
    text-align: center;
}

.preview-image {
    width: clamp(25vw, calc(43vw - 230.4px), 27.5vw);
    height: auto;    
}

#week14-preview {
    display: none;
    flex-direction: column;
    position: absolute;
    top: clamp(1.1rem, calc(1.625vw - 0.2rem), 1.3rem);
    right: clamp(1.1rem, calc(1.625vw - 0.2rem), 1.3rem);
}

#container:has(#week14-hover:hover) #week14-preview {
    display: flex;
}



#week1-preview {
    display: none;
    flex-direction: column;
    position: absolute;
    top: clamp(1.1rem, calc(1.625vw - 0.2rem), 1.3rem);
    right: clamp(1.1rem, calc(1.625vw - 0.2rem), 1.3rem);
}

#container:has(#week1-hover:hover) #week1-preview {
    display: flex;
}

#week2-preview {
    display: none;
    flex-direction: column;
    position: absolute;
    top: clamp(1.1rem, calc(1.625vw - 0.2rem), 1.3rem);
    right: clamp(1.1rem, calc(1.625vw - 0.2rem), 1.3rem);
}

#week3-preview {
    display: none;
    flex-direction: column;
    position: absolute;
    top: clamp(1.1rem, calc(1.625vw - 0.2rem), 1.3rem);
    right: clamp(1.1rem, calc(1.625vw - 0.2rem), 1.3rem);
}

#week4-preview {
    display: none;
    flex-direction: column;
    position: absolute;
    top: clamp(1.1rem, calc(1.625vw - 0.2rem), 1.3rem);
    right: clamp(1.1rem, calc(1.625vw - 0.2rem), 1.3rem);
}

#week5-preview {
    display: none;
    flex-direction: column;
    position: absolute;
    top: clamp(1.1rem, calc(1.625vw - 0.2rem), 1.3rem);
    right: clamp(1.1rem, calc(1.625vw - 0.2rem), 1.3rem);
}

#container:has(#week2-hover:hover) #week2-preview {
    display: flex;
}

#container:has(#week3-hover:hover) #week3-preview {
    display: flex;
}

#container:has(#week4-hover:hover) #week4-preview {
    display: flex;
}

#container:has(#week5-hover:hover) #week5-preview {
    display: flex;
}








#page-body {
    padding-left: clamp(275px, calc(15.625vw + 75px), 300px);
    padding-right: clamp(275px, calc(15.625vw + 75px), 300px);
    width: auto;
    background-image: url("pics/background.png");
    background-repeat: repeat;
    padding-bottom: clamp(45px, calc(218.75vw - 2755px), 80px);
}

.header {
    display: flex;
    justify-content: space-between;
    margin-top: clamp(45px, calc(218.75vw - 2755px), 80px);
}

.pp-hatton {
    font-family: 'PP Hatton Medium';
}

.title-text {
    font-size: clamp(29px, calc(40.625vw - 491px), 35.5px);
}

.superscript {
    font-size: 70%;
}

.home-superscript {
    font-size: 60%;
}

.gray-text {
    color: #A6A6A6;
}


.attribute-subheader {
    display: flex;
    flex-direction: row;
    gap: 40px;
    margin-top: 12px;
}

.attribute {
    display: flex;
    flex-direction: column;
}

.attribute-label {
    font-size: clamp(12px, calc(18.75vw - 228px), 15px);
}

.attribute-content {
    font-size: clamp(17px, calc(25vw - 303px), 21px);
    margin-top: 2px;
}

.body-text {
    margin-top: clamp(40px, calc(50vw - 600px), 48px);
    font-size: clamp(17px, calc(21.875vw - 263px), 20.5px);
}

#sparkle-container {

}

#sparkle {
    width: auto;
    height: clamp(70px, calc(43.75vw - 490px), 77px);
    flex-shrink: 0;
}

ul {
    margin-top: clamp(5px, calc(12.5vw - 155px), 7px);
    display: flex;
    flex-direction: column;
    gap: clamp(5px, calc(12.5vw - 155px), 7px);
}

.sublist {
    margin-top: 0px;
}

.spacer {
    display: flex;
    justify-content: center;
}

.image-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(20px, calc(43.75vw - 540px), 27px);
    margin-top: clamp(30px, calc(43.75vw - 530px), 37px);
    margin-bottom: clamp(30px, calc(43.75vw - 530px), 37px);
}

.image-container > img {
    height: clamp(175px, calc(12.5vw + 15px), 195px);
}

.image-container-almost-full {
    width: 100%;
    margin-top: clamp(30px, calc(43.75vw - 530px), 37px);
    margin-bottom: clamp(30px, calc(43.75vw - 530px), 37px);
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: clamp(20px, calc(43.75vw - 540px), 27px);
}

.image-container-almost-full > img {
    width: 70%;
}

.image-container-full {
    width: 100%;
    margin-top: clamp(30px, calc(43.75vw - 530px), 37px);
    margin-bottom: clamp(30px, calc(43.75vw - 530px), 37px);
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: clamp(20px, calc(43.75vw - 540px), 27px);
}


.image-container-full > img {
    width: 100%;
}

a {
    color: #7D7D7D;
}

.compass-shrink {
    transition: transform 0.4s ease; 
}

.compass-shrink:hover {
  transform: scale(1.13); 
}

.compass-container {
    position: relative;
}

.compass-overlay {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%); 
    z-index: -1;
}

pre code {
    font-size: 14px;
}

.grayed-out {
    color: #7a7a7a;
}


.iframe-center {
    display: flex; 
    justify-content: center;
}


.code-block {

}

pre {
    height: 250px;
    overflow: scroll;
    background: rgb(209 209 209 / 0.2);
    border-radius: 2px;
}