/* #region GENERAL */
* {
  user-select: none;
}



a {
  color: inherit;
}

:target {
  outline: none;
}
/* #endregion */

/* #region CONTENT */
.content_container {
  margin: 0.0rem 2.5rem 1.0rem 2.5rem;
}

.intro_container {
  margin: 0.0rem 0.0rem 1.5rem 0.0rem;
}

.intro_header {
  text-align: center;
  font-weight: 550;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.intro_text {
  font-size: 1.1rem;
  margin-top: 1.0rem;
  text-align: justify;
}

.card_container {
  width: 100%;
  margin: 0.0rem auto 1.0rem auto;
}

.card {
    display: block;
    width: 100%;              
    border: 1px solid var(--color_grey_light);
    border-radius: 25px;
    margin: 0.0rem auto 1.0rem auto;
    padding: 1.8rem;
    overflow: hidden;          
    text-decoration: none;     
    color: inherit; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
    
.card_image img {
  display: block;
  width: 100%;
  border-radius: 15px;
}

.card_text {
  margin-top: 1.0em;
}

.card_text_header {
  text-align: center;
  font-weight: 550;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.card_text_paragraph {
  text-align: justify;
  font-size: 1.0rem;
}
/* #endregion */

/* #region SMARTPHONE_XS */
@media screen and (min-width: 0rem) {
}
/* #endregion */

/* #region SMARTPHONE */
@media screen and (min-width: 24rem) { /* 384 px */

  .card {
    max-width: 24rem;
  }
}
/* #endregion */

/* #region TABLET */
@media screen and (min-width: 48rem) { /* 768px */

  .body_container {
    grid-template-areas:
    "hed hed hed hed hed hed hed hed hed hed hed hed"
    "con con con con con con con con con con con con"
    "fot fot fot fot fot fot fot fot fot fot fot fot";
    grid-template-rows: auto 1fr auto;    
}

  .navbar_container {
    display: none;
  }

  .intro_header {
    margin-top: 1.5rem;}
  
  .card {
    max-width: none;
    width: 48%;
    float: left;
    min-height: 35rem;
    margin: 2% 1%;}

  #card_1:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  #let_me_know:hover {
    color: var(--color_blue)
  }

  .card_text_header {
    font-size: 1.3rem;
  }
}
/* #endregion */

/* #region NOTEBOOK */
@media screen and (min-width: 62rem) { /* 992 px */

  .card {
    width: 31.3333333333%;
  }

  .card_text_header {
    font-size: 1.2rem;
  }
}
/* #endregion */

/* #region DESKTOP */
@media screen and (min-width: 75rem) { /* 1.200 px */

  .card {
    width: 31.3333333%;
  }

}
/* #endregion */