*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  width: 98.9vw;
}

body #home {
  width: 98.9vw;
  height: 100vh;
  background: -webkit-gradient(linear, left top, right top, from(#333333), color-stop(97.68%, rgba(196, 196, 196, 0)));
  background: linear-gradient(90deg, #333333 0%, rgba(196, 196, 196, 0) 97.68%);
}

body #welcome-message {
  font-style: normal;
  font-weight: bold;
  font-size: 3vw;
  color: #ffffff;
  margin-left: 8.6vw;
  padding-top: 12.5vw;
  width: 82.8vw;
}

body #welcome-message p {
  line-height: 7.5vw;
}

body #welcome-message p span {
  font-size: 4vw;
}

body #welcome-message p #name {
  color: #E46D16;
}

body #welcome-message p #title {
  color: #333333;
}

body nav {
  border: 2px solid #E46D16;
  width: 82.8vw;
  margin: auto;
  height: 60px;
  overflow: hidden;
  background-color: #ffffff;
}

body nav ul {
  margin: 7px 0;
}

body nav ul .nav-link li {
  display: inline;
  list-style: none;
  float: left;
  margin: auto 50px;
}

body nav ul .nav-link li a {
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  color: #000000;
  font-style: normal;
  font-weight: 900;
  font-size: 20px;
  display: block;
  padding: 10px;
}

body nav ul .active {
  color: #E46D16 !important;
  text-decoration: underline !important;
}

body .sticky {
  position: fixed;
  top: 0;
  width: 82.8vw;
  margin-left: 8vw;
}

body #about {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
      grid-template-columns: 50% 50%;
  margin: auto 10vw;
}

body #about img {
  width: 500px;
  height: 335.57px;
  border-radius: 10px;
}

body #about p {
  font-size: 20px;
  line-height: 40px;
}

body #about,
body #portfolio,
body #blog,
body #contact,
body .main-container {
  padding-top: 10vw;
  width: 82.8vw;
  margin: auto;
}

body #about,
body #blog,
body #contact {
  height: 100vh;
}

body #portfolio .outer-box,
body #blog .outer-box {
  border: 1px solid #000000;
}

body #portfolio .outer-box .highlight-cards,
body #blog .outer-box .highlight-cards {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto auto auto auto;
      grid-template-columns: auto auto auto auto;
  margin-left: 4.2vw;
}

body #portfolio .outer-box .highlight-card,
body #blog .outer-box .highlight-card {
  margin: 2vw 0;
  margin-right: 3vw;
  width: 16.5vw;
  height: 20vw;
}

body #portfolio .outer-box .highlight-card .img-box,
body #blog .outer-box .highlight-card .img-box {
  width: 16.5vw;
  height: 11vw;
}

body #portfolio .outer-box .highlight-card .img-box img,
body #blog .outer-box .highlight-card .img-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

body #portfolio .outer-box .highlight-card .description,
body #blog .outer-box .highlight-card .description {
  font-weight: 500;
  color: #000000;
  line-height: 20px;
  font-size: 14px;
  letter-spacing: 0px;
}

body #portfolio .outer-box .highlight-card .other-details,
body #blog .outer-box .highlight-card .other-details {
  font-size: 16px;
  color: #E46D16;
}

body #portfolio .outer-box button,
body #blog .outer-box button {
  margin: 5vw 4.2vw 2vw;
}

body #contact {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
      grid-template-columns: 50% 50%;
}

body #contact #contact-left {
  margin: auto;
}

body #contact #contact-left a {
  padding: 8px;
}

body #contact #contact-left a img {
  width: 40px;
  height: 30px;
}

body #contact #contact-right {
  margin: auto;
}

body #contact #contact-right form input,
body #contact #contact-right form textarea {
  width: 350px;
}

body .blog-content,
body .comment-card {
  margin-left: 4.2vw;
}

body .created-at {
  font-size: 16px;
  color: #E46D16;
}

body .main-container {
  padding-bottom: 10vw;
}

body .main-container div form {
  margin: auto 4.2vw;
}

body .main-container div form input,
body .main-container div form textarea {
  width: 100%;
}

body .main-container div form textarea {
  height: 50vw;
}

body .main-container .admin h2 {
  text-align: center;
}

body .main-container .admin form {
  margin: 4vw auto;
  width: 35%;
}

body .main-container .admin form button {
  margin-top: 2vw;
}

body .main-container .dashboard {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto auto;
      grid-template-rows: auto auto;
  -ms-grid-columns: auto auto;
      grid-template-columns: auto auto;
  row-gap: 5vw;
  -webkit-column-gap: 5vw;
          column-gap: 5vw;
  margin: auto 4.2vw;
}

body .main-container .dashboard .dashboard-card {
  border: 1px solid #000000;
  background-color: #E5E5E5;
  height: 100%;
  padding: 2.5vw;
}

body .main-container .dashboard .dashboard-card .stats,
body .main-container .dashboard .dashboard-card .actions {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 20vw auto;
      grid-template-columns: 20vw auto;
}

body .main-container .dashboard .dashboard-card .actions a {
  font-size: 1.5vw;
}

body .main-container .dashboard .dashboard-card a {
  color: #000000;
}

body .main-container .dashboard .small {
  width: 35vw;
}

body .main-container .dashboard .large {
  width: 75vw;
  -ms-grid-column: 1;
      grid-column-start: 1;
  grid-column-end: 3;
}

body .main-container .dashboard .large span {
  font-family: 'Open Sans', sans-serif;
  font-style: italic;
}

body .comments form {
  margin: auto 8.6vw;
}

body .comments form input,
body .comments form textarea {
  width: 100%;
}

body #delete {
  display: none;
  position: absolute;
  width: 50vw;
  border: 1px solid black;
  padding: 5vw;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: #ffffff;
}

body #delete p {
  margin: 2vw 0;
}

body #delete #actions {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 5vw auto 0 auto;
}

body #delete #actions button {
  margin: 0 2vw;
}

body footer {
  background: #333333;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: Nunito;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  color: #ffffff;
  height: 5vw;
}

body footer div {
  padding: 0 5vw;
}

body footer .social {
  margin-left: 50vw;
}

body footer ul {
  margin: 0;
  padding: 0;
}

body footer li {
  list-style: none;
  float: left;
}

body footer li a {
  text-decoration: none;
  color: #ffffff;
  padding: 0 10px;
}

button {
  background: #333333;
  border-radius: 10px;
  padding: 12px 35px;
  height: inherit;
  border: none;
}

button a {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: #ffffff;
}

h2 {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  line-height: 16px;
  color: #333333;
}

h2 a {
  color: #333333;
}

h1 {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-size: 36px;
  line-height: 50px;
  color: #333333;
}

h1 a {
  color: #333333;
}

p {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  text-align: justify;
}

form input,
form textarea {
  height: 45px;
  background: #CFCFCF;
  border-radius: 5px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 33px;
  color: #000000;
  padding-left: 10px;
  border: none;
  margin: 1vw;
}

form textarea {
  height: 100px;
}

form button {
  display: block;
  margin: auto;
}

form button a {
  text-decoration: none;
}

@media only screen and (max-width: 600px) {
  body #home {
    height: 100vh !important;
  }
  body #welcome-message {
    font-size: 6vw !important;
    padding-top: 35vw !important;
  }
  body #welcome-message p {
    line-height: 10vw !important;
  }
  body #welcome-message p span {
    font-size: 9vw !important;
    display: block !important;
  }
  body nav {
    width: 100vw;
    overflow: hidden;
  }
  body nav ul {
    margin: 5vw 0 !important;
    padding: 0 !important;
  }
  body nav ul .nav-link li {
    margin: auto !important;
  }
  body nav ul .nav-link li a {
    font-weight: 900;
    font-size: 4.5vw !important;
    display: block;
    padding: 1vw !important;
  }
  body nav ul .active {
    color: #E46D16 !important;
    text-decoration: underline !important;
  }
  body .sticky {
    position: fixed;
    top: 0;
    width: 100vw !important;
    margin-left: 0 !important;
  }
  body #about {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 50% 50% !important;
        grid-template-rows: 50% 50% !important;
    margin: 5vw 10vw;
  }
  body #about img {
    width: 82.6vw;
    margin: auto;
    height: 180px;
    border-radius: 10px;
  }
  body #about p {
    -ms-grid-row: 2;
        grid-row-start: 2;
    width: 82.8vw;
    font-size: 12px;
    line-height: 25px;
  }
  body #portfolio .outer-box,
  body #blog .outer-box {
    border: 1px solid #000000;
    height: inherit;
  }
  body #portfolio .outer-box .highlight-cards,
  body #blog .outer-box .highlight-cards {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto auto;
        grid-template-columns: auto auto;
    margin-left: 4.2vw;
    height: inherit;
  }
  body #portfolio .outer-box .highlight-card,
  body #blog .outer-box .highlight-card {
    margin: 2vw 0;
    margin-right: 3vw;
    width: 33vw;
    height: 20vw;
  }
  body #portfolio .outer-box .highlight-card .img-box,
  body #blog .outer-box .highlight-card .img-box {
    width: 100%;
    height: 20vw;
  }
  body #portfolio .outer-box .highlight-card .img-box img,
  body #blog .outer-box .highlight-card .img-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  body #portfolio .outer-box .highlight-card .description,
  body #blog .outer-box .highlight-card .description {
    line-height: 10px;
    font-size: 10px;
  }
  body #portfolio .outer-box .highlight-card .other-details,
  body #blog .outer-box .highlight-card .other-details {
    font-size: 10px;
  }
  body #portfolio .outer-box .mobile-hide,
  body #blog .outer-box .mobile-hide {
    display: none;
  }
  body #portfolio .outer-box button,
  body #blog .outer-box button {
    margin: 50vw 4.2vw 5vw;
  }
  body #contact {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 50% 50%;
        grid-template-rows: 50% 50%;
  }
  body #contact #contact-left {
    text-align: center;
    width: 82.6vw;
    -ms-grid-row: 1;
        grid-row-start: 1;
    margin: auto;
  }
  body #contact #contact-left h2 {
    font-size: 24px;
  }
  body #contact #contact-left a {
    padding: 8px;
  }
  body #contact #contact-left a img {
    width: 40px;
    height: 30px;
  }
  body #contact #contact-right {
    -ms-grid-row: 2;
        grid-row-start: 2;
    margin: auto;
  }
  body .main-container h1 {
    font-size: 32px;
  }
  body .main-container h2 {
    font-size: 20px;
    line-height: 30px;
  }
  body .main-container h2 a {
    font-size: 20px;
    line-height: 30px;
  }
  body .main-container div form textarea {
    height: 1500px;
  }
  body .main-container .admin h2 {
    text-align: center;
    font-size: 20px;
    line-height: 30px;
  }
  body .main-container .admin form {
    margin: 5vw auto;
    width: 75%;
  }
  body .main-container .admin form button {
    margin-top: 5vw;
  }
  body .main-container .dashboard {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 10vw 0;
  }
  body .main-container .dashboard .dashboard-card {
    padding: 5vw;
    width: 100%;
  }
  body .main-container .dashboard .dashboard-card .stats,
  body .main-container .dashboard .dashboard-card .actions {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto auto;
        grid-template-columns: auto auto;
    font-size: 4vw;
  }
  body .main-container .dashboard .dashboard-card .actions a {
    font-size: 5vw;
  }
  body .main-container .dashboard .dashboard-card a {
    color: #000000;
    font-size: 4vw;
  }
  body .main-container .dashboard .large .stats {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto;
        grid-template-columns: auto;
  }
  body footer {
    font-size: 12px;
    height: 15vw;
  }
  body footer div {
    padding: 0 5vw;
  }
  body footer .social {
    margin-left: auto;
  }
  body footer ul {
    margin: 0;
    padding: 0;
  }
  body footer li a {
    padding: 0 5px;
  }
  button {
    border-radius: 5px;
    padding: 8px 20px;
  }
  button a {
    font-size: 20px;
  }
  h2 {
    font-size: 16px;
    line-height: 16px;
  }
  h1 {
    font-size: 24px;
    line-height: 50px;
  }
  form input,
  form textarea {
    width: 82.6vw;
    height: 40px;
    border-radius: 5px;
    font-size: 14px;
    margin: 2.5vw auto;
  }
  form textarea {
    height: 100px;
  }
  form button {
    display: block;
    margin: auto;
  }
  form button a {
    text-decoration: none;
  }
}
/*# sourceMappingURL=main.css.map */