body {
    margin: 0 auto;
    text-align: center;
    padding: 50px 50px 50px 50px;
    background-color: #ececec;
}

.container {
    height: auto;
    width: 1000px;
    margin: 0px auto;
    border: 1px solid gray;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 1px 1px 10px 2px rgb(206, 205, 205); 
    background-color: #fff;
}

.bg-image {
    height: 1000px;
    width: 100%;
    margin: 0px auto;
    background-image: url(cork-board-background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 5px;
    border-radius: 10px;
    border: 5px solid rgb(82, 62, 44);
    opacity: 85%;
}

h1 {
    font-size: 50px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    
}

h2 {
    font-size: 30px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-top: 50px;
}

p {
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
}

/*Nav*/

nav {
    margin: 0px auto;
    margin-bottom: 100px;
}

#quote-box {
    padding: 10px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 30px;
    font-size: 25px;
    color: rgb(90, 64, 202);
    font-family: Arial, Helvetica, sans-serif;
}

#save-box {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; 
    padding: 10px;
}

#gen-btn {
    border: none;
    border-radius: 10px;
    padding: 5px;
    background-color: rgb(248, 218, 236);
    color: rgb(189, 27, 27);
    font-size: 20px;
}

#gen-btn:hover {
    background-color: rgb(216, 79, 79);
    color: white;
}

#save-btn {
    border: none;
    border-radius: 10px;
    padding: 5px;
    background-color: rgb(248, 218, 236);
    color: rgb(189, 27, 27);
    font-size: 20px;
}

#save-btn:hover {
    background-color: rgb(113, 184, 113);
    color: white;
}

/* the css for the saved cards*/ /*Might not actually be active*/

.joke-card {
    margin: 10px 0;
    padding: 10px;
    border: 3px solid pink;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
}

.joke-card p {
    margin: 0;
    flex: 1;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
}

/*delete button*/

.delete-card {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 2;
    border: none;
    border-radius: 10px;
    border: 1px solid rgb(253, 58, 58);
    padding: 5px;
    background-color: rgb(248, 218, 236);
    color: rgb(189, 27, 27);
    font-size: 16px;
}

.delete-card:hover {
    color: white;
    background-color: red;
}

/*Download button*/

.download-btn {
    position: absolute;
    bottom: -10px;
    left: 90px;
    z-index: 2;
    border: none;
    border-radius: 10px;
    border: 1px solid rgb(253, 58, 58);
    padding: 5px;
    background-color: rgb(248, 218, 236);
    color: rgb(189, 27, 27);
    font-size: 16px;
}

.download-btn:hover {
    color: white;
    background-color: rgb(144, 197, 144);
}


/*Flip card css*/

.flip-card {
    position: relative;
    width: 350px;
    height: 250px;
    perspective: 1000px;
    margin: 10px;
    cursor: pointer;
    font-size: 20px;
}

.flip-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card-inner.flipped {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 8px;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
   
    transition: transform 0.2s ease;
    
}

.flip-card-back {
    transform: rotateY(180deg);
    
}

/*Animation for deletion*/

.delete-anim {
    animation: poof 0.4s forwards;
}

@keyframes poof {
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

/*Saved sticky note colors and tilts*/

.sticky-yellow {background: #fff9a8;}
.sticky-blue {  background: #cfe8ff;}
.sticky-pink {  background: #ffd1dc;}
.sticky-green { background: #d9f7c8;}
.sticky-purple { background: #e8d7ff;}