* {
  padding: 0;
  margin: 0;
  color: white;
  font-family: sans-serif;
}

body {
  background-color: black;
}

li {
  list-style-type: none;
}

main {
  height: 800px;
  background: url("portfolio.jpeg");
  background-position: center;
  padding: 16px;
}

main nav {
  padding: 14px;
  border-bottom: solid 1px #121212;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
}

main nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

main nav ul a {
  color: #b3b3b3;
  cursor: pointer;
}

main nav ul a:hover {
  color: mediumspringgreen;
}

main #caption {
  margin-left: 30px;
  margin-top: 250px;
}

main #caption .banner {
  background-color: mediumspringgreen;
  color: black;
  display: inline-block;
  font-size: 24pt;
  padding: 4px;
}

p {
  color: #b3b3b3;
}

#about {
  width: 60%;
  text-align: center;
  margin: 30px auto;
}

.label {
  color: mediumspringgreen;
}

.card {
  background-color: #121212;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 10px;
  margin: 80px;
  padding: 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.card #info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: end;
  margin-right: 60px;
}

.card #info #avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.card #skills {
  text-align: start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

h1 {
  font-size: 36pt;
}

#portfolio {
  background-color: #121212;
  text-align: center;
  padding: 10px 160px;
}

#portfolio .grid-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  padding: 18px;
}

#portfolio .grid-container .item {
  background-color: #1a1a1a;
  height: 160px;
}

#services {
  margin-top: 30px;
  text-align: center;
  padding: 10px 160px;
}

#services .services-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  padding: 18px;
}

#services .services-container .service {
  margin: 4px 40px;
}

#blogs {
  background-color: #121212;
  text-align: center;
  padding: 10px 160px;
}

#blogs .grid-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  padding: 18px;
}

#blogs .grid-container .blog-item {
  text-align: start;
}

#blogs .grid-container .blog-item .author {
  opacity: 0.8;
}

#blogs .grid-container .blog-img {
  padding: 8px;
  background-color: #333333;
  height: 240px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#contact {
  text-align: center;
  padding: 10px 160px;
}

#contact .contact-form {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

#contact button {
  position: relative;
}

.power-bar {
  background-color: #1a1a1a;
  width: 100%;
}

input,
textarea {
  background-color: #121212;
  color: #b3b3b3;
  border: none;
  padding: 16px;
}

textarea {
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-column: 1/4;
}

button {
  background-color: mediumspringgreen;
  padding: 12px;
  margin-top: 8px;
  border: none;
}

.line-1 {
  background-color: mediumspringgreen;
  width: 1%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-2 {
  background-color: mediumspringgreen;
  width: 2%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-3 {
  background-color: mediumspringgreen;
  width: 3%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-4 {
  background-color: mediumspringgreen;
  width: 4%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-5 {
  background-color: mediumspringgreen;
  width: 5%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-6 {
  background-color: mediumspringgreen;
  width: 6%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-7 {
  background-color: mediumspringgreen;
  width: 7%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-8 {
  background-color: mediumspringgreen;
  width: 8%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-9 {
  background-color: mediumspringgreen;
  width: 9%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-10 {
  background-color: mediumspringgreen;
  width: 10%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-11 {
  background-color: mediumspringgreen;
  width: 11%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-12 {
  background-color: mediumspringgreen;
  width: 12%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-13 {
  background-color: mediumspringgreen;
  width: 13%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-14 {
  background-color: mediumspringgreen;
  width: 14%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-15 {
  background-color: mediumspringgreen;
  width: 15%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-16 {
  background-color: mediumspringgreen;
  width: 16%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-17 {
  background-color: mediumspringgreen;
  width: 17%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-18 {
  background-color: mediumspringgreen;
  width: 18%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-19 {
  background-color: mediumspringgreen;
  width: 19%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-20 {
  background-color: mediumspringgreen;
  width: 20%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-21 {
  background-color: mediumspringgreen;
  width: 21%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-22 {
  background-color: mediumspringgreen;
  width: 22%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-23 {
  background-color: mediumspringgreen;
  width: 23%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-24 {
  background-color: mediumspringgreen;
  width: 24%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-25 {
  background-color: mediumspringgreen;
  width: 25%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-26 {
  background-color: mediumspringgreen;
  width: 26%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-27 {
  background-color: mediumspringgreen;
  width: 27%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-28 {
  background-color: mediumspringgreen;
  width: 28%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-29 {
  background-color: mediumspringgreen;
  width: 29%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-30 {
  background-color: mediumspringgreen;
  width: 30%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-31 {
  background-color: mediumspringgreen;
  width: 31%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-32 {
  background-color: mediumspringgreen;
  width: 32%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-33 {
  background-color: mediumspringgreen;
  width: 33%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-34 {
  background-color: mediumspringgreen;
  width: 34%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-35 {
  background-color: mediumspringgreen;
  width: 35%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-36 {
  background-color: mediumspringgreen;
  width: 36%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-37 {
  background-color: mediumspringgreen;
  width: 37%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-38 {
  background-color: mediumspringgreen;
  width: 38%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-39 {
  background-color: mediumspringgreen;
  width: 39%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-40 {
  background-color: mediumspringgreen;
  width: 40%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-41 {
  background-color: mediumspringgreen;
  width: 41%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-42 {
  background-color: mediumspringgreen;
  width: 42%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-43 {
  background-color: mediumspringgreen;
  width: 43%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-44 {
  background-color: mediumspringgreen;
  width: 44%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-45 {
  background-color: mediumspringgreen;
  width: 45%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-46 {
  background-color: mediumspringgreen;
  width: 46%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-47 {
  background-color: mediumspringgreen;
  width: 47%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-48 {
  background-color: mediumspringgreen;
  width: 48%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-49 {
  background-color: mediumspringgreen;
  width: 49%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-50 {
  background-color: mediumspringgreen;
  width: 50%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-51 {
  background-color: mediumspringgreen;
  width: 51%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-52 {
  background-color: mediumspringgreen;
  width: 52%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-53 {
  background-color: mediumspringgreen;
  width: 53%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-54 {
  background-color: mediumspringgreen;
  width: 54%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-55 {
  background-color: mediumspringgreen;
  width: 55%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-56 {
  background-color: mediumspringgreen;
  width: 56%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-57 {
  background-color: mediumspringgreen;
  width: 57%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-58 {
  background-color: mediumspringgreen;
  width: 58%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-59 {
  background-color: mediumspringgreen;
  width: 59%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-60 {
  background-color: mediumspringgreen;
  width: 60%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-61 {
  background-color: mediumspringgreen;
  width: 61%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-62 {
  background-color: mediumspringgreen;
  width: 62%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-63 {
  background-color: mediumspringgreen;
  width: 63%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-64 {
  background-color: mediumspringgreen;
  width: 64%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-65 {
  background-color: mediumspringgreen;
  width: 65%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-66 {
  background-color: mediumspringgreen;
  width: 66%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-67 {
  background-color: mediumspringgreen;
  width: 67%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-68 {
  background-color: mediumspringgreen;
  width: 68%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-69 {
  background-color: mediumspringgreen;
  width: 69%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-70 {
  background-color: mediumspringgreen;
  width: 70%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-71 {
  background-color: mediumspringgreen;
  width: 71%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-72 {
  background-color: mediumspringgreen;
  width: 72%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-73 {
  background-color: mediumspringgreen;
  width: 73%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-74 {
  background-color: mediumspringgreen;
  width: 74%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-75 {
  background-color: mediumspringgreen;
  width: 75%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-76 {
  background-color: mediumspringgreen;
  width: 76%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-77 {
  background-color: mediumspringgreen;
  width: 77%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-78 {
  background-color: mediumspringgreen;
  width: 78%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-79 {
  background-color: mediumspringgreen;
  width: 79%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-80 {
  background-color: mediumspringgreen;
  width: 80%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-81 {
  background-color: mediumspringgreen;
  width: 81%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-82 {
  background-color: mediumspringgreen;
  width: 82%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-83 {
  background-color: mediumspringgreen;
  width: 83%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-84 {
  background-color: mediumspringgreen;
  width: 84%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-85 {
  background-color: mediumspringgreen;
  width: 85%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-86 {
  background-color: mediumspringgreen;
  width: 86%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-87 {
  background-color: mediumspringgreen;
  width: 87%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-88 {
  background-color: mediumspringgreen;
  width: 88%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-89 {
  background-color: mediumspringgreen;
  width: 89%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-90 {
  background-color: mediumspringgreen;
  width: 90%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-91 {
  background-color: mediumspringgreen;
  width: 91%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-92 {
  background-color: mediumspringgreen;
  width: 92%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-93 {
  background-color: mediumspringgreen;
  width: 93%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-94 {
  background-color: mediumspringgreen;
  width: 94%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-95 {
  background-color: mediumspringgreen;
  width: 95%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-96 {
  background-color: mediumspringgreen;
  width: 96%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-97 {
  background-color: mediumspringgreen;
  width: 97%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-98 {
  background-color: mediumspringgreen;
  width: 98%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}

.line-99 {
  background-color: mediumspringgreen;
  width: 99%;
  margin-bottom: 8px;
  padding: 4px;
  color: black;
}
/*# sourceMappingURL=index.css.map */