h1 {
    color: #012E40;
    font-size: xxx-large;
    font-weight: bolder;
    text-transform: uppercase;
    text-align: center;
}

.description {

    display: flex;
    flex-direction: row;
    margin: 50px auto;
    color: #012E40;
    width: 960px;

    & .logo-container {
        width: 120px;
        background: #012E40;
    }

    & .desc {

        padding-left: 20px;
        padding-bottom: 20px;
        flex: 1;
        text-align: justify;

        & h3 {
            margin-top: 0;
        }

        border-bottom: 3px solid #012E40;
        border-left: 3px solid #012E40;

    }

}

.event-list {
    width: 700px;
    margin: auto auto 100px;

    display: flex;
    flex-direction: column;
    gap: 30px;

    & .event-item {

        margin: 20px 0;
        background-color: #012E40;
        padding: 20px;
        border-radius: 20px;
        color: #F2E3D5;

        & > div:nth-child(2) {
            margin: 20px 0;

            & a {
                text-decoration: none;
                color: #F2E3D5;
            }
        }

        & .event-title {

            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 20px;

            & > a {
                text-decoration: none;
                color: #F2E3D5;
                display: block;
                padding: 10px 20px;
                border-radius: 20px;

                background-color: #024959;
                transition: 250ms;
                font-size: small;
                align-self: flex-start;

                &:hover {
                    background-color: #3CA6A6;
                }

            }

            & .event-item-desc {
                flex: 1;

                & h3, & h4 {
                    margin: 0;
                }

                & h4 {
                    margin-top: 3px;
                    font-weight: normal;
                }
            }
        }
    }
}