* {
    box-sizing: border-box;
}

.header {
    background-image: radial-gradient(circle, #0f5130, #1e293b);
    color: white;
    padding: 20px;
    text-align: center;
}

body {
    background-color: #111b31;
    padding-bottom: 20px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.menu {
    background: #1e293b;
    width: 100%;
    margin: auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #334155;
}

.page {
    width: 18%;
    background-color: #0f5130;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    color: white;
}

.page a:link {
    color: white;
    font-weight: bold;
    text-decoration: none;
}

.page a:visited {
    color: white;
    font-weight: bolder;
    text-decoration: none;
}

.page:hover{
    background-image: radial-gradient(circle, rgb(130, 163, 255), #1e293b);
}

.calendar {
    width: 70%;
    margin: auto;
    padding: 20px;
    color: white;
    text-align: center;
    border-bottom: solid #0f5130 4px;
}

.events {
    width: 85%;
    margin: auto;
    padding: 20px;
    color: white;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

.event {
    width: 20%;
    border: solid 1px #0f5130;
    border-radius: 15px;
    transition: background-color 0.7s ease, transform .7s ease;
    padding: 5px;
}

.event:hover {
    background-color: #0f5130;
    transform: scale(1.1);
}

.current {
    background-color: rgb(3, 24, 5);
}