@font-face {
    font-family: Onest;
    src: url('../fonts/Onest-VariableFont_wght.ttf');
}
html, body {
    margin: 0;
    height: 100%;
    font-family: Onest;
    background-color: white;
    color: black;
}
.fcw { display: flex; justify-content: center; width: 100%;} 
.fch { display: flex; flex-direction: column; height: 100%; }
.ac { align-items: center; }
.w1 { width: 100%; }
.h1 { height: 100%; }
.oh { overflow: hidden; }
.pr { position: relative; }
.pa { position: absolute; }
.dn { display: none; }

.inv-w { width: 480px; }
.inv-p {
    padding: 12px;
    box-sizing: border-box;
}
.inv-r {
    border-radius: 32px;
    border: 1.2px solid silver;
    background-color: white;
    color: black;
}

.scroll-inv { overflow: auto; }
.scroll-inv::-webkit-scrollbar { display: none; }

.nav-inv { padding-bottom: 8px; }
.in-nav {
    align-items: center;
    height: fit-content;
    margin: 0 12px 12px 12px;
    padding: 16px;
    border-radius: 32px;
    border: 1.2px solid silver;
    background-color: white;
    color: black;
}
.in-nav a {
    text-decoration: none;
    cursor: alias;
    color: black;
    margin: 0px 4px 0px 4px;
}
.in-nav .logo { font-weight: bold; }
.choice { text-align: right; }

.opening-title { margin: 32px 32px 0px 32px; }
.about-inv { font-size: 32px; }
.quotes-inv {
    margin: 16px 16px 32px 16px;
    border-radius: 16px;
    padding: 16px;
}

.templates-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-sizing: border-box;
    padding: 8px;
}
.t-list {
    width: 160px;
    margin: 6px;
    border-radius: 24px;
    border: 1.2px solid silver;
    text-align: center;
    overflow: hidden;
    background-color: white;
    color: black;
    text-decoration: none;
    cursor: alias;
}
.t-list:hover {
    border: 1.2px solid black;
}
.t-list img {
    height: 320px;
    object-fit: cover;
    margin: 4px;
    border-radius: 20px;
    border: 1.2px solid silver;
}
.t-list span {
    font-weight: bold;
    margin: 8px;
}
.t-list p {
    margin: 0px 8px 16px 8px;
    font-size: small;
}

/* Button Black White */
.b-bw {
    text-decoration: none;
    cursor: alias;
    overflow: hidden;
    margin: 8px;
    padding: 8px 16px 8px 16px;
    border-radius: 32px;
    border: 1.2px solid silver;
    background-color: black;
    color: white;
}
.b-bw:hover {
    background-color: white;
    color: black;
}