:root {
  --header-height: 92px;
  --footer-height: 68px;
  --primary-bg-color: #023672;
  --main-section-padding-top: 40px;
  --main-section-padding-bottom: 40px;
  --main-section-padding-top-lg: 100px;
  --main-section-padding-bottom-lg: 100px;
  --card-padding-top: 50px;
  --card-padding-bottom: 50px;
  --card-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  --card-hover-border-color: orange;
  --card-hover-border-width: 5px;
  --transition-duration: 0.1s;
}

/* Header */
.header {
  height: var(--header-height);
  background-color: var(--primary-bg-color);
}

/* Main Section */
.main-section {
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  padding-top: var(--main-section-padding-top);
  padding-bottom: var(--main-section-padding-bottom);
}

@media (min-width: 768px) {
  .main-section {
    padding-top: var(--main-section-padding-top-lg);
    padding-bottom: var(--main-section-padding-bottom-lg);
  }
}

/* Card */
.site-card {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: var(--card-padding-top);
  padding-bottom: var(--card-padding-bottom);
  box-shadow: var(--card-box-shadow);
}

.site-card:hover {
  transition-duration: var(--transition-duration);
  border-right: var(--card-hover-border-width) solid var(--card-hover-border-color);
  border-left: var(--card-hover-border-width) solid var(--card-hover-border-color);
}

/* Footer */
.footer {
  height: var(--footer-height);
  background-color: var(--primary-bg-color);
}