styles.css

/* @import url('https://fonts.googleapis.com/css2?family=Darker+Grotesque&display=swap'); */

/* Variables */
:root {
  /* --bs-body-font-family: sans-serf !important; */
  --normal-font: 400;
  --bold-font: 700;
  --bolder-font: 900;
  --bg-color: #fcfcfc;
  --primary-color: #4756df;
  --secondary-color: #ff7235;
  --primary-shadow: #8b8eaf;
  --secondary-shadow: #a17a69;
  --bottom-margin: 0.5rem;
  --bottom-margin-2: 1rem;
  --line-height: 1.7rem;
  --transition: 0.3s;

  /* Change this to change the appearance of the hexaons */
  --hex-width: 100px; 
  --hex-between: 10px;
  
  /* Other hexagon dimentions */
  --hex-height: calc(var(--hex-width) / 1.73 /* sqrt(3) */);
  --hex-margin: calc(var(--hex-width) / 2);
  --hex-border: calc(var(--hex-margin) / 1.73 /* sqrt(3) */);
  --hex-transition: all .2s ease;
  
  /* Colors */
  --color-hex-default: #000000;
  --color-hex-hover:   #FFFFFF;
  --color-nuke:        #e0a119;
  --color-silhouette:  #7c7c7c;
  --color-bootstrap:   #563D7C;
  --color-css:         #1572B6;
  --color-git:         #F14E32;
  --color-html:        #E34F26;
  --color-javascript:  #F7DF1E;
  --color-python:      #3776AB;
  --color-vuejs:       #4FC08D;
  --color-blank:       var(--bg-color);
}
/* Variables end */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

#navbar {
    position: fixed;
    top: 0px;
}



body {
  font-family: "Quicksand" !important;
}

#welcome-section {
  height: 100vh;
  min-height: 100vh;
  background-image: url('images/mitch_mountain.jpg');
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover 100%;
}

#about-section {
  display: flex;
  justify-content: space-around;
  min-height: 60vh;
  background-color: var(--bg-color);
  padding: 3rem;
}

#career-section {
  /* height: 90vh; */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 5rem;
}

#projects-section {
  /* height: 90vh; */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 5rem;
  background-color: var(--bg-color);
}

#contact-section {
  background-repeat: no-repeat;
  background-size: cover;
}

#home {
  position: relative;
  top: 30%;
  left: 10%;
  transform: translateX(8%);
  flex-direction: column;
}

.sentence {
  color: black;
  padding-left: 12px;
}

.typing-container {
    display: flex;
    max-width: 100%;
    align-items: center;
    text-align: left;
}

#feature-text {
  margin-left: 8px;
}

.input-cursor {
  display: inline-block;
  width: 3px;
  height: 36px;
  background-color: black;
  margin-left: 0px;
  animation: blink .6s linear infinite alternate;
}

@keyframes blink {
  0% {opacity: 1;}
  40% {opacity: 1;}
  60% {opacity: 0;}
  100% {opacity: 0;}
}

/* Go to top button */
.go-to-top {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	text-decoration: none;
	color: white;
	background-color: rgba(0, 0, 0, 0.3);
  border-radius: 2rem;
	font-size: 12px;
	padding: 1em;
	display: none;
}

.go-to-top:hover {
	background-color: rgba(0, 0, 0, 0.6);
}

#about {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row wrap;
}

#about-text {
  max-width: 30rem;
  margin: 5rem 5rem;
}

#about h2 {
  text-align: center;
}

#about p {
  line-height: var(--line-height);
  padding: 0.4rem;
}

#career h2 {
  text-align: center;
}

*{
  box-sizing: border-box;
}

.jobs-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  flex-flow: row wrap;
  padding-bottom: var(--bottom-margin-2);
}

.article{
  width: 60rem;
  margin:3rem;
  padding:1rem;
  background:#efefef;
  border-radius:5px;
}

.image{
  background:silver;
  object-fit: cover;
  width: 50%;
  height: 20rem;
  border-radius: 8px;
  background-color: whitesmoke;
  box-shadow: 0 5px 8px var(--primary-shadow);
  font-size:8rem;
  &.right{
    float:right;
    margin-left:2rem;
  }
  &.left{
    float:left;
    margin-right:2rem;
  }
}

.content{
  padding: 0 20px;
  color:#444;
  /* .headline{
  } */
}

/* ClearFix */
.group{
  &:before,
  &:after {
    content: "";
    display: flex;
  } 
  &:after {
    clear: both;
  }
}

.projects {
  background-color: var(--bg-color);
  padding: 32px 0;
  margin-top: 2rem;
}

.project-pic {
  width: 65%;
  height: 60%;
}

.projects-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  flex-flow: row wrap;
  padding-bottom: var(--bottom-margin-2);
}

.projects-title {
  text-align: center;
  margin-bottom: 2rem;
}

.project-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 21rem;
  padding: 1rem;
  /* border:5px solid orange; */
}

.project-container p {
  padding: 0.4rem;
}

.project-title {
  margin-top: 2rem;
  margin-bottom: var(--bottom-margin);
}

.project-details {
  margin-bottom: var(--bottom-margin);
}

.project-card {
  background-color: #fff;
  border-radius: 11px;
  box-shadow: 0 3px 10px var(--primary-shadow);
  padding: 20px;
  margin: 10px;
}

.project-pic {
  width: 80%;
  height: 8rem;
  border-radius: 8px;
  background-color: whitesmoke;
  box-shadow: 0 5px 8px var(--primary-shadow);
}

.bgmtl {
  background-image: url('images/j-photos-q4xL1d1PfVU-unsplash.jpg');
}

.contact {
  padding: 3rem 3rem 8rem;
}

.contact h2 {
  color: white;
  text-align: center;
  margin-bottom: var(--bottom-margin-2);
}

.contact-form .h-captcha {
  display: flex;
  justify-content: center;
}

.contact-form-container {
  max-width: 40.75rem;
  margin: 0 auto;
  padding: 1rem;
  padding-bottom: 3rem;
  border-radius: 20px;
  box-shadow: 0 3px 10px white;
  background-color: white;
}

form {
	
  .form-group {
    margin: 1rem 1rem;
  }

  .form-group:before {
      font-family: 'FontAwesome';
      position: absolute;
      top: 15px;
      left: 28px;
  }

  .form-name:before {
    content: '\f007';
  }

  .form-email:before {
    content: '\f003';
  }

  .form-message:before {
    content: '\f075';
    top: 10px;
  }

  .form-control {
    background-color: #f2f6f8;
		border-radius: 2rem;
    border: none;
    box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.11);
		
    &.thick {
      height: 3.3rem;
      padding: .5rem 3.5rem;
    }
		
		&:focus {
			background-color: #f2f6f8;
			border: none;
			box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.11);
		}
  }
	
	.message .form-control {
			padding: .5rem 3.5rem;
	}
	
  ::placeholder {
    font-family: 'Quicksand', sans-serif;
		font-weight: 600;
    font-size: 1.1rem;
    color: #838788;
    position: relative;
    left: 0;
  }
	
  input,
  textarea {
		font-family: 'Quicksand', sans-serif;
    color: #212529;
    font-size: 1.1rem;
  }

}

.btn.btn-primary {
  font-family: 'Quicksand', sans-serif;
	font-weight: bold;
  height: 2.5rem;
  line-height: 2.5rem;
  margin-top: 1rem;
  padding: 0 3rem;
  border: 0;
  border-radius: 3rem;
  background-image:linear-gradient(131deg, #40e2ff, #3cbbff, #3c8aff, #3c63ff);
  background-size: 300% 100%;
  transition: all 0.3s ease-in-out;
}

.btn.btn-primary:hover:enabled {
  box-shadow: 0 0.5em 0.5em -0.4em #5a69f2ba;
  background-size: 100% 100%;
  transform: translateY(-0.15em);
}

.submit-btn {
  width: 100%;
}

.location-pin {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f6f6f681;
  width: 12rem;
  height: 3rem;
  border-radius: 10rem;
}

.location-pin a{
  padding: 0.5rem;
}

.location-pin h5{
  padding: 0.5rem;
}

/* Footer */
.site-footer {
  background-color:#26272b;
  padding: 2rem 6.5rem;
  font-size: 15px;
  line-height: 24px;
  color: #737373;
}

.site-footer .social-icons {
  text-align:right
}

.site-footer .social-icons a {
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d
}

#copy-container {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

.copyright-text {
  margin:0
}

.social-icons {
  padding-left:0;
  margin-bottom:0;
  list-style:none
}

.social-icons li {
  display:inline-block;
  margin-bottom:4px
}

.social-icons a {
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}

.social-icons a:active,.social-icons a:focus,.social-icons a:hover {
  color:#fff;
  background-color:#29aafe
}

.social-icons.size-sm a {
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}

.social-icons a.linkedin:hover {
  background-color:#0077b5 
}

.social-icons a.github:hover {
  background-color:#6cc644
}
.social-icons a.twitter:hover {
  background-color:#1DA1F2
}

.social-icons a.briefcase:hover {
  background-color:#8e9ea4
}

/* Hexagons */
.hexagon-container {
  display: grid;
  grid-template-columns: var(--hex-width) var(--hex-width) var(--hex-width);
  grid-auto-rows: calc(var(--hex-width) - 28.87px/2);
  grid-gap: var(--hex-between) var(--hex-between);
  padding-bottom: var(--hex-border);
}
.hexagon {
  align-items: center;
  background-color: var(--color-hex-default);
  display: flex;
  fill: white;
  height: var(--hex-height);
  justify-content: center;
  margin: var(--hex-border) 0;
  position: relative;
  transition: var(--hex-transition);
  width: var(--hex-width);
}

.hex-blank {
  transition: none !important;
  cursor: auto;
  fill: none !important;
  visibility: hidden;
}

.hexagon::after,
.hexagon::before {
  border-left: var(--hex-margin) solid transparent;
  border-right: var(--hex-margin) solid transparent;
  content: "";
  left: 0;
  position: absolute;
  transition: var(--hex-transition);
  width: 0;
}
.hexagon::after {
  border-top: var(--hex-border) solid var(--color-hex-default);
  top: 100%;
  width: 0;
}
.hexagon::before {
  border-bottom: var(--hex-border) solid var(--color-hex-default);
  bottom: 100%;
}
  
.hexagon:hover {
  background-color: var(--color-hex-hover);
}
.hexagon:hover::after,
.hexagon:hover::before {
  border-top-color: var(--color-hex-hover);
  border-bottom-color: var(--color-hex-hover);
  }

.hexagon:nth-child(-n + 1),
.hexagon:nth-child(-n + 2),
.hexagon:nth-child(-n + 3) {
  margin-left: calc(var(--hex-width) / 2 + var(--hex-between) / 2);
}

.hexagon:nth-child(8n + 7),
.hexagon:nth-child(8n + 8) {
  margin-left: calc(var(--hex-width) / 2 + var(--hex-between) / 2);
}

.hexagon > svg {
  height: 75%;
  transition: var(--hex-transition);
}

/* Colors */

.color-git {
  background-color: var(--color-git);
}
.color-git::after,
.color-git::before {
  border-top-color: var(--color-git);
  border-bottom-color: var(--color-git);
}
.color-git:hover {
  fill: var(--color-git);
}

.color-html {
  background-color: var(--color-html);
}
.color-html::after,
.color-html::before {
  border-top-color: var(--color-html);
  border-bottom-color: var(--color-html);
}
.color-html:hover {
  fill: var(--color-html);
}

.color-javascript {
  background-color: var(--color-javascript);
}
.color-javascript::after,
.color-javascript::before {
  border-top-color: var(--color-javascript);
  border-bottom-color: var(--color-javascript);
}
.color-javascript:hover {
  fill: var(--color-javascript);
}

.color-vuejs {
  background-color: var(--color-vuejs);
}
.color-vuejs::after,
.color-vuejs::before {
  border-top-color: var(--color-vuejs);
  border-bottom-color: var(--color-vuejs);
}
.color-vuejs:hover {
  fill: var(--color-vuejs);
}

.color-css {
  background-color: var(--color-css);
}
.color-css::after,
.color-css::before {
  border-top-color: var(--color-css);
  border-bottom-color: var(--color-css);
}
.color-css:hover {
  fill: var(--color-css);
}

.color-python {
  background-color: var(--color-python);
}
.color-python::after,
.color-python::before {
  border-top-color: var(--color-python);
  border-bottom-color: var(--color-python);
}
.color-python:hover {
  fill: var(--color-python);
}

.color-bootstrap {
  background-color: var(--color-bootstrap);
}
.color-bootstrap::after,
.color-bootstrap::before {
  border-top-color: var(--color-bootstrap);
  border-bottom-color: var(--color-bootstrap);
}
.color-bootstrap:hover {
  fill: var(--color-bootstrap);
}

.color-nuke {
  background-color: var(--color-nuke);
}
.color-nuke::after,
.color-nuke::before {
  border-top-color: var(--color-nuke);
  border-bottom-color: var(--color-nuke);
}
.color-nuke:hover {
  fill: var(--color-nuke);
}

.color-silhouette {
  background-color: var(--color-silhouette);
}
.color-silhouette::after,
.color-silhouette::before {
  border-top-color: var(--color-silhouette);
  border-bottom-color: var(--color-silhouette);
}
.color-silhouette:hover {
  fill: var(--color-silhouette);
}

.color-blank {
  background-color: var(--color-blank);
}
.color-blank::after,
.color-blank::before {
  border-top-color: var(--color-blank);
  border-bottom-color: var(--color-blank);
}
.color-blank:hover {
  fill: var(--color-blank);
}

/* Phone screens */
@media only screen and (max-width: 900px) {
  #welcome-section {
    height: 100vh;
    background-repeat: no-repeat;
    background-size: 150vh 100%;
    background-position: center;
    max-width: 100%;
  }
  #home {
    position: relative;
    color: whitesmoke;
    top: 55%;
    transform: translateX(5%);
    flex-direction: column;
  }
  .socials a {
    color: whitesmoke;
  }
  .socials a:hover {
    color: gray;
  }
  #feature-text {
    margin-left: 3px;
  }
  .input-cursor{
    width: 3px;
    height: 24px;
    background-color: white;
  }
  #about-text {
    margin: 5rem 0rem;
  }

  #career > *{
    max-width: 100%;
  }
  #career-section {
    padding: 1rem;
  }
  .career-title {
    margin: 3rem auto;
  }
  .article, .group, .content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  }
  .article {
    margin: 2rem 0 2rem 0;
    padding: 2rem 0 2rem 0;
    align-items: center;
  }
  .article > section {
    padding-top: 2rem;
    max-width: 90%;
  }
  .article > img {
    width: 80%;
    max-width: 20rem;
    height: auto;
    max-height: 20vh;
    &.right{
      margin: auto;
    }
    &.left{
      margin: auto;
    }
  }
  .contact {
    padding: 5rem 2rem;
  }
  .contact-form-container {
    padding: 0.5rem;
    padding-bottom: 1rem;
  }
  .h-captcha {
    transform:scale(0.7);
  }
  .location-pin-container {
    display: none;
  }
  .site-footer [class^=col-] {
    margin-bottom:30px;
  }
  .site-footer {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom:0;
  }
  .site-footer .copyright-text,.site-footer .social-icons{
    text-align:center
  }
  .go-to-top {
    display: none;
    visibility: hidden;
  }
}

/* Larger screens */
@media only screen and (min-width: 1380px) {
  #welcome-section {
    background-position: top;
  }
}