/* Computer */
:root {
    --card-padding: min(50px, 5vh);
    --nav-width: 20vw;
    --font-size-title:    min(164px, 10vw); 
    --font-size-page:     min(55px, 4vw); 
    --font-size-subtitle: min(26px, 1.6vw); 
    --font-size-text:     min(min(24px, 1.5vw), 2.25vh); 
}

body {
    padding: 0;
    margin: 0;
    overflow: hidden; 
    font-family: 'Fragment Mono';
}

h1 {
    margin: 0;
    font-size: 164px;
}

h2 {
    margin: 0;
    font-size: 26px;
}

b {
    font-family: 'Fragment Mono';
}

#page-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.page {
    position: absolute;  /* stack them */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.page.active {
  opacity: 1;
  pointer-events: auto;
}

#background-image {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

#border {
    opacity: 70%;
    position: absolute;
    left: var(--card-padding);
    right: var(--card-padding);
    top: var(--card-padding);
    bottom: var(--card-padding);
    border: 3px black solid;
}

/* Phone */
@media (max-aspect-ratio: 4/5) {
    :root {
        --card-padding: min(50px, 5vh);
        --nav-width: calc(100vw - 4 * var(--card-padding));
        --font-size-title:    min(164px, 10vw); 
        --font-size-page:     min(55px, 4vw); 
        --font-size-subtitle: min(26px, 3vw); 
        --font-size-text:     min(min(24px, 2.5vw), 2.25vh); 
    }
}