* {
    margin: 0;
    padding: 0;
    overscroll-behavior: none;
    user-select: none;
}

@font-face {
    src: url(https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf);
    font-family: 'hearts';
}

@font-face {
    src: url(https://dl.dropbox.com/s/388cvx0do21kj3n/KiwiSoda.ttf);
    font-family: 'kiwi';
}

div {
    font-family: 'kiwi';
}

.container {
    background-image: url(https://i.pinimg.com/736x/c1/e5/b2/c1e5b289a7939028bb39dbca5b57b906.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    height: 70vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 2vh;
}

.heading {
    width: 45vh;
    margin-top: -20vh;
}

.content {
    width: 45vh;
    margin-top: 5vh;
}

.footer {
    width: 45vh;
    margin-top: 5.5vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}
@keyframes blink {
    50% { border-color: transparent }
}

h1 {
    overflow: hidden;
    white-space: nowrap;
    border-right: 0.15em solid black;
    animation: typing 3s steps(30, end), blink 1s step-end infinite;
    font-size: clamp(3vh, 4vh, 5vh);
}

h2 {
    font-size: clamp(2.75vh, 3vh, 3.25vh);
    padding-top: 0.5vh;
}

.receipt-line {
    font-family: 'hearts';
    font-size: clamp(2vh, 2.25vh, 2.5vh);
}

.centered-receipt-line {
    text-align: center;
    font-family: 'hearts';
    font-size: clamp(2vh, 2.25vh, 2.5vh);
}

hr {
    margin-bottom: 0.25vh;
    margin-top: 0.25vh;
    border: none;
    border-top: dashed 1px black;
}

a {
    text-decoration: none;
    color: black;
    transition: opacity 0.2s ease;
}

a:hover {
    opacity: 0.6;
    font-style: italic;
}

.visitor-count {
    font-family: hearts;
    font-size: clamp(1.5vh, 1.75vh, 2vh);
}

.visitor-count img {
    height: 1.5vh;
    width: auto;
}

.section-title {
    color: #5388a5;
}

#about-toggle {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: #5388a5;
    position: relative;
    z-index: 100;
    background: transparent;
}

#about-toggle:hover {
    text-decoration: underline wavy;
    text-decoration-color: #5388a5;
}

#graphic-design-toggle {
    cursor: pointer;
    position: relative;
    z-index: 100;
    background: transparent;
}

#graphic-design-toggle:hover {
    font-style: italic;
    opacity: 0.6;
}

.about-tab {
    display: none;
    position: absolute;
    top: 15vh;
    left: 5vw;
    padding: 2vh;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 1vh;
    width: 45vh;
    font-family: 'kiwi';
    z-index: 9999;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    cursor: move;
}

.about-tab.show {
    display: block;
}

.graphic-design-tab {
    display: none;
    position: absolute;
    top: 10vh;
    right: 5vw;
    padding: 2vh;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 1vh;
    width: 45vh;
    font-family: 'kiwi';
    z-index: 9999;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    cursor: move;
}

.graphic-design-tab.show {
    display: flex;
    flex-wrap: wrap;
    gap: 1vh;
}

.about-photo {
    width: 44vh;
    height: auto;
    border-radius: 1vh;
    margin-bottom: 1vh;
    cursor: default;
}

.design-sample {
    width: 21vh;
    height: auto;
    padding: 0.5vh;
    padding-bottom: 0vh;
    cursor: default;
}