* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } :root { --main-transition: 0.3s; --main-padding-top: 100px; --main-padding-bottom: 100px; --section-background: #ececec; } a { text-decoration: none; } body{ height: 100vh; background-image: linear-gradient(to right top, #38438b, #944b94, #d75a88, #ff7e71, #ffb25f, #ffeb68); background-repeat: no-repeat; } ul { list-style: none; margin: 0; padding: 0; } .container { padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; } @media (min-width: 768px) { .container { width: 750px; } } /* Medium */ @media (min-width: 992px) { .container { width: 970px; } } /* Large */ @media (min-width: 1200px) { .container { width: 1170px; } } .events { padding-top: var(--main-padding-top); padding-bottom: var(--main-padding-bottom); position: relative; } .events .container { display: flex; align-items: center; flex-wrap: wrap; } .events .info { flex: 1; } .events .info .time { display: flex; align-items: center; margin: 20px auto; gap: 10px; justify-content: center; } .events .info .time .unit { border: 1px solid #d4d4d4; border-radius: 6px; text-align: center; width: 75px; transition: var(--main-transition); display: flex; justify-content: center; align-items: center; flex-direction: column; cursor: pointer; } .events .info .time .unit span { display: block; transition: var(--main-transition); } .events .info .time .unit span:first-child { font-size: 35px; padding: 15px; color: #fff; font-weight: bold; } .events .info .time .unit span:last-child { padding: 8px 10px; font-size: 13px; border-top: 1px solid #d4d4d4; } .events .info .time .unit:hover, .events .info .time .unit:hover span:last-child { border-color: var(--main-color); } .events .title { text-align: center; margin: 40px 0 0; font-size: 30px; color: #fff; font-family: 'Courier New', Courier, monospace; } .events .description { text-align: center; line-height: 1.7; font-size: 19px; color: #fff; }