/* nav starts */
nav {
  display: none;
background-color: rgb(167, 167, 207); 
position: fixed;
top: 0;
left: 80%;
width: 20%;
    height: 100vh;
}
ul{
   list-style-type: none;
}
li {
  float: left;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: blue;
}
/* nav ends */

/* hamburger icon begins */
.shownav {
height: 0.8em;
    width: 1.25em;
    display: block;
    border-top: 0.2em solid orange;
    border-bottom: 0.2em solid orange;
   border-radius: 0.1em;
}
 .shownav:before { 
     content: '';
    position: absolute;
    width: 1.25em;
    margin-top: 0.3em;
   
    border-top: 0.2em solid green;
}
 #clicked .shownav {display: block;}
#clicked .nav {display: none}

#clicked:target .shownav{display: none;}
#clicked:target nav{display:block;}
.hidenav{
    color: white;
}

.hidenav{display:none;}
#clicked:target .hidenav{display:block;}
/* handburger icon ends*/


.aside, .main {
        width:100%; 
      }
    body{
        background-color:rgb(103, 143, 161);;
    color: white;
    }

.container:hover{
    
    filter: grayscale(1);
    border-style: none;
    border-radius: 100%;
    transition: background-size 1.6s ease;
    filter: grayscale(1);
    transition: background-size 1.6s ease; 
}
.p4{
position: relative;
top: 60px;

}

footer {
  align-items: flex-end;
      position: fixed;
      left: 0;
      bottom: 0;
      height: 15px;
      width: 100%;
      background-color:rgb(0, 174, 255);
      color: white;
      text-align: center;
      grid-area:footer;
  }