@font-face {
    font-family: "Wetnessday";
    src: url("fonts/calendar/bigbesty/Bigbesty.ttf") format("truetype");
}

@keyframes slide {
    0% { transform: translate(3em, 2em) rotate(7deg); }
    10% { transform: translate(-4em, 1em) rotate(-7deg); }
    20% { transform: translate(1em, 3em) rotate(5deg); }
    30% { transform: translate(-2em, 2em) rotate(-4deg); }
    40% { transform: translate(5em, 1em) rotate(10deg); }
    50% { transform: translate(-3em, 2em) rotate(-7deg); }
    60% { transform: translate(2em, 3em) rotate(5deg); }
    70% { transform: translate(-1em, 1em) rotate(-4deg); }
    80% { transform: translate(4em, 3em) rotate(8deg); }
    90% { transform: translate(-5em, 1em) rotate(-11deg); }
    100% { transform: translate(3em, 2em) rotate(7deg); } 
}

@keyframes shake {
    0% { transform: translate(0, 0) rotate(0deg); }
    75% { transform: scaleX(1.1) scaleY(1.1); }
    50% { transform: translate(0, 0) rotate(deg); }
    75% { transform: scaleX(0.9) scaleY(0.9); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

body {
    background-image: url(images/bg/WINGDINGS.png);
    color: white;
    margin: 0;
    overflow: hidden;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100vh;
    padding: 1rem;
    gap: 2rem;
}

.title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    height: 100px;
}

.weird-title {
    font-size: 3rem;
    text-align: center;
    animation: slide 10s infinite, shake 1.5s, infinite;
    display: inline-block;
    position: relative;

}

/* .weird-title.slide {
    animation: slide 10s infinite;
} */

/*.weird-title.shake {
    animation: shake 1.5s infinite;
} */

.weird {
    display: inline-block;
    font-family: "Wetnessday", sans-serif;
    text-align: center;
}

.calendar-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    width: 90%;
    margin-top: 150px;
}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    width: 90%;
}

.day-header {
    background: #23866A;
    padding: 10px;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid #2ECC9B;
}

.day {
    background: #1F5547;
    border: 1px solid #34D9A0;
    min-height: 80px;
    padding: 5px;
    display: flex;
    align-items: flex-start;
}

.day a {
    text-decoration: none;
    color: #eee;
    display: block;
}

.day span {
    display: block;
    font-size: 1.2em;
    margin-top: 5px;
    color: #FFFFFF;
}

.empty {
    background: rgba(31, 85, 71, 0.5);
    color: rgba(255, 255, 255, 0.6);
    padding: 5px;
    display: flex;
    align-items: flex-start;
}

.empty a {
    color: white;
}

.up   { position: relative; top: -0.5em; }
.down { position: relative; top: 0.5em; }
.wide { margin-right: 0.5em; }
.space { margin-right: 1em; }

.font1 { font-family: "Wetnessday", sans-serif; }