/* 
=====
Fonts
=====
*/
@font-face {
  font-family: "Neo Tech Light";
  src: url("/media/fonts/neotech-light300.otf") format("opentype");
  /* 300 (Light), 400 (Regular), 500 (Medium), 700 (Bold), 900 (Bolder / Dark) */
}

@font-face {
  font-family: "Neo Tech";
  src: url("/media/fonts/neotech-regular400.otf") format("opentype");
  /* 300 (Light), 400 (Regular), 500 (Medium), 700 (Bold), 900 (Bolder / Dark) */
}

@font-face {
  font-family: "Neo Tech Medium";
  src: url("/media/fonts/neotech-medium500.otf") format("opentype");
  /* 300 (Light), 400 (Regular), 500 (Medium), 700 (Bold), 900 (Bolder / Dark) */
}

@font-face {
  font-family: "Neo Tech Bold";
  src: url("/media/fonts/neotech-bold700.otf") format("opentype");
  /* 300 (Light), 400 (Regular), 500 (Medium), 700 (Bold), 900 (Bolder / Dark) */
}

/* 
=====
RESET
=====
*/
* {
  margin: 0;
  padding: 0;
}

/* 
========================================
RESET for Pseudo Elements & All Elements
========================================
*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

/* 
=============
Global Styles
=============
*/
li,
a {
  text-decoration: none;
  list-style: none;
}

h1,
h2 {
  line-height: 1.2;
  letter-spacing: 0.0938rem;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: overlay;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  /* Font Size set to 100% for html to use with media quries */
  font-size: 100%;
}

@media only screen and (max-width: 68.75em) {
  html {
    font-size: 87.5%;
  }
}

body {
  font-family: "Neo Tech", sans-serif;
  color: #393a53;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.0938rem;
  color: #fff;
}

body::-webkit-scrollbar {
  /* Body Scrollbar color */
  width: 0.65rem;
  height: 0.65rem;
}

body::-webkit-scrollbar-track {
  /* Body Scrollbar Track color */
  background: none;
  margin-bottom: 0.0625rem;
  border-radius: 0.5rem;
  margin-top: 5.5rem;
}

body::-webkit-scrollbar-thumb {
  /* Body Scrollbar Thumb color */
  background: #1f2687b3;
  border-radius: 8rem;
}

body::-webkit-scrollbar-thumb:hover {
  /* Body Scrollbar Thumb:HOVER color */
  background: #1f2687;
  border-radius: 8rem;
}

::-moz-selection {
  /* Highlight Color */
  background: #0ef;
  color: #fff;
}

::selection {
  /* Highlight Color */
  background: #0ef;
  color: #fff;
}

/* Main Container */
.container {
  max-width: 100rem;
  margin: 0 auto;
  padding: 0 4.5rem;
}

@media only screen and (max-width: 40.625em) {
  .container {
    padding: 0 2.5rem;
  }
}

/* 2 Column Grid Layout CLASS - GLOBAL */
.grid-wrapper-2-col {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  justify-items: center;
}

/* Flex - Column /  SPACE  BETWEEN  / */
/* Flex wrapper that adds space in between containers, for example header / info / social containers */
.flex-col-space-between {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

/* Video Background & Overlay*/
.header__video-background {
  z-index: -2;
  position: fixed;
  -o-object-fit: cover;
     object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.header__video-background--overlay {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(29, 29, 29, 0.7);
  mix-blend-mode: overlay;
}

/* 
====================
Navbar - Menu Button
====================
*/
/* Menu Button Styling */
.navbar__menu-btn {
  width: 2rem;
  height: 2rem;
  position: relative;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 100;
}

.navbar__menu-btn:hover {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

.navbar__menu-btn--menu-burger {
  /* Menu Burger (Bars) Styling */
  width: 2rem;
  height: 3.8496px;
  background: #0ef;
  border-radius: 0.3125rem;
  -webkit-box-shadow: 0 0.0625rem 0.25rem 0.0625rem #999;
          box-shadow: 0 0.0625rem 0.25rem 0.0625rem #999;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.navbar__menu-btn--menu-burger::before, .navbar__menu-btn--menu-burger::after {
  /* Menu Burger BEFORE & AFTER Elements */
  content: "";
  position: absolute;
  width: 2rem;
  height: 3.8496px;
  background: #0ef;
  border-radius: 0.3125rem;
  -webkit-box-shadow: 0 0.0625rem 0.25rem 0.0625rem #999;
          box-shadow: 0 0.0625rem 0.25rem 0.0625rem #999;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.navbar__menu-btn--menu-burger::before {
  /* Menu Bar Translate (Neg) */
  -webkit-transform: translateY(-0.6875rem);
          transform: translateY(-0.6875rem);
}

.navbar__menu-btn--menu-burger::after {
  /* Menu Bar Translate (Pos) */
  -webkit-transform: translateY(0.6875rem);
          transform: translateY(0.6875rem);
}

.navbar__menu-btn.navbar__menu-btn.open .navbar__menu-btn--menu-burger {
  /* Menu.open class for JavaScript */
  -webkit-transform: translateX(2.1875rem);
          transform: translateX(2.1875rem);
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.navbar__menu-btn.navbar__menu-btn.open .navbar__menu-btn--menu-burger::before {
  /* Menu bar rotate (pos) BEFORE & Color */
  -webkit-transform: rotate(45deg) translate(-1.5625rem, 1.5625rem);
          transform: rotate(45deg) translate(-1.5625rem, 1.5625rem);
  background: #f29c9c;
}

.navbar__menu-btn.navbar__menu-btn.open .navbar__menu-btn--menu-burger::after {
  /* Menu bar rotate (neg) AFTER & Color */
  -webkit-transform: rotate(-45deg) translate(-1.5625rem, -1.5625rem);
          transform: rotate(-45deg) translate(-1.5625rem, -1.5625rem);
  background: #f29c9c;
}

.navbar__menu-btn.navbar__menu-btn.open .navbar__menu-btn--menu-burger:hover::after {
  /* Menu bars HOVER Color After Element */
  background: #c40000;
}

.navbar__menu-btn.navbar__menu-btn.open .navbar__menu-btn--menu-burger:hover::before {
  /* Menu bars HOVER Color Before Element */
  background: #c40000;
}

.hire-me {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 1.1em;
  font-weight: 400;
  background: gray;
  color: #0ef;
  padding: 0.8125rem 1.875rem 0.5938rem 1.875rem;
  margin-top: 1.875rem;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  border-radius: 0.375rem;
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: none;
  cursor: pointer;
}

.hire-me:hover {
  letter-spacing: 3px;
  background: #00eeff;
  color: #474747;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-box-shadow: 0 0 0.625rem 0.125rem #00eeff;
          box-shadow: 0 0 0.625rem 0.125rem #00eeff;
  -webkit-transform: translateY(-0.1875rem);
          transform: translateY(-0.1875rem);
}

.hire-me:hover:active {
  -webkit-transform: translateY(-0.0625rem);
          transform: translateY(-0.0625rem);
}

.submit {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 1.1em;
  font-weight: 400;
  background: gray;
  color: #0ef;
  padding: 0.8125rem 1.875rem 0.5938rem 1.875rem;
  margin-top: 1.875rem;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  border-radius: 0.375rem;
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: none;
  cursor: pointer;
}

.submit:hover {
  letter-spacing: 3px;
  background: #00eeff;
  color: #474747;
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
  -webkit-box-shadow: 0 0 0.625rem 0.125rem #00eeff;
          box-shadow: 0 0 0.625rem 0.125rem #00eeff;
}

.form {
  padding: 1.5rem 2rem;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 68.75em) {
  .form {
    padding: 1.5rem 1rem;
  }
}

@media only screen and (max-width: 56.25em) {
  .form {
    padding: 1.5rem 2rem;
  }
}

@media only screen and (max-width: 40.625em) {
  .form {
    padding: 1.5rem 1rem;
  }
}

.form__group:not(:last-child) {
  margin-bottom: 2rem;
}

.form__input:not(.form__input--message) {
  height: 3rem;
}

.form__input {
  width: 100%;
  display: block;
  font-size: 1rem;
  font-family: "Neo Tech";
  letter-spacing: 1px;
  padding: 1.5rem 2rem;
  border-radius: 0.5rem;
  color: #1f2687;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  border-top: 0.1875rem solid transparent;
  border-bottom: 0.1875rem solid transparent;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.form__input:focus {
  outline: none;
  -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
  border-bottom: 0.1875rem solid #0ef;
}

.form__input:focus::target-text {
  position: relative;
  top: 0.875rem;
}

.form__input:focus:invalid {
  border-bottom: 0.1875rem solid #cb0a00;
}

.form__input:focus:valid {
  border-bottom: 0.1875rem solid #55c57a;
}

.form__input::-webkit-input-placeholder {
  position: relative;
  top: 0.1875rem;
  color: rgba(31, 38, 135, 0.25);
}

.form__input:-webkit-autofill, .form__input:-webkit-autofill:hover, .form__input:-webkit-autofill:focus, .form__input:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: #1f2687 !important;
}

.form__label {
  color: #1f2687;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin-left: 2rem;
  margin-top: 0.7rem;
  display: block;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.form__input:placeholder-shown + .form__label {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-2.25rem);
          transform: translateY(-2.25rem);
}

.form__btn {
  width: 100%;
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}

/* 
======
HEADER
======
*/
.header {
  grid-column: full-start / full-end;
  position: relative;
  width: 100%;
  height: 100vh;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  -ms-grid-rows: 1fr;
      grid-template-rows: 1fr;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 59.375em) {
  .header {
    /* Breakpoint for mobile */
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }
}

.header__hero-text {
  font-weight: 300;
  margin: 0 5rem 0 3rem;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 59.375em) {
  .header__hero-text {
    /* Breakpoint for mobile */
    margin: auto;
  }
}

.header__logo {
  font-weight: 300;
  font-size: 5rem;
  line-height: 1.7;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: #e2e2e2;
}

@media only screen and (max-width: 47.938em) {
  .header__logo {
    font-size: 3.5rem;
  }
}

.header__logo--tech-media {
  font-weight: 500;
  color: #0ef;
}

.header__description {
  font-weight: 400;
  color: silver;
  font-size: 2.4rem;
  margin-bottom: 3.5rem;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 47.938em) {
  .header__description {
    font-size: 1.5rem;
  }
}

@media only screen and (max-width: 31.25em) {
  .header__description--breakpoint {
    line-height: 1.8;
    display: block;
  }
}

.header__description--typewriter {
  /* Span for typewriter text  */
  color: #0ef;
  position: absolute;
  margin-left: 0.5rem;
  font-weight: 700;
}

.header__description .header__description--typewriter > .txt {
  /* Cursor for typewriter text */
  border-right: 0.19rem solid chartreuse;
  padding: 0.1875rem 0;
}

.header__social-wrapper {
  line-height: 1;
  position: fixed;
  top: 60%;
  margin-left: 0.625rem;
  left: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 59.375em) {
  .header__social-wrapper {
    margin-left: 0;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    top: 0%;
    margin-top: 5rem;
  }
}

.header__social-icons {
  display: block;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 59.375em) {
  .header__social-icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-column-gap: 2rem;
            column-gap: 2rem;
  }
}

.header__social-item {
  width: 0;
  height: 0;
  margin-top: 3.5rem;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 59.375em) {
  .header__social-item {
    margin-top: 0;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    width: 100%;
  }
}

.header__social-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.header__social-link:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.header__social-link--email {
  width: 1.875rem;
  height: 1.875rem;
  color: #666;
}

.header__social-link--github {
  width: 1.875rem;
  height: 1.875rem;
  color: #6e5494;
}

.header__social-link--twitter {
  width: 1.875rem;
  height: 1.875rem;
  color: #08a0e9;
}

.header__social-link--linkedin {
  width: 1.875rem;
  height: 1.875rem;
  color: #08a0e9;
}

.header__social-link--discord {
  width: 1.875rem;
  height: 1.875rem;
  color: #7289da;
}

.header__social-link--microsoft-teams {
  width: 1.875rem;
  height: 1.875rem;
  color: #6264a7;
}

.header__social-link:link, .header__social-link:visited {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0;
  color: #e2e2e2;
}

.header__iphone {
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header__iphone--img {
  margin-top: 6rem;
  width: 25rem;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 59.375em) {
  .header__iphone--img {
    display: none;
  }
}

.header__hero-btn {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 59.375em) {
  .header__hero-btn {
    display: -ms-grid;
    display: grid;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

/* 
==========
NAVIGATION
==========
*/
.navbar {
  grid-column: nav-start / nav-end;
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.navbar__container {
  width: 100%;
  padding: 1.5rem 2rem 1rem 2rem;
  max-width: 100rem;
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
}

.navbar__logo {
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 2px;
  color: #e2e2e2;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.navbar__logo--tech-media {
  font-weight: 500;
  color: #0ef;
}

.navbar__menu-btn {
  /* Menu Button display:none - for larger screens */
  display: none;
  -ms-grid-column-align: end;
      justify-self: end;
}

@media only screen and (max-width: 47.938em) {
  .navbar__menu-btn {
    display: -ms-grid;
    display: grid;
  }
}

.navbar__nav-links {
  /* Will HIDE Navbar Links on top Navbar if screen is 768px or smaller */
  display: none;
  /* LAYOUT for Navbar Links on top Navbar for screens bigger than 768px */
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
  -ms-flex-pack: distribute;
      justify-content: space-around;
  justify-items: end;
}

@media only screen and (min-width: 48em) {
  .navbar__nav-links {
    /* Will SHOW Navbar Links on top Navbar if screen is 768px or BIGGER */
    display: -ms-grid;
    display: grid;
  }
}

.navbar__nav-links--link {
  text-transform: capitalize;
  color: #e2e2e2;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  display: inline-block;
  font-size: 1.1rem;
  padding: 0.8125rem 1.875rem 0.5938rem 1.875rem;
  letter-spacing: 1px;
  border-radius: 0.375rem;
}

.navbar__nav-links--link:hover {
  background: #00eeff;
  color: #474747;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-box-shadow: 0 0 0.625rem 0.125rem #00eeff;
          box-shadow: 0 0 0.625rem 0.125rem #00eeff;
  -webkit-transform: translateY(-0.1875rem);
          transform: translateY(-0.1875rem);
}

.navbar__nav-links--link:hover:active {
  -webkit-transform: translateY(-0.0625rem);
          transform: translateY(-0.0625rem);
}

.navbar.scrolling-active {
  /* Scrolling Actice class for styles applied with JavaScript on Scroll  */
  background: #000105;
  -webkit-box-shadow: 0 0.125rem 0.75rem 0.0625rem #008f99;
          box-shadow: 0 0.125rem 0.75rem 0.0625rem #008f99;
}

.navbar .sidebar {
  /* Sidebar Layout & Styling - Sidebar will only show when screen is smaller than 768px */
  background: #444;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  z-index: 11;
}

.navbar .sidebar.show-sidebar {
  /* Show Sidebar class for JavaScript when Menu Button is clicked */
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.navbar .sidebar__logo {
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 2px;
  color: #e2e2e2;
  display: block;
  position: absolute;
  top: 1.5rem;
  left: 2rem;
}

.navbar .sidebar__logo--tech-media {
  font-weight: 500;
  color: #0ef;
}

.navbar .sidebar__links {
  /* Sidebar Links Center Alignment */
  text-align: center;
}

.navbar .sidebar__links--link:link, .navbar .sidebar__links--link:visited {
  /* Styles applied to each link the Sidebar */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 2rem;
  margin-bottom: 4.5rem;
  text-transform: capitalize;
  letter-spacing: 0.1rem;
  color: #e2e2e2;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.navbar .sidebar__links--link:link:hover, .navbar .sidebar__links--link:visited:hover {
  text-shadow: 0.125rem 0.125rem 1.5625rem #000;
  -webkit-transform: translateY(-0.1875rem) scale(1.25);
          transform: translateY(-0.1875rem) scale(1.25);
  color: #0ef;
}

.navbar .sidebar__links--link:link:active, .navbar .sidebar__links--link:visited:active {
  text-shadow: 0.125rem 0.125rem 0.9375rem #000;
  -webkit-transform: translateY(-0.0625rem) scale(1.225);
          transform: translateY(-0.0625rem) scale(1.225);
}

.navbar .sidebar__social-icons {
  /* Sidebar Social Icons - Display Grid */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 23rem;
  margin-top: 3rem;
}

.navbar .sidebar__social-item {
  /* Sidebar Social Icons Container to size SVG */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.navbar .sidebar__social-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  /* SVGs */
}

.navbar .sidebar__social-link--email {
  color: #666;
  height: 2.5rem;
  width: 2.5rem;
}

.navbar .sidebar__social-link--github {
  color: #6e5494;
  height: 2.5rem;
  width: 2.5rem;
}

.navbar .sidebar__social-link--linkedin {
  color: #0e76a8;
  height: 2.5rem;
  width: 2.5rem;
}

.navbar .sidebar__social-link--twitter {
  color: #08a0e9;
  height: 2.5rem;
  width: 2.5rem;
}

.navbar .sidebar__social-link--discord {
  color: #7289da;
  height: 2.5rem;
  width: 2.5rem;
}

.navbar .sidebar__social-link--microsoft-teams {
  color: #6264a7;
  height: 2.5rem;
  width: 2.5rem;
}

.navbar .sidebar__social-link:link, .navbar .sidebar__social-link:visited {
  /* Sidebar SVG Colors, Inherited height from navbar__sidebar-social-icons-item container */
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.navbar .sidebar__social-link:link:hover, .navbar .sidebar__social-link:visited:hover {
  -webkit-transform: scale(1.4);
          transform: scale(1.4);
}

/* 
=====
ABOUT
=====
*/
.about {
  /* About Glass Container */
  width: 100%;
  grid-column: full-start / full-end;
  background: rgba(39, 39, 39, 0.95);
  -webkit-box-shadow: 0 0.125rem 0.5rem 0 rgba(31, 38, 135, 0.702);
          box-shadow: 0 0.125rem 0.5rem 0 rgba(31, 38, 135, 0.702);
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  border-radius: 1.5625rem;
  margin: 3rem auto;
  overflow: hidden;
  position: relative;
}

.about__heading {
  /* About Me Title */
  font-weight: 400;
  font-size: 3rem;
  text-align: center;
  margin: 5rem auto;
  color: #0ef;
}

.about__intro {
  /* About Me Section - Picture & Description */
  padding: 2rem 5.5rem 3rem 5.5rem;
  margin: 0 auto;
  width: 90%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  background: radial-gradient(circle farthest-corner at 100% 100%, #393a53 1%, #0e0e0e00 50%);
  -webkit-box-shadow: 0 0 0.5rem 0.1875rem #393a53;
          box-shadow: 0 0 0.5rem 0.1875rem #393a53;
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  border-radius: 0.625rem;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 40.625em) {
  .about__intro {
    padding: 2rem 3rem;
  }
}

.about__intro--mobile-view {
  /* Profile Picture Container - Used to change Picture & Description from 2 Column over to 1 Column Layout */
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 40.625em) {
  .about__intro--mobile-view {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.about__photo {
  /* Profile Picture Styling */
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0.5625rem 0 #0ef;
          box-shadow: 0 0 0.5625rem 0 #0ef;
  position: relative;
  -webkit-transform: rotateZ(-2deg);
          transform: rotateZ(-2deg);
  float: left;
  shape-outside: circle(50% at 50% 50%);
  margin-right: 3rem;
  margin-bottom: 0.905rem;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 40.625em) {
  .about__photo {
    margin-right: 0;
    float: none;
  }
}

.about__text-h2 {
  margin-bottom: 1rem;
}

.about__text-p1 {
  margin-bottom: 2rem;
}

.about__text-p1--bold-hello {
  font-size: 1.25rem;
  font-weight: 500;
  color: #0ef;
}

.about__text-p1, .about__text-p2 {
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.5;
  color: #e2e2e2;
}

.skills {
  /* Skills Section Container */
  margin: 10rem auto 4rem auto;
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  /* Skills UL of SVG's  */
}

@media only screen and (max-width: 40.625em) {
  .skills {
    margin: 8rem auto 4rem auto;
  }
}

@media only screen and (max-width: 26.125em) {
  .skills {
    margin: 8rem auto 1.5rem auto;
  }
}

.skills__heading {
  font-weight: 400;
  font-size: 3rem;
  text-align: center;
  margin-bottom: 5rem;
  color: #0ef;
}

.skills__section-container {
  padding: 0 5rem;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 40.625em) {
  .skills__section-container {
    padding: 0 3rem;
  }
}

@media only screen and (max-width: 26.125em) {
  .skills__section-container {
    padding: 0 1rem;
  }
}

.skills__outer-wrapper {
  margin: 0 auto;
  width: 65%;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 56.25em) {
  .skills__outer-wrapper {
    width: 100%;
  }
}

.skills__icon-container {
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  gap: 3rem;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  /* 
    ================================================================================================
    6 Column Layout on Skills section that wraps - also has WIDE padding to hold the 6 column layout
    - The WIDE padding will be removed at 900px as it will still hold the 6 Column Layout at 900px
    ================================================================================================
    */
  -ms-grid-columns: (minmax(5rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  /* 4 Column Layout + Some padding that helps to keep the 4 Column Layout */
  /* 5 Column Layout due to the padding changing to even less. */
  /* 3 Column Layout (428px) - without this media query it would default to 2 columns with too much space */
  /* 3 Column Layout (414px) - without this media query it would default to 2 columns with too much space */
}

@media only screen and (max-width: 28.125em) {
  .skills__icon-container {
    gap: 2.1rem;
  }
}

@media only screen and (max-width: 26.125em) {
  .skills__icon-container {
    gap: 2.2rem;
  }
}

@media only screen and (max-width: 42em) {
  .skills__icon-container {
    -ms-grid-columns: (minmax(4.5rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
  }
}

@media only screen and (max-width: 40.625em) {
  .skills__icon-container {
    -ms-grid-columns: (minmax(4.5rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
  }
}

@media only screen and (max-width: 26.75em) {
  .skills__icon-container {
    -ms-grid-columns: (minmax(4.25rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr));
  }
}

@media only screen and (max-width: 26.125em) {
  .skills__icon-container {
    -ms-grid-columns: (minmax(4.05rem, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(4.05rem, 1fr));
  }
}

.skills__icon-container svg {
  /* Styling for all skill svg's - GLOBAL */
  position: relative;
  max-height: 5rem;
  max-width: 5.5rem;
  padding: 0.5rem;
  background: radial-gradient(circle farthest-corner at 100% 100%, #393a53 1%, #0e0e0e00 50%);
  -webkit-box-shadow: 0 0 0.5rem 0.1875rem #393a53;
          box-shadow: 0 0 0.5rem 0.1875rem #393a53;
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  border-radius: 0.625rem;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

.skills__icon-container svg:hover {
  -webkit-box-shadow: 0 0 0.5rem 0.1875rem #00afbb;
          box-shadow: 0 0 0.5rem 0.1875rem #00afbb;
}

.skills__skill {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
}

.skills__skill--html5 {
  color: #dc4d25;
}

.skills__skill--css3 {
  color: #2965f1;
}

.skills__skill--sass {
  color: #cf649a;
}

.skills__skill--bootstrap {
  color: #7852b3;
}

.skills__skill--js {
  color: #e8d44d;
}

.skills__skill--node-js {
  color: #689f63;
}

.skills__skill--npm {
  color: #cb0a00;
}

.skills__skill--git {
  color: #fb4f28;
}

.skills__skill--figma {
  color: #6e5494;
}

.skills__skill--ubuntu {
  color: #e95321;
}

.skills__skill--nginx {
  color: #009639;
}

.skills__skill--linode {
  color: #02b159;
}

/*
========
PROJECTS
========
*/
.projects {
  grid-column: full-start / full-end;
  position: relative;
  width: 100%;
  height: auto;
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-grid-column-align: center;
      justify-self: center;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  -ms-grid-rows: 1fr;
      grid-template-rows: 1fr;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.projects__glass-container {
  /* Glass Container that holds all the project cards */
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  justify-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  -webkit-box-shadow: 0 0.125rem 0.5rem 0 rgba(31, 38, 135, 0.702);
          box-shadow: 0 0.125rem 0.5rem 0 rgba(31, 38, 135, 0.702);
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  border-radius: 1.5625rem;
  width: 100%;
  margin: 3rem auto;
  overflow: hidden;
  position: relative;
}

.projects__heading-container {
  /* Projects Heading Container GLOBAL */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #0ef;
  text-align: center;
  margin: 5rem auto;
}

.projects__heading {
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 3px;
}

.projects__cards-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 3.125rem;
  padding: 0 3rem 4rem 3rem;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 28.125em) {
  .projects__cards-container {
    padding: 0 3rem 1.75rem 3rem;
  }
}

.projects__card {
  /* Project Card Wrapper GLOBAL */
  background: rgba(23, 23, 23, 0.9);
  -webkit-box-shadow: 0 0.125rem 0.5rem 0 #1f2687b3;
          box-shadow: 0 0.125rem 0.5rem 0 #1f2687b3;
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  border-radius: 1.5625rem;
  position: relative;
  width: 100%;
  width: 20rem;
  height: 28.125rem;
  overflow: hidden;
  will-change: transform;
  /*
    
    1. - N / A *** NOT DONE YET***
    
    2. - Mapty *** NOT DONE YET***
    
    3. - Nexter *** NOT DONE YET***
    
    4. - Natours
    
    5. - Omnifood
    
    6. - Trillo
    
    7. - Portfolio
    
    8. - Back Roads
    
    9. - Tea Station
    
    */
}

.projects__card::before {
  /* Project Circle with Image of project before hover GLOBAL */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-clip-path: circle(9.375rem at 80% 20%);
          clip-path: circle(9.375rem at 80% 20%);
  -webkit-transition: 0.55s ease-in-out;
  transition: 0.55s ease-in-out;
}

.projects__card:hover::before {
  /* Project Circle with Image of project on hover - Circle will move to the left GLOBAL */
  -webkit-clip-path: circle(18.75rem at 80% -20%);
          clip-path: circle(18.75rem at 80% -20%);
}

.projects__card--project1::before {
  /* Project 1 Image for Circle */
  background: url("/media/images/projects/`Under__Construction/code.jpg.webp") center/cover no-repeat;
}

.projects__card--project2::before {
  /* Project 2 Image for Circle */
  background: url("/media/images/projects//`Under__Construction/code.jpg.webp") center/cover no-repeat;
}

.projects__card--project3::before {
  /* Project 3 Image for Circle */
  background: url("/media/images/projects/Nexter/nexter.png.webp") center/cover no-repeat;
}

.projects__card--project4::before {
  /* Project 4 Image for Circle */
  background: url("/media/images/projects/Natours/natours.png.webp") center/cover no-repeat;
}

.projects__card--project5::before {
  /* Project 5 Image for Circle */
  background: url("/media/images/projects/Omnifood/omnifood.png.webp") center/cover no-repeat;
}

.projects__card--project6::before {
  /* Project 6 Image for Circle */
  background: url("/media/images/projects/Trillo/trillo.png.webp") center/cover no-repeat;
}

.projects__card--project7::before {
  /* Project 7 Image for Circle */
  background: url("/media/images/projects/Portfolio/portfolio.png.webp") center/cover no-repeat;
}

.projects__card--project8::before {
  /* Project 8 Image for Circle */
  background: url("/media/images/projects/BackRoads/back-roads.png.webp") center/cover no-repeat;
}

.projects__card--project9::before {
  /* Project 8 Image for Circle */
  background: url("/media/images/projects/TeaStation/tea-station.png.webp") center/cover no-repeat;
}

.projects__card:hover .projects__project-content {
  /* Project Content moves up on Hover GLOBAL */
  height: 14.0625rem;
}

.projects__card:hover .projects__btn-container {
  /* Project Card Hover - Styling for View Projects Button on Hover - Transition Effect GLOBAL */
  opacity: 1;
  -webkit-transform: translateY(0rem);
          transform: translateY(0rem);
}

.projects__card:hover .projects__github-container {
  /* GitHub Icon Transition on Hover GLOBAL */
  opacity: 1;
  -webkit-transform: translateY(0rem);
          transform: translateY(0rem);
  -webkit-transition-delay: 0.315s;
          transition-delay: 0.315s;
}

.projects__card:hover .projects__code-languages {
  /* Code Languages Container Transition on Hover GLOBAL */
  opacity: 1;
  -webkit-transform: translateY(0rem);
          transform: translateY(0rem);
  -webkit-transition-delay: 0.45s;
          transition-delay: 0.45s;
}

.projects__card--project1-gradient {
  /* Project 1 Gradient Container */
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: 0.85s ease-in-out;
  transition: 0.85s ease-in-out;
  -webkit-transform: translateY(0rem);
          transform: translateY(0rem);
  background: radial-gradient(circle farthest-corner at 100% 100%, #d87f36 1%, rgba(14, 14, 14, 0) 35%);
}

.projects__card:hover .projects__card--project1-gradient {
  /* Project 1 Gradient Container Transition on Hover */
  background: radial-gradient(circle farthest-corner at 100% 100%, #d87f36 1%, rgba(14, 14, 14, 0) 35%);
  opacity: 1;
  -webkit-transition: 0.85s ease-in-out;
  transition: 0.85s ease-in-out;
  -webkit-transform: translateY(-13.6875rem);
          transform: translateY(-13.6875rem);
  z-index: -1;
}

.projects__card--project2-gradient {
  /* Project 2 Gradient Container */
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: 0.85s ease-in-out;
  transition: 0.85s ease-in-out;
  -webkit-transform: translateY(0rem);
          transform: translateY(0rem);
  background: radial-gradient(circle farthest-corner at 100% 100%, #12d564 1%, rgba(14, 14, 14, 0) 35%);
}

.projects__card:hover .projects__card--project2-gradient {
  /* Project 2 Gradient Container Transition on Hover */
  background: radial-gradient(circle farthest-corner at 100% 100%, #12d564 1%, rgba(14, 14, 14, 0) 35%);
  opacity: 1;
  -webkit-transition: 0.85s ease-in-out;
  transition: 0.85s ease-in-out;
  -webkit-transform: translateY(-13.6875rem);
          transform: translateY(-13.6875rem);
  z-index: -1;
}

.projects__card--project3-gradient {
  /* Project 3 Gradient Container */
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: 0.85s ease-in-out;
  transition: 0.85s ease-in-out;
  -webkit-transform: translateY(0rem);
          transform: translateY(0rem);
  background: radial-gradient(circle farthest-corner at 100% 100%, #c69963 1%, rgba(14, 14, 14, 0) 35%);
}

.projects__card:hover .projects__card--project3-gradient {
  /* Project 3 Gradient Container Transition on Hover */
  background: radial-gradient(circle farthest-corner at 100% 100%, #c69963 1%, rgba(14, 14, 14, 0) 35%);
  opacity: 1;
  -webkit-transition: 0.85s ease-in-out;
  transition: 0.85s ease-in-out;
  -webkit-transform: translateY(-13.6875rem);
          transform: translateY(-13.6875rem);
  z-index: -1;
}

.projects__card--project4-gradient {
  /* Project 4 Gradient Container */
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: 0.85s ease-in-out;
  transition: 0.85s ease-in-out;
  -webkit-transform: translateY(0rem);
          transform: translateY(0rem);
  background: radial-gradient(circle farthest-corner at 100% 100%, #55c57a 1%, rgba(14, 14, 14, 0) 35%);
}

.projects__card:hover .projects__card--project4-gradient {
  /* Project 4 Gradient Container Transition on Hover */
  background: radial-gradient(circle farthest-corner at 100% 100%, #55c57a 1%, rgba(14, 14, 14, 0) 35%);
  opacity: 1;
  -webkit-transition: 0.85s ease-in-out;
  transition: 0.85s ease-in-out;
  -webkit-transform: translateY(-13.6875rem);
          transform: translateY(-13.6875rem);
  z-index: -1;
}

.projects__card--project5-gradient {
  /* Project 5 Gradient Container */
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: 0.85s ease-in-out;
  transition: 0.85s ease-in-out;
  -webkit-transform: translateY(0rem);
          transform: translateY(0rem);
  background: radial-gradient(circle farthest-corner at 100% 100%, #e67e22 1%, rgba(14, 14, 14, 0) 35%);
}

.projects__card:hover .projects__card--project5-gradient {
  /* Project 5 Gradient Container Transition on Hover */
  background: radial-gradient(circle farthest-corner at 100% 100%, #e67e22 1%, rgba(14, 14, 14, 0) 35%);
  opacity: 1;
  -webkit-transition: 0.85s ease-in-out;
  transition: 0.85s ease-in-out;
  -webkit-transform: translateY(-13.6875rem);
          transform: translateY(-13.6875rem);
  z-index: -1;
}

.projects__card--project6-gradient {
  /* Project 6 Gradient Container */
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: 0.85s ease-in-out;
  transition: 0.85s ease-in-out;
  -webkit-transform: translateY(0rem);
          transform: translateY(0rem);
  background: radial-gradient(circle farthest-corner at 100% 100%, #eb2f64 1%, rgba(14, 14, 14, 0) 35%);
}

.projects__card:hover .projects__card--project6-gradient {
  /* Project 6 Gradient Container Transition on Hover */
  background: radial-gradient(circle farthest-corner at 100% 100%, #eb2f64 1%, rgba(14, 14, 14, 0) 35%);
  opacity: 1;
  -webkit-transition: 0.85s ease-in-out;
  transition: 0.85s ease-in-out;
  -webkit-transform: translateY(-13.6875rem);
          transform: translateY(-13.6875rem);
  z-index: -1;
}

.projects__card--project7-gradient {
  /* Project 7 Gradient Container */
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: 0.85s ease-in-out;
  transition: 0.85s ease-in-out;
  -webkit-transform: translateY(0rem);
          transform: translateY(0rem);
  background: radial-gradient(circle farthest-corner at 100% 100%, #e9b949 1%, rgba(14, 14, 14, 0) 35%);
}

.projects__card:hover .projects__card--project7-gradient {
  /* Project 7 Gradient Container Transition on Hover */
  background: radial-gradient(circle farthest-corner at 100% 100%, #e9b949 1%, rgba(14, 14, 14, 0) 35%);
  opacity: 1;
  -webkit-transition: 0.85s ease-in-out;
  transition: 0.85s ease-in-out;
  -webkit-transform: translateY(-13.6875rem);
          transform: translateY(-13.6875rem);
  z-index: -1;
}

.projects__card--project8-gradient {
  /* Project 8 Gradient Container */
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: 0.85s ease-in-out;
  transition: 0.85s ease-in-out;
  -webkit-transform: translateY(0rem);
          transform: translateY(0rem);
  background: radial-gradient(circle farthest-corner at 100% 100%, #2caeba 1%, rgba(14, 14, 14, 0) 35%);
}

.projects__card:hover .projects__card--project8-gradient {
  /* Project 8 Gradient Container Transition on Hover */
  background: radial-gradient(circle farthest-corner at 100% 100%, #2caeba 1%, rgba(14, 14, 14, 0) 35%);
  opacity: 1;
  -webkit-transition: 0.85s ease-in-out;
  transition: 0.85s ease-in-out;
  -webkit-transform: translateY(-13.6875rem);
          transform: translateY(-13.6875rem);
  z-index: -1;
}

.projects__card--project9-gradient {
  /* Project 9 Gradient Container */
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: 0.85s ease-in-out;
  transition: 0.85s ease-in-out;
  -webkit-transform: translateY(0rem);
          transform: translateY(0rem);
  background: radial-gradient(circle farthest-corner at 100% 100%, #678e3e 1%, rgba(14, 14, 14, 0) 35%);
}

.projects__card:hover .projects__card--project9-gradient {
  /* Project 9 Gradient Container Transition on Hover */
  background: radial-gradient(circle farthest-corner at 100% 100%, #678e3e 1%, rgba(14, 14, 14, 0) 35%);
  opacity: 1;
  -webkit-transition: 0.85s ease-in-out;
  transition: 0.85s ease-in-out;
  -webkit-transform: translateY(-13.6875rem);
          transform: translateY(-13.6875rem);
  z-index: -1;
}

.projects__project-content {
  /* Project Card Content GLOBAL */
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 6.25rem;
  text-align: center;
  -webkit-transition: 0.7s ease-in-out;
  transition: 0.7s ease-in-out;
  z-index: 1;
  will-change: transform;
}

.projects__title {
  /* Project Card Title H2 Styling GLOBAL */
  position: relative;
  letter-spacing: 2px;
  font-size: 2rem;
  font-weight: 400;
  color: #e2e2e2;
  margin: 0 auto;
}

.projects__btn-container {
  /* View Project Button Container */
  display: inline-block;
  margin-top: 1.5rem;
  opacity: 0;
  -webkit-transition: 0.65s ease-in-out;
  transition: 0.65s ease-in-out;
  letter-spacing: 2px;
  -webkit-transform: translateY(6.875rem);
          transform: translateY(6.875rem);
}

.projects__view-project-btn {
  /* View Project Button Styling GLOBAL */
  padding: 0.8125rem 1.25rem 0.625rem 1.25rem;
  color: #0ef;
  background: #70809066;
  border-radius: 1.5625rem;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.projects__view-project-btn:hover {
  /* View Projects Button Styling on Hover GLOBAL */
  background: #0ef;
  color: #1f1f1f;
  -webkit-box-shadow: 0 0 0.625rem 0.125rem #0ef;
          box-shadow: 0 0 0.625rem 0.125rem #0ef;
}

.projects__github-container {
  /* GitHub Icon Layout GLOBAL */
  margin-top: 1.875rem;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 0;
  -webkit-transition: 0.55s ease-in-out;
  transition: 0.55s ease-in-out;
  -webkit-transform: translateY(6.25rem);
          transform: translateY(6.25rem);
}

.projects__github-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.projects__github-svg {
  /* GitHub Icon Styling GLOBAL */
  width: 1.875rem;
  height: 1.875rem;
  color: #e2e2e2;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}

.projects__github-svg:hover {
  /* GitHub Icon Transition on Hover GLOBAL */
  color: #6e5494;
}

.projects__code-languages {
  /* Code Languages Container GLOBAL */
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 3.125rem;
  margin: 3.4375rem 0 0 0.9375rem;
  opacity: 0;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  -webkit-transform: translateY(4.6875rem);
          transform: translateY(4.6875rem);
}

.projects__html5-svg {
  /* HTML5 Icon Styling */
  width: 1.0625rem;
  height: 1.0625rem;
  color: #dc4d25;
  margin: 0 0.3125rem;
}

.projects__css3-svg {
  /* CSS3 Icon Styling */
  width: 1.0625rem;
  height: 1.0625rem;
  margin: 0 0.3125rem;
  color: #2965f1;
}

.projects__js-svg {
  /* JavaScript Icon Styling */
  width: 1.0625rem;
  height: 1.125rem;
  margin: 0 0.3125rem;
  color: #e8d44d;
}

/* 
=======
CONTACT
=======
*/
.contact {
  /* Contact Section */
  grid-column: full-start / full-end;
  margin: 3rem auto;
}

@media only screen and (max-width: 56.25em) {
  .contact {
    padding: 6.25rem 0;
    width: 100%;
  }
}

.contact__container-background {
  /* Contact Glass Container */
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
  background: -webkit-gradient(linear, right bottom, left top, color-stop(1%, rgba(23, 23, 23, 0.9)), color-stop(70%, #0e0e0e00));
  background: linear-gradient(to top left, rgba(23, 23, 23, 0.9) 1%, #0e0e0e00 70%);
  -webkit-box-shadow: 0 0.125rem 0.5rem 0 rgba(31, 38, 135, 0.702);
          box-shadow: 0 0.125rem 0.5rem 0 rgba(31, 38, 135, 0.702);
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  border-radius: 1.5625rem;
  padding: 3.5rem 2.5rem 3.5rem 0;
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 56.25em) {
  .contact__container-background {
    padding: 3.5rem 0 2.5rem 0;
  }
}

@media only screen and (max-width: 40.625em) {
  .contact__container-background {
    padding-bottom: 1.5rem;
  }
}

.contact__container-background--email-svg {
  /* Email SVG - Background */
  fill: rgba(192, 192, 192, 0.1);
  position: absolute;
  left: -3.125rem;
  bottom: -3.125rem;
  width: 35rem;
  height: 35rem;
  z-index: -1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 56.25em) {
  .contact__container-background--email-svg {
    left: -3.125rem;
    top: 14.375rem;
    width: 27rem;
    height: 27rem;
  }
}

@media only screen and (max-width: 40.625em) {
  .contact__container-background--email-svg {
    left: -3.125rem;
    top: 16.25rem;
    width: 25rem;
    height: 25rem;
  }
}

@media only screen and (max-width: 28.125em) {
  .contact__container-background--email-svg {
    left: -3.125rem;
    top: 20.625rem;
    width: 20rem;
    height: 20rem;
  }
}

.contact__wrapper {
  /* Contact Info & Message Wrapper */
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  justify-items: center;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 56.25em) {
  .contact__wrapper {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }
}

.contact__connect {
  /* Contact Info */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 75%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 56.25em) {
  .contact__connect {
    height: 30rem;
    width: 90%;
  }
}

.contact__title {
  /* h2 Header */
  color: #0ef;
  font-weight: 400;
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

.contact__description, .contact__description2 {
  /* Header Description for Paragraph 1 & 2 */
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 2px;
  color: #e2e2e2;
}

.contact__description2 {
  /* Header Description */
  padding-top: 1.5rem;
}

.contact__description {
  /* Header Description */
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 2px;
  color: #e2e2e2;
}

.contact__info-space {
  /* Adds extra space to info section for mobile view */
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 56.25em) {
  .contact__info-space {
    margin: 5rem 0;
  }
}

.contact__phone, .contact__email, .contact__location {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.2rem 0 1.2rem 2rem;
}

.contact__phone--svg {
  /* Flipped SVG by 90deg so that the phone is faceing towards the numbers */
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.contact__phone--svg, .contact__email--svg, .contact__location--svg {
  /* SVG Color, Width & Height */
  width: 1.25rem;
  height: 1.25rem;
  color: #0ef;
}

.contact__phone--h4, .contact__email--link, .contact__location--h4 {
  /* Padding, font-weight & color of text in the info section */
  padding-left: 0.7rem;
  font-weight: 400;
  color: #e2e2e2;
}

.contact__email--link {
  /* Email link text color */
  color: #e2e2e2;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.contact__email--link:hover {
  color: #9494ff;
}

.contact__location--h4 {
  /* Extra padding on the top to help make the text be more centered as align-items: center; did not center 100% */
  padding-top: 0.25rem;
}

.contact__social {
  width: 100%;
  height: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.contact__icon-wrapper {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 90%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 56.25em) {
  .contact__icon-wrapper {
    width: 100%;
  }
}

@media only screen and (max-width: 47.938em) {
  .contact__icon-wrapper {
    width: 90%;
  }
}

@media only screen and (max-width: 31.25em) {
  .contact__icon-wrapper {
    width: 100%;
  }
}

.contact__link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  /* SVGs */
}

.contact__link--email {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: #666;
  width: 2rem;
  height: 2rem;
}

.contact__link--email:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.contact__link--github {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: #6e5494;
  width: 2rem;
  height: 2rem;
}

.contact__link--github:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.contact__link--linkedin {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: #0e76a8;
  width: 2rem;
  height: 2rem;
}

.contact__link--linkedin:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.contact__link--twitter {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: #08a0e9;
  width: 2rem;
  height: 2rem;
}

.contact__link--twitter:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.contact__link--discord {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: #7289da;
  width: 2rem;
  height: 2rem;
}

.contact__link--discord:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.contact__link--microsoft-teams {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: #6264a7;
  width: 2rem;
  height: 2rem;
}

.contact__link--microsoft-teams:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.contact__form-section {
  /* Message - Submit Form */
  width: 90%;
  background: linear-gradient(135deg, #4e4f70 0%, #393a53 100%);
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
  -webkit-box-shadow: 0 0 0.5rem 0.1875rem #393a53;
          box-shadow: 0 0 0.5rem 0.1875rem #393a53;
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  border-radius: 0.625rem;
  z-index: 2;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 56.25em) {
  .contact__form-section {
    margin-top: 10rem;
  }
}

/*
======
FOOTER
======
*/
.footer {
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
  background: -webkit-gradient(linear, left bottom, left top, color-stop(1%, rgba(23, 23, 23, 0.9)), color-stop(70%, #0e0e0e00));
  background: linear-gradient(to top, rgba(23, 23, 23, 0.9) 1%, #0e0e0e00 70%);
  -webkit-box-shadow: 0 0.125rem 0.75rem 0.0625rem #008f99;
          box-shadow: 0 0.125rem 0.75rem 0.0625rem #008f99;
  grid-column: full-start / full-end;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  bottom: 0;
  margin-top: 5rem;
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.footer__wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.footer__logo-container {
  margin: 0 auto;
}

.footer__logo {
  color: #e2e2e2;
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 2px;
  color: #e2e2e2;
  top: 1.5rem;
  left: 2rem;
  margin: 2rem auto;
}

.footer__logo--tech-media {
  font-weight: 500;
  color: #0ef;
}

.footer__legal {
  color: #666;
  font-weight: 300;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.footer__legal--dan {
  color: #e2e2e2;
}

.footer__legal--tech-media {
  font-weight: 500;
  color: #0ef;
}

.container {
  /* Container for the entire website - GLOBAL */
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (min-content)[5];
      grid-template-rows: repeat(5, -webkit-min-content);
      grid-template-rows: repeat(5, min-content);
  -ms-grid-columns: [nav-start full-start] min-content minmax(3.75rem, 1fr) [center-start] ([col-start] minmax(min-content, 9.375rem) [col-end])[8] [center-end] minmax(3.75rem, 1fr) [full-end nav-end];
      grid-template-columns: [nav-start full-start] -webkit-min-content minmax(3.75rem, 1fr) [center-start] repeat(8, [col-start] minmax(-webkit-min-content, 9.375rem) [col-end]) [center-end] minmax(3.75rem, 1fr) [full-end nav-end];
      grid-template-columns: [nav-start full-start] min-content minmax(3.75rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 9.375rem) [col-end]) [center-end] minmax(3.75rem, 1fr) [full-end nav-end];
}