@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&family=Lato:wght@400;700&display=swap');

/* set font for all elements */
*{
  font-family: 'Fira Sans', Helvetica, sans-serif;
}

/* set font for heading elements */
h1,
h2,
h3,
h4,
h5,
h6{
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 700;
}

/* keep the footer at the bottom of the page
regardless the size of body content
=> code taken from Materializecss (https://materializecss.com/footer.html) 
*/
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

.bold-text{
  font-weight: 900;
}
.btn:hover{
  border-radius: 50%;
}

/********** home page **********/
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

.card img{
  height: 45vh;
}

.card:hover {
  box-shadow: inset 0 8px 16px 0 rgba(0,0,0,0.2);
}

/********** collapsible element **********/
.btn-small {
  margin: 0.5rem;
}

.collapsible-header .col strong {
  margin: 0.5rem;
  line-height: 2rem;
}

#modal-text {
  font-size: 2rem;
}

.fa-circle-plus,
.fa-edit{
  margin-left: 00.5rem;
}

/********** footer **********/
footer i:hover {
  color: #66ff00;
  transform: rotate(20deg);
}

#social i {
  font-size: 3rem;
  margin: 0.5rem;
}

.page-footer {
  padding-top: 0;
}