/* TRUE GLOBAL */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    caret-color: transparent;
    scroll-behavior: smooth;
}

/* FONTS */
@font-face {
    font-family: 'signature';
    src: url('../font/signature.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'chapbook';
    src: url('../font/chapbook.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* NAV STYLING */
header {
    user-select: none;
    z-index: 101;
    position: relative;
    background-color: lightpink;
    text-align: center;
}

#title, #title-heart {
    margin-top: 25px;
    position: relative;
    color: black;
    text-decoration: none;
}

#title-heart {
    width: 8vw;
}

#title {
    font-family: 'signature', Courier, monospace;
    
    font-size: 10vw;
}

nav {
    border-bottom: 2px solid black;
    text-align: center;
    background-color: lightpink;
    position: sticky;
    top: 0;
    z-index: 101;
}

.item {
    display: inline-block;
    margin: .01vw;
}

nav a {
    font-family:'chapbook', Courier, monospace;
    user-select: none;
    display: inline-block;
    padding: 6.5px;
    text-decoration: none;
    color: black;
    border-radius: 5px;
    font-size: 1.2rem;
    transition: background-color 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
}

nav a.active{
    background-color: white;
    color: black;
    border: 1px solid black;
    border-radius: 5px;
    text-shadow: none;
}

nav a:hover {
    color: black;
    background-color: white;
    border: 1px solid black;
    text-shadow: none;
}