* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}


.container {
    display: grid;
    grid-template-rows: 80px auto 1fr auto 55px;
    grid-template-columns: 0.15fr 4fr 0.15fr;
    height: 100vh;
    grid-template-areas:
        "header        header        header"
        "left-aside    main        right-aside"
        "left-aside    main          right-aside"
        "left-aside    main          right-aside"
        "footer        footer        footer";
    grid-gap: 0px;  padding: 0px;
    font-weight: 600;  font-size: 20px;
    gap: 0px;
    background-color: #161616;
  }

.header {
    grid-area: header;
    background-color: #000000;
    padding: 20px;
    text-align: center;
}

.logo {
    position: absolute;
    top: 0px;
    right: 20px;
}

.dropbtn {
    position: absolute;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    padding: 10px 10px;
    border-radius: 6px;
    background: #575757;
    color: #000000;
}

.dropdown__content {
    display: none;
    position: absolute;
    background-color: #575757;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    z-index: 1;
}

.dropdown__content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    border-radius: 6px;
    display: block;
}

.dropdown__content a:hover {
    background-color: #1900ff;
    transition: all 0.3s ease;
    border-radius: 6px;
}

.dropdown:hover .dropdown__content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #555555;
    transition: all 0.3s ease;
    border-radius: 6px;
}

.left-aside {
    grid-area: left-aside;
    background-color: #0e0e0e;
    padding: 20px;
}

.main {
    grid-area: main;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 4fr 4fr 4fr 4fr;
    height: 150vh;
    grid-template-areas:
        "button_01    button_02       button_03      button_04"
        "button_05    button_06       button_07      button_08"
        "button_09    button_10       button_11      button_12"
        "button_13    button_14       button_15      button_16";
    grid-gap: 10px;  padding: 10px;
    font-weight: 600;  font-size: 20px;
    flex-direction: column; 
    gap: 0px;
    background-color: #161616;
    padding: 20px;
}

.right-aside {
    grid-area: right-aside;
    background-color: #0e0e0e;
    padding: 20px;
}

.footer {
    grid-area: footer;
    align-self: center;
    background-color: #000000;
    color: #575757;
    padding: 40px;
    text-align: center;
}

.MO:hover {
    filter:drop-shadow(2px 2px 40px #ff00d4);
}

.jpk:hover {
    filter:drop-shadow(2px 2px 40px #8f00c7);
}

.sg:hover {
    filter:drop-shadow(2px 2px 40px #00ff55);
}

.cat:hover {
    filter:drop-shadow(4px 4px 40px #646363);
}

.sac:hover {
    filter:drop-shadow(4px 4px 40px #0053a0);
}

.ari:hover {
    filter:drop-shadow(4px 4px 40px #00ff55);
}

.choros:hover {
    filter:drop-shadow(4px 4px 40px #8f00c7);
}

.jpk_btn {
    grid-area: button_05;
    cursor: pointer;
    background-color: #161616;
    border: none;   
}

.sg_btn {
    grid-area: button_09;
    cursor: pointer;
    background-color: #161616;
    border: none;
}

.sac_btn {
    grid-area: button_11;
    cursor: pointer;
    background-color: #161616;
    border: none;
}

.cat_btn {
    grid-area: button_15;
    cursor: pointer;
    background-color: #161616;
    border: none;
}

.choros_btn {
    grid-area: button_07;
    cursor: pointer;
    background-color: #161616;
    border: none;
}

.ari_btn {
    grid-area: button_01;
    background-color: #161616;
    border: none;
}

.li_btn {
    grid-area: button_13;
    cursor: pointer;
    background-color: #161616;
    border: none;
}

.gh_btn {
    grid-area: button_14;
    cursor: pointer;
    background-color: #161616;
    border: none;
}

.MO_btn {
    grid-area: button_03;
    cursor: pointer;
    background-color: #161616;
    border: none;
}

.gh:hover {
    filter:drop-shadow(4px 4px 40px #ffffff);
}

.li:hover {
    filter:drop-shadow(4px 4px 40px #0026ff);
}

.MO_title {
    grid-area: button_04;
    position: relative;
    top: 50px;
    color: #ff00ff;
}

.MO_content {
    grid-area: button_04;
    position: relative;
    top: 90px;
    color: #fff;
}

.sg_title {
    grid-area: button_10;
    position: relative;
    top: 80px;
    color: #00ff51;
}

.sg_content {
    grid-area: button_10;
    position: relative;
    top: 110px;
    color: #fff;
}

.ari_title {
    grid-area: button_02;
    position: relative;
    top: 80px;
    color: #00ff51;
}

.ari_content {
    grid-area: button_02;
    position: relative;
    top: 110px;
    color: #fff;
}

.jpk_title {
    grid-area: button_06;
    position: relative;
    top: 80px;
    color: #8f00c7;
}

.jpk_content {
    grid-area: button_06;
    position: relative;
    top: 110px;
    color: #fff;
}

.cat_title {
    grid-area: button_16;
    position: relative;
    top: 50px;
    color: #646363;
}

.cat_content {
    grid-area: button_16;
    position: relative;
    top: 90px;
    color: #fff;
}

.sac_title {
    grid-area: button_12;
    position: relative;
    top: 50px;
    color: #004483;
}

.sac_content {
    grid-area: button_12;
    position: relative;
    top: 90px;
    color: #fff;
}

.choros_title {
    grid-area: button_08;
    position: relative;
    top: 80px;
    color: #8f00c7;
}

.choros_content {
    grid-area: button_08;
    position: relative;
    top: 110px;
    color: #fff;
}

@media (max-width: 1220px) {
    .container {
    grid-template-rows: 80px 0px 200fr 0px 100px;
    grid-template-columns: 1fr;
    height: 200vh;
    grid-template-areas:
        "header"
        "left-aside"
        "main"
        "right-aside"
        "footer";
    }

    .main {
        grid-area: main;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr ;
        height: 220vh;
        grid-template-areas:
            "button_01 button_10"
            "button_02 button_11"
            "button_03 button_12"
            "button_04 button_13"
            "button_05 button_14"
            "button_06 button_15"
            "button_21 button_22"
            "button_07 button_07"
            "button_08 button_08";
        grid-gap: 10px;  padding: 10px;
        font-weight: 600;  font-size: 20px;
        flex-direction: column; 
        background-color: #161616;
        gap: 0px;
    }

    .ari_btn {
        grid-area: button_01;
    }

    .jpk_btn {
        grid-area: button_02;
    }
    
    .sg_btn {
        grid-area: button_03;
    }
    
    .sac_btn {
        grid-area: button_05;
    }

    .choros_btn {
        grid-area: button_04;
    }
    
    .cat_btn {
        grid-area: button_06;
    }

    .li_btn {
        grid-area: button_07;
    }

    .gh_btn {
        grid-area: button_08;
    }

    .ari_title {
        position: relative;
        top: 30px;
        grid-area: button_10;
    }

    .MO_btn {
        grid-area: button_21;
    }

    .MO_title {
        position: relative;
        top: 60px;
        grid-area: button_22;
    }

    .jpk_title {
        position: relative;
        top: 40px;
        grid-area: button_11;
    }
    
    .sg_title {
        grid-area: button_12;
    }
    
    .sac_title {
        grid-area: button_14;
    }

    .choros_title {
        grid-area: button_13;
    }
    
    .cat_title {
        grid-area: button_15;
    }

    .ari_content {
        grid-area: button_10;
        position: relative;
        top: 60px;
    }

    .jpk_content {
        grid-area: button_11;
        position: relative;
        top: 70px;
    }

    .logo {
        position: absolute;
        top: 0px;
        right: 0px;
    }

    .cat_content, .choros_content, .sg_content, .sac_content, .MO_content {
        display: none;
    }

    .dropbtn {
        position: absolute;
        top: 18px;
    }

    .dropdown__content {
        position: absolute;
        top: 18px;
    }
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}


.container {
    display: grid;
    grid-template-rows: 80px auto 1fr auto 55px;
    grid-template-columns: 0.15fr 4fr 0.15fr;
    height: 100vh;
    grid-template-areas:
        "header        header        header"
        "left-aside    main        right-aside"
        "left-aside    main          right-aside"
        "left-aside    main          right-aside"
        "footer        footer        footer";
    grid-gap: 0px;  padding: 0px;
    font-weight: 600;  font-size: 20px;
    gap: 0px;
    background-color: #161616;
  }

.header {
    grid-area: header;
    background-color: #000000;
    padding: 20px;
    text-align: center;
}

.logo {
    position: absolute;
    top: 0px;
    right: 20px;
}

.dropbtn {
    position: absolute;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    padding: 10px 10px;
    border-radius: 6px;
    background: #575757;
    color: #000000;
}

.dropdown__content {
    display: none;
    position: absolute;
    background-color: #575757;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    z-index: 1;
}

.dropdown__content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    border-radius: 6px;
    display: block;
}

.dropdown__content a:hover {
    background-color: #1900ff;
    transition: all 0.3s ease;
    border-radius: 6px;
}

.dropdown:hover .dropdown__content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #555555;
    transition: all 0.3s ease;
    border-radius: 6px;
}

.left-aside {
    grid-area: left-aside;
    background-color: #0e0e0e;
    padding: 20px;
}

.main {
    grid-area: main;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 4fr 4fr 4fr 4fr;
    height: 150vh;
    grid-template-areas:
        "button_01    button_02       button_03      button_04"
        "button_05    button_06       button_07      button_08"
        "button_09    button_10       button_11      button_12"
        "button_13    button_14       button_15      button_16";
    grid-gap: 10px;  padding: 10px;
    font-weight: 600;  font-size: 20px;
    flex-direction: column; 
    gap: 0px;
    background-color: #161616;
    padding: 20px;
}

.right-aside {
    grid-area: right-aside;
    background-color: #0e0e0e;
    padding: 20px;
}

.footer {
    grid-area: footer;
    align-self: center;
    background-color: #000000;
    color: #575757;
    padding: 40px;
    text-align: center;
}

.MO:hover {
    filter:drop-shadow(2px 2px 40px #ff00d4);
}

.jpk:hover {
    filter:drop-shadow(2px 2px 40px #8f00c7);
}

.sg:hover {
    filter:drop-shadow(2px 2px 40px #00ff55);
}

.cat:hover {
    filter:drop-shadow(4px 4px 40px #646363);
}

.sac:hover {
    filter:drop-shadow(4px 4px 40px #0053a0);
}

.ari:hover {
    filter:drop-shadow(4px 4px 40px #00ff55);
}

.choros:hover {
    filter:drop-shadow(4px 4px 40px #8f00c7);
}

.jpk_btn {
    grid-area: button_05;
    cursor: pointer;
    background-color: #161616;
    border: none;   
}

.sg_btn {
    grid-area: button_09;
    cursor: pointer;
    background-color: #161616;
    border: none;
}

.sac_btn {
    grid-area: button_11;
    cursor: pointer;
    background-color: #161616;
    border: none;
}

.cat_btn {
    grid-area: button_15;
    cursor: pointer;
    background-color: #161616;
    border: none;
}

.choros_btn {
    grid-area: button_07;
    cursor: pointer;
    background-color: #161616;
    border: none;
}

.ari_btn {
    grid-area: button_01;
    background-color: #161616;
    border: none;
}

.li_btn {
    grid-area: button_13;
    cursor: pointer;
    background-color: #161616;
    border: none;
}

.gh_btn {
    grid-area: button_14;
    cursor: pointer;
    background-color: #161616;
    border: none;
}

.MO_btn {
    grid-area: button_03;
    cursor: pointer;
    background-color: #161616;
    border: none;
}

.gh:hover {
    filter:drop-shadow(4px 4px 40px #ffffff);
}

.li:hover {
    filter:drop-shadow(4px 4px 40px #0026ff);
}

.MO_title {
    grid-area: button_04;
    position: relative;
    top: 50px;
    color: #ff00ff;
}

.MO_content {
    grid-area: button_04;
    position: relative;
    top: 90px;
    color: #fff;
}

.sg_title {
    grid-area: button_10;
    position: relative;
    top: 80px;
    color: #00ff51;
}

.sg_content {
    grid-area: button_10;
    position: relative;
    top: 110px;
    color: #fff;
}

.ari_title {
    grid-area: button_02;
    position: relative;
    top: 80px;
    color: #00ff51;
}

.ari_content {
    grid-area: button_02;
    position: relative;
    top: 110px;
    color: #fff;
}

.jpk_title {
    grid-area: button_06;
    position: relative;
    top: 80px;
    color: #8f00c7;
}

.jpk_content {
    grid-area: button_06;
    position: relative;
    top: 110px;
    color: #fff;
}

.cat_title {
    grid-area: button_16;
    position: relative;
    top: 50px;
    color: #646363;
}

.cat_content {
    grid-area: button_16;
    position: relative;
    top: 90px;
    color: #fff;
}

.sac_title {
    grid-area: button_12;
    position: relative;
    top: 50px;
    color: #004483;
}

.sac_content {
    grid-area: button_12;
    position: relative;
    top: 90px;
    color: #fff;
}

.choros_title {
    grid-area: button_08;
    position: relative;
    top: 80px;
    color: #8f00c7;
}

.choros_content {
    grid-area: button_08;
    position: relative;
    top: 110px;
    color: #fff;
}

@media (max-width: 1220px) {
    .container {
    grid-template-rows: 80px 0px 200fr 0px 100px;
    grid-template-columns: 1fr;
    height: 200vh;
    grid-template-areas:
        "header"
        "left-aside"
        "main"
        "right-aside"
        "footer";
    }

    .main {
        grid-area: main;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr ;
        height: 220vh;
        grid-template-areas:
            "button_01 button_10"
            "button_02 button_11"
            "button_03 button_12"
            "button_04 button_13"
            "button_05 button_14"
            "button_06 button_15"
            "button_21 button_22"
            "button_07 button_07"
            "button_08 button_08";
        grid-gap: 10px;  padding: 10px;
        font-weight: 600;  font-size: 20px;
        flex-direction: column; 
        background-color: #161616;
        gap: 0px;
    }

    .ari_btn {
        grid-area: button_01;
    }

    .jpk_btn {
        grid-area: button_02;
    }
    
    .sg_btn {
        grid-area: button_03;
    }
    
    .sac_btn {
        grid-area: button_05;
    }

    .choros_btn {
        grid-area: button_04;
    }
    
    .cat_btn {
        grid-area: button_06;
    }

    .li_btn {
        grid-area: button_07;
    }

    .gh_btn {
        grid-area: button_08;
    }

    .ari_title {
        position: relative;
        top: 30px;
        grid-area: button_10;
    }

    .MO_btn {
        grid-area: button_21;
    }

    .MO_title {
        position: relative;
        top: 60px;
        grid-area: button_22;
    }

    .jpk_title {
        position: relative;
        top: 40px;
        grid-area: button_11;
    }
    
    .sg_title {
        grid-area: button_12;
    }
    
    .sac_title {
        grid-area: button_14;
    }

    .choros_title {
        grid-area: button_13;
    }
    
    .cat_title {
        grid-area: button_15;
    }

    .ari_content {
        grid-area: button_10;
        position: relative;
        top: 60px;
    }

    .jpk_content {
        grid-area: button_11;
        position: relative;
        top: 70px;
    }

    .logo {
        position: absolute;
        top: 0px;
        right: 0px;
    }

    .cat_content, .choros_content, .sg_content, .sac_content, .MO_content {
        display: none;
    }

    .dropbtn {
        position: absolute;
        top: 18px;
    }

    .dropdown__content {
        position: absolute;
        top: 18px;
    }
}