/*@tailwind base;*/
.fixed {
    position: fixed;
}
.my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}
.inline {
    display: inline;
}
.flex {
    display: flex;
}
.table {
    display: table;
}
.h-12 {
    height: 3rem;
}
.h-24 {
    height: 6rem;
}
.h-48 {
    height: 12rem;
}
.h-96 {
    height: 24rem;
}
.w-12 {
    width: 3rem;
}
.w-full {
    width: 100%;
}
.cursor-pointer {
    cursor: pointer;
}
.flex-row {
    flex-direction: row;
}
.justify-center {
    justify-content: center;
}
.rounded-md {
    border-radius: 0.375rem;
}
.border {
    border-width: 1px;
}
.border-0 {
    border-width: 0px;
}
.border-t {
    border-top-width: 1px;
}
.border-solid {
    border-style: solid;
}
.border-slate-200 {
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.border-transparent {
    border-color: transparent;
}
.bg-sky-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
}
.bg-zinc-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(113 113 122 / var(--tw-bg-opacity, 1));
}
.bg-zinc-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(82 82 91 / var(--tw-bg-opacity, 1));
}
.p-2 {
    padding: 0.5rem;
}
.p-3 {
    padding: 0.75rem;
}
.pl-0 {
    padding-left: 0px;
}
.text-left {
    text-align: left;
}
.text-green-800 {
    --tw-text-opacity: 1;
    color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-red-400 {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-700 {
    --tw-text-opacity: 1;
    color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}

/********************/
/* petercai.css     */
/********************/

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.05em;
    margin: 1em;
}

blockquote {
    border-left: 3px solid #ddd;
    margin: 12px 0;
    padding: 12px 24px;
    color: #777
}

p {
    margin: 12px 0;
}

a:link,
a:visited {
    color: #076cd0;
}

a:active,
a:hover {
    color: #409fff;
}

.gray {
    color: #aaa;
}

#navbar {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

#navbar a:link,
    #navbar a:visited {
        color: black;
    }

#navbar a:active,
    #navbar a:hover {
        color: #409fff;
    }

#navbar li {
        padding: 0 6px;
    }

.siteTitle {
    margin: 0;
    display: inline-block;
}

.navlinks {
    display: none;
}

.navlinks a {
        padding: 6px 0;
        display: inline-block;
    }

.clear {
    clear: both;
}

.hamb {
    cursor: pointer;
    float: right;
    padding: 20px 0;
}

.hamb-line {
    background: black;
    display: block;
    height: 3px;
    position: relative;
    width: 32px;

}

/* Style span tag */
.hamb-line::before,
.hamb-line::after {
    background: black;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}

.hamb-line::before {
    top: 8px;
}

.hamb-line::after {
    top: -8px;
}

.side-menu {
    display: none;
}

/* Toggle menu icon */
.side-menu:checked~.navlinks {
    display: block;
}

.side-menu:checked~.hamb .hamb-line {
    background: transparent;
}

.side-menu:checked~.hamb .hamb-line::before {
    transform: rotate(-45deg);
    top: 0;
}

.side-menu:checked~.hamb .hamb-line::after {
    transform: rotate(45deg);
    top: 0;
}

@media (max-width: 681px) {
    .navlinks {
        left: 0;
        position: fixed;
        height: 100%;
        background: white;
        width: 100%;
    }
}

/* Desktop */
@media (min-width: 680px) {
    .navlinks {
        display: block;
        margin: 10px 0;
        padding: 0;
        float: right;
    }

    .hamb {
        display: none;
    }

    #navbar li {
        display: inline-block;
    }
}

.footer {
    font-size: 0.8em;
    padding-top: 10px;
    text-align: right;
}

/********************/
/* End petercai.css */
/********************/
nav a.active {
    background: #eee;
}

h3.subtle {
    font-size: 1.25rem;
}

.subtle {
    color: rgba(58, 58, 58, .8);
}

/*
   * Extra utilities
   */

.flex-equal>* {
    flex: 1;
}

@media (min-width: 768px) {
    .flex-md-equal>* {
        flex: 1;
    }
}

.overflow-hidden {
    overflow: hidden;
}

.hover\:bg-sky-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(14 165 233 / var(--tw-bg-opacity, 1));
}

.hover\:bg-zinc-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(161 161 170 / var(--tw-bg-opacity, 1));
}