/*@media (min-width: 1440px) {
   .registration-container h1 {
      margin-top: 140px !important;
   }
}*/

@media (min-width: 786px) {

   .container {
    margin: 0px;
    padding: 16px 16px 16px 16px;
}
   /**
    * Login and registration screen
    **/
   .registration-container {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: none;
      grid-template-areas:
         "head-img content";
      column-gap: 40px;
      align-items: start;
      height: 100vh;
   }


   .registration-container .login-img {
      min-height: 100%;
      width: 100%;
      object-fit: cover;
   }

   .registration-container h1 {
      margin-top: 60px;
   }

   /**
    * Categories screen
    **/
   .categorie-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: none;
      grid-template-areas:
          "head-img content"
          "head-img weiter-button";
          column-gap: 40px;
      align-items: start;
      height: 100vh;
      margin: 0 auto;
   }
   .categorie .categorie-liste {
      max-height: 38vh;
      overflow-y: auto;
   }
   /**
   * Fonts
   **/
   h1 {
      font-size: 2.857rem;
   }

   h2 {
      font-size: 2.286rem;
   }
   .categorie-container h2 {
      font-size: 1.714rem;
   }

   h3 {
      font-size: 1.714rem;
   }

   h4 {
      font-size: 1.429rem;
   }

   h5 {
      font-size: 1.286rem;
   }

   h6 {
      font-size: 1.143rem;
   }

   p {
      font-size: 1.143rem;
   }

   p.caption {
      font-size: 1rem;
   }

   input {
      font-size: 1.143rem;
   }

   label {
      font-size: 1.286rem;
   }

   button {
      font-size: 1.286rem;
   }

   .messageDiv {
      font-size: 1.143rem;
   }

   .form-control {
      font-size: 1.143rem;
   }


   /**
   * Main page
   **/
   /*.main-container main {
      padding: 0 100px 0 100px;
   }*/

   .main-container {
      display: grid;
      grid-template-rows: 60px 40px 1fr 75px;
      grid-template-columns: 3fr 1fr;
      grid-template-areas:
          "main-header main-header"
          "main-navigation main-navigation"
          "main-content aside"
          "main-footer main-footer";
      max-height: 100vh;
      max-width: 100%;
      margin: 0 auto;
      padding: 0 100px 0 100px;
      gap: 8px;
   }

   nav > div {
      display: none;
   }
   nav > a {
      display: block;
   }
   nav {
      align-items: center;
   }

   .aside {
      width: 220px;
      height: 350px;
      border-radius: 10px;
      display: block;
      padding: 8px;
      grid-area: aside;
   }
   .aside-button {
      display: none;
   }
   .aside.community {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
   }
   .challenge-description {
      max-height: none;
   }
   .main-container nav {
      display: flex;
   }

   /*
   * Challenges
   */
   .challenge-img {
      height: 135px;
   }
   .content-card .row {
      max-width: 100%;
   }
   .content-card button {
      display: block;
      min-width: 48px;
      padding: 0px;
      right: 20px;
      width: 65px;
      min-height: 35px;
      top: 147px;
      position: absolute;
   }

   /*
    * User Page 
    */
   .user-container {
      display: grid;
      grid-template-columns: 3fr 1fr;
      grid-template-rows: 60px 40px 1fr;
      grid-template-areas:
         "user-header user-header"
         "user-nav user-nav"
         "user-main user-profile";
      max-height: 100vh;
      max-width: 100%;
      margin: 0 auto;
      padding: 0 100px 0 100px;
      gap: 8px;
   }
   .user-container .profile {
      width: 300px;
      height: fit-content;
      border-radius: 10px;
      display: block;
      padding: 16px;
      grid-area: user-profile;
   }
   .user-container main {
      overflow-y: auto;
   }
   .user-container button.delete {
      position: relative;
      right: 0;
      top: 0;
      margin-left: 0;
      margin-right: 0;
      height: 35px;
      min-height: 10px;
   }

   /*
    * Communities
    */
   .communities {
      height: 280px;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
      scroll-behavior: smooth;
   }
   .community-card {
      scroll-snap-align: center;
   }
   .community-card button {
      display: block;
      min-width: 48px;
      padding: 0px;
      right: 20px;
      width: 65px;
      min-height: 35px;
      top: 147px;
      position: absolute;
   }
   
   .community-card .row {
      max-width: 100%;
   }

}
@media (min-width: 480px) {

   /**
    * Login and registration screen
    **/
   .login-img {
      height: 230px;
      object-position: center 85%;
   }

   /*
   * Challenges
   */
   .challenge-infos > p{
      display: block;
      margin-bottom: 0;
   }
}