* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

html {
  font-size: 17px;
}

body {
  font-family: 'Nunito', sans-serif;
  background-color: #506070;
  color: #FFFFFF;
  text-align: center;
  padding: 2rem 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

main {
  margin: 2rem 0;
  flex-grow: 1;
}

section {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

article {
  width: 28rem;
  display: flex;
  flex-direction: column;
  background-color: #00000044;
  margin: .5rem auto;
  padding: 10px;
  border-radius: 10px;
  border: 3px solid #00000044;
}

#logo {
  width: 20rem;
  height: 20rem;
}

#schedule {
  flex-direction: column;
}

#other article {
  background-color: #00000066;
  margin: 2rem auto 1rem auto;
}

h1 {
  font-size: 1.7rem;
  line-height: 1.5;
  font-weight: 400;
}

h2 {
  font-size: 2rem;
  line-height: 1.5;
  font-weight: 600;
}

h3 {
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 500;
}

em {
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 300;
}

a {
  position: relative;
  color: #FFFFFF;
}

.buttons {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.buttons a {
  height: 60px;
  width: 60px;
  background-color: #00000066;
  border-radius: 10px;
  cursor: pointer;
  margin: 12px;
  border: 3px solid #00000033;
  user-select: none;
  text-decoration: none;
}

.buttons a::before {
  top: -45px;
  content: attr(data-tooltip);
  position: absolute;
  display: none;
  justify-content: center;
  background-color: #20282e;
  color: #FFFFFF;
  font-family: 'Nunito', sans-serif;
  z-index: 100;
  font-size: 1.2rem;
  padding: 15px;
  font-weight: 400;
  border-radius: 10px;
  box-shadow: 5px 5px 5px 0px #00000055;
}

.buttons a:hover::before {
  display: flex;
}

/* Responsive */

@media ( max-width: 600px) { html { font-size: 14px; } }
@media ( max-width: 400px) { html { font-size: 10px; } }

/* Fonts */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  src: local('Nunito'), url('/assets/fonts/nunito.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  src: local('Material Icons'), url('/assets/fonts/icons-round.woff2') format('woff2');
  font-display: swap;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 40px; /* Preferred icon size */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}