body, html {
    height: 100%; /* to avoid scrollbars when the css grid is setup*/
    margin: 0; /*get rid of the default padding*/
}

body{
    /*font-family: 'Montserrat';*/
    display:grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
}

.bg, .bg2{
    width: 100%;
    height: 100%;
    position: absolute; /*this makes the bg(s) one below the other*/
}

.bg {
    /* Use clippy bzellefree */
    -webkit-clip-path: polygon(0 100%, 0 0, 15% 56%, 23% 71%, 35% 80%, 57% 84%, 76% 90%, 100% 100%);
    clip-path: polygon(0 100%, 0 0, 15% 56%, 23% 71%, 35% 80%, 57% 84%, 76% 90%, 100% 100%);
    z-index: -1; /* since there are two bg*/
    background-color: #226dbc;
}

.bg2{
    -webkit-clip-path: polygon(0 100%, 0 0, 17% 54%, 25% 70%, 37% 79%, 59% 83%, 78% 89%, 100% 100%);
    clip-path: polygon(0 100%, 0 0, 17% 54%, 25% 70%, 37% 79%, 59% 83%, 78% 89%, 100% 100%);
    z-index: -2;
    background-color: #2a5f98;
}

.menu_obj { grid-area: menu; }
.title_obj { grid-area: right; }
.filler_obj { grid-area: filler; }
.footer_obj { grid-area: footer; }

.grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto auto 8%;
    grid-template-areas:
    'menu menu right right right right'
    'menu menu right right right right'
    'filler filler right right right right'
    'footer footer footer footer footer footer';
    grid-gap: 10px;
    padding: 0;
    height: 100%;
}

.title_obj{
    font-family: "Arial";
    font-size: 1.5vw;
    text-align: center;
    align-self: center;
}

.title_obj a{
  text-decoration:none;
}

.desc_ption{
    padding:10px;
}

.menu_obj{
    font-family: "Arial";
    align-self: center;
}

ul{
    list-style-type: none;
    padding: 5%;
    perspective:1000px;
}

ul li{
    display:grid;
    grid-template-columns: 20% auto;
    border-radius: 10px;
    padding: 15px;
    cursor: pointer;
    transform: rotateY(30deg) rotateX(15deg) scale(1);
    transition: transform .4s ease-out;
    position: absolute; /*sit on top of each other slightly*/
    border-bottom:4px solid rgba(0,0,0,.2);
    mix-blend-mode: multiply;/*gives the glass effect*/
    width: 90%;
    animation: 1s ease-out 0s 1 zoom_in_li;
/*     animation-fill-mode: forwards; */

}

@keyframes zoom_in_li {
  0%, 20%{
    transform: rotateY(30deg) rotateX(15deg) scale(0.1);
  }
  100% {
    transform: rotateY(30deg) rotateX(15deg) scale(1);
  }
}

ul li:nth-child(1){
    background: rgb(242, 228, 255);
    z-index: 2;
    top: -80px;
}

ul li:nth-child(2){
    background: #9797ee;
    z-index: 1;
}

ul li:nth-child(3){
    background: #9bee97;
    top: 130px;
}

ul li:hover{
    transform: rotateY(10deg) rotateX(7deg) scale(1.03);
    transition: transform .4s ease-out;
    z-index:3;
    mix-blend-mode:normal;
}

/*ul li:not(:hover){
    transform: rotateY(30deg) rotateX(15deg) scale(1);
}*/

a, a:active, a:focus {
   outline: none;
}

.external {
    width: 5vh;
    cursor: pointer;
    padding-left: 2em;
    padding-right: 2em;
    align-self: center;
    transform: scale(1);
    transition: transform .4s ease-out;
    animation: 1s ease-out 0s 1 zoom_in_external;
}

@keyframes zoom_in_external {
  0%, 50% {
    transform: scale(0.1);
  }
  100% {
    transform: scale(1);
  }
}

.external:hover{
    transform: scale(2);
    transition: transform .4s ease-out;
}

.footer_obj {
    text-align: center;
    align-self: center;
    color: white;
}

@media only screen and (min-width: 1300px) {
    .title_obj{
        font-size: 1vw;
    }
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    .grid-container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 40% auto 8% 0.1%;
    grid-template-areas:
        'right'
        'menu'
        'footer'
        'filler';
    grid-gap: 10px;
    padding: 0;
    height: 100%;
    }

    .title_obj{
        font-size: 3.5vw;
    }

    .bg, .bg2{
        visibility: hidden;
    }

    ul{
        perspective:none;
    }

    ul li{
        transform: rotateY(0deg) rotateX(0deg);
        animation: none;
        position: static;
    }

    ul li:hover{
        transform: scale(1.06);
        transition: transform .4s ease-out;
        z-index:3;
        mix-blend-mode:normal;
    }

    .footer_obj {
        color: black;
    }
}