* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

.example {
  display: -ms-grid;
  display: grid;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
  background: linear-gradient(to bottom, white, black);
}

/* Basic styling */
body {
  font-family: "Montserrat", "sans-serif";
}

nav {
  background: #fff;
  padding: 0px 10px;
  font-family: "Montserrat", "sans-serif";
  font-weight: bold;
  /*height: 42px;*/
  line-height: 42px;
  /*text-align: center;*/
  position: fixed;
  width: 100%;
}

nav a {
  color: black;
}

.logo {
  position: absolute;
  width: 300px;
  /*height: 42px;*/
}

/*mobile test setup*/
@media screen and (max-width: 768px) {
  .container {
    margin: 0;
  }

  .toggle {
    float: right;
  }

  .main_list {
    margin-top: 42px;
    text-align: center;
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.7s ease;
    transition: height 0.7s ease;
  }

  .show_list {
    margin-top: 42px;
    height: 168px;
    -webkit-transition: height 0.7s ease;
    transition: height 0.7s ease;
  }

  .main_list ul {
    width: 100%;
  }

  .main_list ul li {
    /*display: table;*/
    width: 100%;
  }

  .main_list ul li a {
    display: inline-block;
    color: black;
    text-decoration: none;
    width: 100%;
  }

  .main_list ul li a:hover {
    background-color: grey;
    -webkit-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
  }
  /*
  .nav div.main_list {
    width: 100%;
    height: 0px;
    overflow: hidden;
    transition: height 0.7s ease;
  }

  .nav div.show_list {
    height: 168px;
    transition: height 0.7s ease;
  }

  .nav div.main_list ul {
    flex-direction: column;
    width: 100%;
    height: 200px;
    top: 80px;
    right: 0;
    left: 0;
  }

  .nav div.main_list ul li {
    width: 100%;
    height: 40px;
  }

  .nav div.main_list ul li a {
    text-align: center;
    text-decoration: none;
    line-height: 40px;
    width: 100%;
    height: 40px;
    display: table;
  }

  nav ul li a:hover {
    background-color: #00aae8;
    transition: background-color 0.8s ease;
  }*/
}

/* Styles for Personal Information Section */
.about-me {
  padding-top: 90px;
  background-color: rgb(232, 230, 227);
  padding-bottom: 90px;
}

.about-me p {
  font-size: 24px;
}

p {
  width: 60%;
  margin: auto;
  color: black;
}

/* Styles for Technologies Section */
.tech {
  /*position: relative;*/
  /*border: 1px black solid;*/
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

h1 {
  display: block;
  text-align: center;
  font-family: "Montserrat", "sans-serif";
  padding: 10px;
}

.cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.card {
  padding: 15px;
  text-align: center;
}

.card img {
  width: 80%;
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

.card img:hover {
  width: 90%;
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

.tech a {
  display: block;
  text-align: center;
  cursor: pointer;
  margin-top: 10px;
  padding: 5px;
  font-family: "Montserrat", "sans-serif";
  font-weight: bold;
}

/*style project section*/
.projects {
  height: 400px;
}

/*style contact info section*/
.contact {
  background-color: rgb(232, 230, 227);
  color: black;
  padding-top: 50px;
  padding-bottom: 50px;
}

.contact img {
  display: block;
  width: 130px;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-left: auto;
  margin-right: auto;
}

/* style contact section */
p {
  /*display: block;*/
  font-family: "Montserrat", "sans-serif";
  font-size: 16px;
  line-height: 1.6;
}

.mail-p {
  font-weight: bold;
}

span a {
  text-decoration: none;
  color: #00aae8;
  cursor: pointer;
}

@media screen and (min-width: 768px) {
  .toggle {
    display: none;
  }

  nav {
    height: 42px;
  }

  nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style-type: none;
    float: right;
  }

  nav ul li {
    /*display: inline-block;*/
    /*margin: 0;*/
  }

  nav ul li a {
    display: block;
    text-decoration: none;
    color: black;
    padding: 0 12px;
    margin-top: 8px;
    line-height: 25px;
  }

  nav ul li a::after {
    content: "";
    display: block;
    width: 0px;
    height: 2px;
    background-color: #00aae8;
    -webkit-transition: width 0.4s ease-in;
    transition: width 0.4s ease-in;
  }

  nav ul li a:hover::after {
    width: 100%;
  }

  /*
    nav ul li a:hover {
        transition: background-color 0.7s;
        background-color: lightgrey;
        border-bottom: black solid;*/
  /*transition: all 0.4s ease-in-out;*/
  /* }*/
  /*
    .toggle {
        display: none;
    }*/

  .cards {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: (33.3%)[3];
    -ms-grid-columns: (33.3%)[3];
        grid-template: repeat(3, 33.3%) / repeat(3, 33.3%);
  }
}