@font-face {
    font-family:"Stories";
    src: url(bedtime\ stories.ttf);
}

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

a,
a:visited,
a:hover,
a:active,
a:focus {
    color: rgb(102, 103, 104);
}

 body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('MyPicks/Whenuseeit.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: black; /* fallback */
    z-index: -1;
    pointer-events: none; /* allows clicks to pass through */
  }

.card-row-1 {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.card-row-2 {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.image1{
    position: relative;
    width: 30%;
    container-type: inline-size; /* makes this element a container */
    box-shadow: 0.4cqw 1.6cqw 6cqw rgba(0, 0, 0, 0.5);
}

.image2{
    position: relative;
    width: 30%;
    container-type: inline-size; /* makes this element a container */
    box-shadow: 0.4cqw 1.6cqw 6cqw rgba(0, 0, 0, 0.5);
}

.wooden{
    display: block;
    width: 100%;
}


.wooden__overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: rgb(102, 103, 104);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
}


.wooden__overlay > * {
    transform: translateY(20px);
    transition: transform 0.25s;
}

.wooden__overlay:hover{
    opacity: 1;
}

.wooden__overlay:hover > * {
    transform: translateY(0px);
}

.wooden__overlay a {
    color: rgb(102, 103, 104);
    text-decoration: none;
}
.wooden__overlay a:hover {
    text-decoration: underline;
}

.wood_title{
    font-family: "Stories";
    font-size: 8cqw;       /* scales with card width */
    font-weight: 20;
    text-align: center;
    width: 80%;
}

.wood_description{
    font-family: "Times New Roman";
    font-size: 3cqw;
    margin-top: 3cqw;
    font-style: italic;
    font-weight: 1;
    width: 80%;
    text-align: center;
}


h1{
    font-family:"Stories";
    font-size: clamp(2rem, 7vw, 4rem);
    margin: 50px 0 30px;
    text-align: center;
    color: rgb(102, 103, 104);
    text-shadow: 2px 0 #000000, -2px 0 #000000, 0 2px #000000, 0 -2px #000000,
               1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;

    filter: url(#wither);

    
}