@font-face {
    font-family: KiwiSoda;
    src: url(KiwiSoda.ttf);
}

@font-face {
    font-family: GrapeSoda;
    src: url(GrapeSoda.ttf);
}

@font-face {
    font-family: pirkkala;
    src: url(pirkkala.ttf);
}


.header-box {
    position: relative;

    display: grid;
    grid-template-columns: 250px 1fr 250px;
    align-items: center;

    background-color: #9EE580;

    border-width: 5px;
    border-style: solid;
    border-image: url("/liamborder2.png") 8 round;
    box-shadow: 0 0 10px rgba(0,0,0,.2);

    padding: 10px;
}


.header-left {
    justify-self: start;
}

.header-center {
    justify-self: center;
    text-align: center;
    align-items: center;
}

.header-center h1 {
    font-size: 3em;
    margin: 5px;
    font-family: 'KiwiSoda';
}

.header-center p {
    font-size: 1.7em;
    font-family: 'GrapeSoda';
    margin: 5px;
}

.header-center-navigation {
    display: flex;
    justify-self: center;
}

.hc-nav-link {
    color: black;
}

.hc-nav-link:hover {
    color: #3D6461;
}

.rainbow-letters {
    text-shadow:
	-3px -3px 0 black,
	3px -3px 0 black,
	-3px 3px 0 black,
	3px 3px 0 black;

}

.header-center-navigation p {
    text-align: center;
}

.header-right {
    justify-self: end;
}

.header-right img {
    width: 80px;
}

.header-left img {
    width: 80px;
}

.headergrass {
    display: flex;
	margin: 0 auto;
    max-width: 100%;
	display: block;
	position: relative;
	z-index: 1;
}

.logo-row {
    display:flex;
    height: 4em;
    justify-content: center;
    margin-bottom: -2rem;
    margin-top: 2rem;
    position: relative;
    z-index: 10;
}

.logo-container {
    position: static;
     z-index: 9;
}

#logo {
    max-width: 400px;
}

.resource-category {
    margin-bottom: 10px;
    background: #c5f294;
    border: 3px solid transparent;
    border-image: url("/liamborder2.png") 8 round;
    border-radius: 8px;
    margin: 5px;
}

.resource-category summary {
    list-style: none;
    cursor: pointer;
    padding: 10px;
    font-family: KiwiSoda;
    font-size: 1.4em;
}

.resource-category summary::-webkit-details-marker {
    display: none;
}

.resource-category summary::before {
    content: "▶";
    margin-right: .5em;
    display: inline-block;
    transition: transform .2s;
}

.resource-category[open] summary::before {
    transform: rotate(90deg);
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px,1fr));
    gap: 10px;
    margin: 5px;
}

.resource-grid img {
    image-rendering: pixelated;
    transition: transform .15s ease;
    cursor: pointer;
}

.resource-grid img:hover {
    transform: scale(1.1);
}

.stamps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0;

}

.stamps-grid img {
    width: 100%;
    height: auto;

    justify-self: center;
    image-rendering: pixelated;
}


.blinkies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 5px;
}


.blinkies-grid img {
    width: 100%;
    height: auto;
    max-width: auto;
    align-items: center;
    justify-self: center;
    image-rendering: pixelated;
}

.userboxes-grid img {
    max-height: 100px;
}

.other {
    position: sticky;
    top: 5px;
    align-self: start;
}
.resource-card {
    box-sizing: border-box;
    position: sticky;
    top: 5px;
    align-self: center;
    width: calc(100% - 10px);
    justify-content: center;

    text-align: center;
    padding: 5px;

    background: #c5f294;
    border: 3px solid transparent;
    border-image: url("/liamborder2.png") 8 round;
    border-radius: 8px;
    margin: 5px;
}

.resource-card h3 {
    margin-bottom: 5px;
    font-weight: normal;
    font-family: "KiwiSoda", sans-serif;
    font-size: 1.5rem;
}

.resource-card p {
    margin-top: 5px;
}

.tag {
    background-color: #eafdb7;
    border: 3px solid transparent;
    border-radius: 8px;
    padding: 5px;
    margin: 2px;
    font-family: 'MS ui gothic', 'Gill Sans', sans-serif;
    cursor: pointer;
}

.tag:hover {
    transform: translateY(-1px);
}

mark {
    background: #fff27a;
    color: inherit;
    padding: 0;
}

#resource-search {
    height: 40px;
    padding: 5px;
    font-size: 1.2rem;
    font-family: 'GrapeSoda', sans-serif;
    margin: 5px;
}