/* grid css */

.header { grid-area: header; }
.grid_canvas { grid-area: grid_canvas; }
.grid_form { grid-area: grid_form; }
.grid_form_intro {grid-area: grid_form_intro; }
.grid_form_content {grid-area: grid_form_content; }

.motivation { grid-area: motivation; }
.intro_lessons{ grid-area: intro_lessons; }
.intro_theory{ grid-area: intro_theory; }
.intro_practice {grid-area: intro_practice; }

/*.lesson_item{ grid-area: lesson_item; }*/
.lesson_description { grid-area: lesson_description; }
.lesson_price { grid-area: lesson_price; }

.grid_home_theories {grid-area: grid_home_theories; }
.footer { grid-area: footer; }

.navhome {grid-area: navhome; justify-self: left; }
.navapp {grid-area: navapp; justify-self: left; }
.navoverview {grid-area: navoverview; justify-self: left; }
.navblogs {grid-area: navblogs; justify-self: left; }
.navhelp {grid-area: navhelp; justify-self: left; }
.navaccount {grid-area: navaccount; justify-self: end; }

.subject_title { grid-area: subject_title; }
.subject_content { grid-area: subject_content; }
.subject_image { grid-area: subject_image; }
.subject_description { grid-area: subject_description; }

.intro_theory{ grid-area: intro_theory; }
.par_title{ grid-area: par_title; }
.par_content{ grid-area: par_content; }

.pargraph{ grid-area: pargraph; }
.pagenumbers{ grid-area: pagenumbers; }
.pagenumbers_1{ grid-area: pagenumbers_1; }
.pagenumbers_2{ grid-area: pagenumbers_2; }
.pargraph_block{ grid-area: pargraph_block; }
.pargraph_block_title{ grid-area: pargraph_block_title; }
.pargraph_block_content{ grid-area: pargraph_block_content; }


.pg_block_image{ grid-area: pg_block_image; }
.pg_block_text{ grid-area: pg_block_text; }


.pargraph{
    display: grid;
    grid-template-areas:
    'pagenumbers_1'
    'pargraph_block'
    'pagenumbers_2';
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    /*background-color: rgba(255, 255, 255, 0);*/
    padding: 0px 15px;
    justify-content: space-evenly;
}

.pargraph_block{
    display: grid;
    grid-template-areas:
    'pargraph_block_title'
    'pargraph_block_content';
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    /*background-color: rgba(255, 255, 255, 0);*/
    padding: 0px 15px;
    justify-content: space-evenly;
}

.pg_block{
    display: grid;
    grid-template-areas:
    'pg_block_image  pg_block_text pg_block_text pg_block_text';
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    padding: 0px 0px;
    justify-content: space-evenly;
}

.pg_block_image, pg_block_text{
    padding: 10px;
}


.intro_theory, .par_theory{
    display: grid;
    grid-template-areas:
    'par_title'
    'par_content';
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    /*background-color: rgba(255, 255, 255, 0);*/
    justify-content: space-evenly;
}

/*.navbar_grid {
  display: grid;
  grid-template-areas:
    "navhome navapp navoverview navblogs navhelp navaccount navaccount navaccount navaccount navaccount navaccount navaccount navaccount navaccount navaccount navaccount";
  grid-template-columns: repeat(16, 1fr);
  grid-gap: 10px;
  *//*background-color: rgba(255, 255, 255, 0);*//*
  padding: 0px;
  *//*justify-content: space-evenly;*//*
}*/

.grid_site{
    display: grid;
    grid-template-areas:
    'titlebar_grid'
    'grid_content';
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    /*background-color: rgba(255, 255, 255, 0);*/
    padding: 0px 15px;
    justify-content: space-evenly;
    margin-top: 1rem;
}

.base_grid {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'grid_form grid_form grid_form grid_form grid_form grid_form'
    'footer footer footer footer footer footer';
  grid-template-columns: repeat(6, 1fr);
  grid-column-gap: 10px;
  /*background-color: rgba(255, 255, 255, 0);*/
  /*padding: 15px;*/
  justify-content: space-evenly;
}

.grid_home_theories{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-evenly;
    grid-gap: 10px;
}

.grid_home_practice{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-evenly;
    grid-gap: 10px;
}

.subject_tile{
    display: grid;
    grid-template-areas:
    'subject_title'
    'subject_content';
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    padding: 15px;
    justify-content: space-evenly;
    background-color: rgb(239,252,231);
    font-size: 1rem;
}

.subject_tile_title{
    font-size: 1.8rem;
}

.subject_content{
    height: 100%;
}

.subject_description{
    display: flex;
    justify-content: center;
    align-items: center;
/*    margin-bottom: 100px;*/
}

.subject_title{
    justify-self: center;
}

.sub_content_theory{
    display: grid;
    grid-template-areas:
    'subject_image subject_description';
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    padding: 15px;
    justify-content: space-evenly;
}

.sub_content_practice{
    display: grid;
    grid-template-areas:
    'subject_image';
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    padding: 15px;
    justify-content: space-evenly;
}

.app_grid {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'grid_canvas grid_canvas grid_canvas grid_form grid_form grid_form'
    'footer footer footer footer footer footer';
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  padding: 15px;
  justify-content: space-evenly;
}

.grid_form {
  display: grid;
  grid-template-areas:
    'grid_form_intro'
    'grid_form_content';
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 10px;
  padding: 20px;
  justify-content: space-evenly;
  margin-bottom: 40px;
}

.grid_content_home {
    display: grid;
    grid-template-areas:
    'intro_lessons intro_lessons'
    'intro_theory intro_theory'
    'intro_practice intro_practice';

    /*'motivation intro_theory'
    'intro_practice intro_practice';*/
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    padding: 0px;
    justify-content: space-evenly;
}

.grid_content_theory_overview {
    display: grid;
    /*'motivation intro_theory'
    'intro_practice intro_practice';*/
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    padding: 0px;
    justify-content: space-evenly;
}

.grid_practice_overview{
    display: grid;
    /*'motivation intro_theory'
    'intro_practice intro_practice';*/
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    padding: 0px;
    justify-content: space-evenly;
}

.lesson_item{
    display: grid;
    grid-template-areas:
    'lesson_description lesson_description lesson_price';
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 40px;
    padding: 0px;
    justify-content: space-evenly;

}

.link_name{
    background-color: rgba(239, 252, 231, .9);
    color: black;
    font-weight: bold;
    display: none;
/*    padding: 0;*/
}

.main_canvas{
    margin: 0;
}

.main_grid > div {
  text-align: center;
  padding: 20px 0;
}

.grid_content{
/*    padding-left: 40px;
    padding-right: 40px;*/
}

.titlebar_div{
/*    padding-left: 40px;
    padding-right: 40px;*/
}

/*.main_content{
    padding-left: 40px;
    padding-right: 40px;
}*/

@media only screen and (max-device-width : 1223px) and (orientation : portrait){
    .titlebar_div{
        /*font-size: 2rem !important;*/
    }

    .subtitle{
        font-size: 1.3rem !important;
    }

    .grid_content{
        padding-left: 10px;
        padding-right: 10px;
    }

    canvas_simple, canvas_pro{
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    /* general */
    .grid_form_content{
        font-size: 1.2rem !important;
    }

    .title_titlebar{
        font-size: 3rem;
    }

    .subtitle{
        font-size: .7rem !important;
    }

    .grid_content{
        padding-left: 0px;
        padding-right: 0px;
    }

    .main_grid {
        display: grid;
        grid-template-areas:
        'header header header header header header'
        'grid_canvas grid_canvas grid_canvas grid_canvas grid_form grid_form'
        'footer footer footer footer footer footer';
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 10px;
        padding: 15px;
        justify-content: space-evenly;
    }

    /* navbar */
    .navbar_grid {
      display: grid;
      grid-template-areas:
        'navhome'
        'navapp'
        'navoverview'
        'navinfo'
        'navaccount';
      grid-template-columns: repeat(1, 1fr);
      grid-gap: 5px;
      padding: 0px;
      justify-content: space-evenly;
    }

    /* home */
    .grid_home_theories{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .grid_home_practice{
        grid-template-columns: repeat(2, 1fr);
    }

    /* theory */
    .grid_content_theory_overview {
        display: grid;
        /*'motivation intro_theory'
        'intro_practice intro_practice';*/
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 10px;
        padding: 0px;
        justify-content: space-evenly;
    }

    .subject_tile{
        font-size: 1rem;
    }

    .subject_tile_title{
        font-size: 1.25rem;
    }

    .subject_tile_title_practice{
        font-size: 1.5rem;
    }

    .subject_description{
        margin-bottom: 0;
    }
/*    .sub_content_theory{
        display: grid;
        grid-template-areas:
        'subject_image'
         'subject_description';
        grid-template-columns: repeat(1, 1fr);
    }*/

    .pargraph_block{
        padding: 0px;
    }
    .pg_block{
        grid-template-areas:
        'pg_block_image'
        'pg_block_text';
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 10px;
        padding: 0px 0px;
        justify-content: space-evenly;
    }

    .grid_practice_overview{
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 5px;
    }
}