@import url('https://fonts.googleapis.com/css2?family=WDXL+Lubrifont+TC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

#nav {
    margin: 4px;
    margin-left: 5%;
    margin-right: 5%;

    padding: 4px;
    width: 90%;

    background-image: linear-gradient(to bottom, #b3b2b3ff 0%, #6d6c6cff 100%);

    border-style: double;
    border-width: 4px;
    border-radius: 16px;
    border-color: #242424;

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.5));
}

#navtitle {
    text-align: center;
    padding: 0px;
    margin: 0px;
    color: #242424;
}

#nav p {
    font-family: 'Libre Baskerville', sans-serif;
    font-size: 14px;
    padding: 0px;
    margin: 0px;
    margin-left: 4px;
    margin-right: 4px;
    color: #242424;
}

#nav a {
    color: inherit;
}

#nav a:hover {
    color: #ff0000;
}

.navsep {
    padding: 0px;
    margin: 4px;
    border-style: double;
    border-width: 1px;
    border-color: #908f90ff;
    border-top-color: #6d6c6cff;
    border-bottom-color: #b3b2b3ff;
}

.perforation {
    font-size: 8px;
    padding: 0px;
    margin: 0px;
    height: 8px;
    width: 100%;
}

.perfdot {
    display: inline-block;
    padding: 0px;
    margin: 0px;
    margin-left: 2px;
    margin-right: 2px;
    height: 8px;
    width: 8px;
    /* border-style: solid;
    border-width: 1px;
    border-color: #908f90ff;
    border-top-color: #b3b2b3ff;
    border-bottom-color: #6d6c6cff; */
    border-radius: 6px;
    background-color: #908f90ff;
    background-image: linear-gradient(to bottom, #6d6c6cff, #b3b2b3ff);
}



#bar {
    display: flex;
    margin: 0px;
    padding: 0px;
    margin-top: 4px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.5));
}

.bar {
    height: 20px;
    background-image: url("/porky/deco/bar.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0px;
    margin: 0px;
    padding-left: 5px;
    padding-right: 5px;
}

.barlink {
    color: #fff;
    text-decoration: none;
    font-family: "WDXL Lubrifont TC", sans-serif;
}

.barlink:hover {
    color: #f00;
}

.barend {
    flex-grow: 1;
    height: 20px;
    background-image: url("/porky/deco/barend.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0px;
    margin: 0px;
    margin-left: 5px;
    margin-right: 5px;
}