* {
  margin: 0;
  padding: 0;
  font-family: 'Andika New Basic', sans-serif;
  box-sizing: border-box;
}

body {
  background-color: #dedede;
}

.grid-container {
  display: grid;
  grid-template-areas: 'menu header' 'menu portfolio' 'menu about' 'menu contact' 'menu footer';
  width: 80%;
  margin: 0 auto;
  grid-template-columns: 300px 1fr;
  grid-template-rows: 160px auto auto auto 100px;
  grid-gap: 20px;
}


/* Header and Filter */

.header {
  grid-area: header;
  border-bottom: 5px solid #cecece;
  padding: 10px 0;
}

.header h1 {
  font-size: 40px;
  text-align: left;
  font-weight: bold;
}


/* Filter */

.header ul {
  font-size: 15px;
  text-align: left;
  margin-top: 30px;
}

.header ul li {
  display: inline-block;
  list-style-type: none;
  padding: 5px 10px;
  user-select: none;
}

.header i {
  margin-right: 5px;
}

.header span {
  margin-right: 10px;
}


/* Hover effect for Filter */

.header ul li:hover:not(:first-child) {
  cursor: pointer;
  color: #000;
  background-color: #cecece;
}

.active {
  color: #fff;
  background-color: #000;
}

.header ul:first-of-type('li') {
  color: red;
}


/* End of Header and Filter */


/* Side menu with profileheader */

.nav-bar {
  grid-area: menu;
  background-color: #fff;
}


/* Profile picture */

#profile-picture {
  height: 100%;
  width: 100px;
  height: 100px;
  margin: 20px 20px 30px 20px;
}

#profile-picture img {
  object-fit: cover;
  border-radius: 4px;
}

.nav-bar h2 {
  font-size: 25px;
  margin-left: 20px;
}


/* Side navigation */

.nav-bar ul {
  list-style-type: none;
  font-size: 20px;
  margin-top: 15px;
  user-select: none;
}

.nav-bar ul a {
  text-decoration: none;
  color: #000;
  display: block;
  padding: 10px 20px;
}

.nav-bar ul a i {
  margin-right: 10px;
}

.nav-bar ul a:hover {
  background-color: #cecece;
}

#social-media {
  margin: 10px 0 20px 20px;
  font-size: 20px;
}

#social-media a {
  text-decoration: none;
  color: #000;
}

#social-media a:hover {
  opacity: 0.5;
}

.nav-bar
/* End of navigation */

.main {
  grid-area: portfolio;
}

.main {
  display: grid;
  grid-template-areas: 'project project project' 'project project project' 'project-footer project-footer project-footer';
  width: 100%;
  margin: 0 auto;
  grid-gap: 20px;
  grid-template-rows: 400px 400px;
  border-bottom: 3px solid #cecece;
}

.image-container {
  height: 250px;
  background-image: url('file:///C:/Users/Dell/Desktop/Portfolio/img/avatar.jpg');
  background-size: cover;
  margin-bottom: 10px;
}

.project-footer {
  margin: 0 auto;
  grid-area: 'project-footer';
  grid-column: 1 / 4;
  margin-bottom: 30px;
}

.image-button {
  display: inline-block;
  width: 40px;
  text-align: center;
  padding: 10px;
  font-size: 12px;
}

.image-button:hover {
  background-color: #000;
  color: #fff;
  cursor: pointer;
}

.project-footer .active:hover {
  color: #000;
  background-color: #cecece;
}

.about {
  grid-area: about;
}

.about {
  display: grid;
  grid-template-areas: 'about about' 'about about' 'about-me about-me';
  width: 100%;
  margin: 0 auto;
  grid-gap: 20px;
}

.about-image {
  background-image: url('file:///C:/Users/Dell/Desktop/Portfolio/img/avatar.jpg');
  background-size: cover;
  margin-bottom: 10px;
  height: 400px;
}

.about-me {
  grid-area: 'about-me';
  grid-column: 1 / 3;
  margin-bottom: 20px;
  padding: 10px;
}

.skills {
  margin: auto;
  text-align: center;
}

.skills ul {
  list-style-type: none;
  padding: 20px;
}

.skills ul h4 {
  font-size: 20px;
}

.skills ul li {
  margin-bottom: 10px;
}

.about-me p {
  margin-bottom: 50px;
}

.about-me a {
  text-decoration: none;
  color: #000;
  padding: 15px;
  background-color: #cecece;
}

.about-me a:hover {
  background-color: #bebebe;
}

.contact {
  grid-area: contact;
  background-color: #bebebe;
  padding: 15px;
  width: 100%;
  display: grid;
  grid-template-areas: 'contact-header contact-header contact-header' 'contact-button contact-button contact-button' 'contact-hr contact-hr contact-hr' 'contact-main contact-main contact-main';
  width: 100%;
  margin: 0 auto;
  grid-template-columns: 33%;
  grid-gap: 20px 0px;
}

.contact h3 {
  grid-area: contact-header;
  grid-column: 1 / 4;
  margin-bottom: 10px;
}

.contact a {
  background-color: #333;
  color: #fefefe;
  text-decoration: none;
  font-size: 15px;
  text-align: center;
  padding: 15px;
}

.contact:nth-child(5) a:nth-child(3) {
  background-color: rgb(34, 151, 87);
}

.contact a i {
  display: block;
  font-size: 30px;
  margin-bottom: 5px;
}

.contact hr {
  grid-area: contact-hr;
  grid-column: 1/4;
  color: #fefefe;
  background-color: #fefefe;
  height: 1px;
  border: none;
  margin-top: 20px;
}

.contact form {
  grid-area: contact-main;
  grid-column: 1/4;
}

.contact input,
.contact textarea {
  width: 100%;
  margin-bottom: 10px;
  border: none;
  outline: none;
  resize: none;
  padding: 10px;
}

.contact button {
  border: none;
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  font-size: 14px;
}

.contact button:hover {
  cursor: pointer;
  background-color: #dedede;
  color: #000;
}

.contact button i {
  margin-right: 10px;
}

.footer {
  grid-area: footer;
  text-align: center;
  background-color: #333;
  color: #cecece;
  padding: 20px;
}

.footer a {
  color: #cecece;
}

/* Adding css for the sticky wrapper */

.nav-sticky {
  position: sticky;
  top: 0;
}


/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {
  .example {
    background: red;
  }
}


/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {
  .example {
    background: green;
  }
}


/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {
  .example {
    background: blue;
  }
}


/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
  .grid-container {
    margin: 0;
    width: 99%;
  }
}


/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
  .example {
    background: pink;
  }
}