/*---Firefox Bug Fix --*/
.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  background-image: url('img/mac.png');
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
    padding: 1rem;
}

/*
Custom variables for movement
*/
:root {
    --xDir: 0;
    --yDir: 0;

    --colorShadeA: rgb(106, 163, 137);
    --colorShadeB: rgb(121, 186, 156);
    --colorShadeC: rgb(150, 232, 195);
    --colorShadeD: rgb(187, 232, 211);
    --colorShadeE: rgb(205, 255, 232);
  }
/*
My test menu Toggler
*/
.navbar-toggler{
    height:25px;
}

.menu-container .bars {
    width: 25px;
    height: 10px;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.menu-container .bars span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: white;
    margin-top: 6px;
}
.menu-container .bars span:first-child {
    margin-top: 0;
    transform: scaleX(1);
    transition: transform 0.2s cubic-bezier(0.694, 0.048, 0.335, 1);
    transition-delay: 0.4s;
}
.menu-container .bars span:nth-child(3) {
    width: 65%;
    transition: width 0.2s cubic-bezier(0.694, 0.048, 0.335, 1);
    transition-delay: 0.4s;
}
.menu-container .bars .other-bar {
    width: 10px;
    height: 0;
    background-color: white;
    position: absolute;
    top: -23px;
    left: 50%;
    margin-left: -5px;
    transition: height 0.4s cubic-bezier(0.694, 0.048, 0.335, 1);
    z-index: 10;
}
.menu-container.is-menu-open .bars {
    transform: rotate(45deg);
    transition-delay: 0.4s;
}
.menu-container.is-menu-open .bars span:first-child {
    transform: scaleX(0);
    transition: transform 0.2s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.menu-container.is-menu-open .bars span:nth-child(3) {
    width: 0;
    transition: width 0.2s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.menu-container.is-menu-open .bars .other-bar {
    height: 60px;
    transition: height 0.2s cubic-bezier(0.694, 0.048, 0.335, 1);
    transition-delay: 0.3s;
}


/*
SVG stuff I added below
*/

body {
    background-color:  hsl(240,87%,6%);
   

}

.logo {
    width:80px;
    height:80px;
}

.description {
    color: aliceblue;
    font-family: 'Roboto', sans-serif;
}

.intro {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
}

.mainPage {
    z-index: 2;
}

#shapes-mask {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity .25s ease .65s;
    z-index: -1;
}

.no-js #shapes-mask {
    display: none
}

#shapes-mask svg path {
    stroke: inherit;
}

#shapes-mask .layer1{
    position: absolute;
    z-index:1;
    width:7px;
    height:7px;
}

#shapes-mask .p1 {
    left: -moz-calc(30% - var(--xDir) * 1%);
    /* WebKit */
    left: -webkit-calc(30% - var(--xDir) * 1%);
    /* Opera */
    left: -o-calc(30% - var(--xDir) * 1%);
    /* Standard */
    left: calc(30% - var(--xDir) * 1%);
    top: -moz-calc(20% - var(--yDir) * 1%);
    /* WebKit */
    top: -webkit-calc(20% - var(--yDir) * 1%);
    /* Opera */
    top: -o-calc(20% - var(--yDir) * 1%);
    /* Standard */
    top: calc(20% - var(--yDir) * 1%);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

#shapes-mask .p2 {
    left: -moz-calc(90% - var(--xDir) * 1%);
    /* WebKit */
    left: -webkit-calc(90% - var(--xDir) * 1%);
    /* Opera */
    left: -o-calc(90% - var(--xDir) * 1%);
    /* Standard */
    left: calc(90% - var(--xDir) * 1%);
    top: -moz-calc(70% - var(--yDir) * 1%);
    /* WebKit */
    top: -webkit-calc(70% - var(--yDir) * 1%);
    /* Opera */
    top: -o-calc(70% - var(--yDir) * 1%);
    /* Standard */
    top: calc(70% - var(--yDir) * 1%);
}

#shapes-mask .p3 {
    left: -moz-calc(100% - var(--xDir) * 1%);
    /* WebKit */
    left: -webkit-calc(100% - var(--xDir) * 1%);
    /* Opera */
    left: -o-calc(100% - var(--xDir) * 1%);
    /* Standard */
    left: calc(100% - var(--xDir) * 1%);
    top: -moz-calc(20% + var(--yDir) * 1%);
    /* WebKit */
    top: -webkit-calc(20% + var(--yDir) * 1%);
    /* Opera */
    top: -o-calc(20% + var(--yDir) * 1%);
    /* Standard */
    top: calc(20% + var(--yDir) * 1%);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

#shapes-mask .p4 {
    left: -moz-calc(70% - var(--xDir) * 1%);
    /* WebKit */
    left: -webkit-calc(70% - var(--xDir) * 1%);
    /* Opera */
    left: -o-calc(70% - var(--xDir) * 1%);
    /* Standard */
    left: calc(70% - var(--xDir) * 1%);
    top: -moz-calc(20% - var(--yDir) * 1%);
    /* WebKit */
    top: -webkit-calc(20% - var(--yDir) * 1%);
    /* Opera */
    top: -o-calc(20% - var(--yDir) * 1%);
    /* Standard */
    top: calc(20% - var(--yDir) * 1%);
}

#shapes-mask .p5 {
    left: -moz-calc(5% - var(--xDir) * 1%);
    /* WebKit */
    left: -webkit-calc(5% - var(--xDir) * 1%);
    /* Opera */
    left: -o-calc(5% - var(--xDir) * 1%);
    /* Standard */
    left: calc(5% - var(--xDir) * 1%);
    top: -moz-calc(80% + var(--yDir) * 1%);
    /* WebKit */
    top: -webkit-calc(80% + var(--yDir) * 1%);
    /* Opera */
    top: -o-calc(80% + var(--yDir) * 1%);
    /* Standard */
    top: calc(80% + var(--yDir) * 1%);
}

#shapes-mask .p5,#shapes-mask .p6 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

#shapes-mask .p6 {
    left: -moz-calc(4% - var(--xDir) * 1%);
    /* WebKit */
    left: -webkit-calc(4% - var(--xDir) * 1%);
    /* Opera */
    left: -o-calc(4% - var(--xDir) * 1%);
    /* Standard */
    left: calc(4% - var(--xDir) * 1%);
    top: -moz-calc(20% - var(--yDir) * 1%);
    /* WebKit */
    top: -webkit-calc(20% - var(--yDir) * 1%);
    /* Opera */
    top: -o-calc(20% - var(--yDir) * 1%);
    /* Standard */
    top: calc(20% - var(--yDir) * 1%);
}

#shapes-mask .p7 {
    left: -moz-calc(50% - var(--xDir) * 1%);
    /* WebKit */
    left: -webkit-calc(50% - var(--xDir) * 1%);
    /* Opera */
    left: -o-calc(50% - var(--xDir) * 1%);
    /* Standard */
    left: calc(30% - var(--xDir) * 1%);
    top: -moz-calc(90% - var(--yDir) * 1%);
    /* WebKit */
    top: -webkit-calc(90% - var(--yDir) * 1%);
    /* Opera */
    top: -o-calc(90% - var(--yDir) * 1%);
    /* Standard */
    top: calc(90% - var(--yDir) * 1%);
}

#shapes-mask .p8 {
    left: -moz-calc(80% - var(--xDir) * 1%);
    /* WebKit */
    left: -webkit-calc(80% - var(--xDir) * 1%);
    /* Opera */
    left: -o-calc(80% - var(--xDir) * 1%);
    /* Standard */
    left: calc(80% - var(--xDir) * 1%);
    top: -moz-calc(85% + var(--yDir) * 1%);
    /* WebKit */
    top: -webkit-calc(85% + var(--yDir) * 1%);
    /* Opera */
    top: -o-calc(85% + var(--yDir) * 1%);
    /* Standard */
    top: calc(85% + var(--yDir) * 1%);
}

#shapes-mask .p9 {
    left: -moz-calc(25% - var(--xDir) * 1%);
    /* WebKit */
    left: -webkit-calc(25% - var(--xDir) * 1%);
    /* Opera */
    left: -o-calc(25% - var(--xDir) * 1%);
    /* Standard */
    left: calc(25% - var(--xDir) * 1%);
    top: -moz-calc(2% - var(--yDir) * 1%);
    /* WebKit */
    top: -webkit-calc(2% - var(--yDir) * 1%);
    /* Opera */
    top: -o-calc(2% - var(--yDir) * 1%);
    /* Standard */
    top: calc(2% - var(--yDir) * 1%);
    -webkit-transform: rotate(65deg);
    transform: rotate(65deg)
}

#shapes-mask .p10 {
    left: -moz-calc(10% - var(--xDir) * 1%);
    /* WebKit */
    left: -webkit-calc(10% - var(--xDir) * 1%);
    /* Opera */
    left: -o-calc(10% - var(--xDir) * 1%);
    /* Standard */
    left: calc(10% - var(--xDir) * 1%);
    top: -moz-calc(4% + var(--yDir) * 1%);
    /* WebKit */
    top: -webkit-calc(4% + var(--yDir) * 1%);
    /* Opera */
    top: -o-calc(4% + var(--yDir) * 1%);
    /* Standard */
    top: calc(4% + var(--yDir) * 1%);
    -webkit-transform: rotate(85deg);
    transform: rotate(85deg)
}

#shapes-mask .p11 {
    left: -moz-calc(85% - var(--xDir) * 1%);
    /* WebKit */
    left: -webkit-calc(85% - var(--xDir) * 1%);
    /* Opera */
    left: -o-calc(85% - var(--xDir) * 1%);
    /* Standard */
    left: calc(85% - var(--xDir) * 1%);
    top: -moz-calc(10% - var(--yDir) * 1%);
    /* WebKit */
    top: -webkit-calc(10% - var(--yDir) * 1%);
    /* Opera */
    top: -o-calc(10% - var(--yDir) * 1%);
    /* Standard */
    top: calc(10% - var(--yDir) * 1%);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

#shapes-mask .p12 {
    left: -moz-calc(45% - var(--xDir) * 1%);
    /* WebKit */
    left: -webkit-calc(45% - var(--xDir) * 1%);
    /* Opera */
    left: -o-calc(45% - var(--xDir) * 1%);
    /* Standard */
    left: calc(45% - var(--xDir) * 1%);
    top: -moz-calc(10% + var(--yDir) * 1%);
    /* WebKit */
    top: -webkit-calc(10% + var(--yDir) * 1%);
    /* Opera */
    top: -o-calc(10% + var(--yDir) * 1%);
    /* Standard */
    top: calc(10% + var(--yDir) * 1%);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

#shapes-mask .p13 {
    left: -moz-calc(15% - var(--xDir) * 1%);
    /* WebKit */
    left: -webkit-calc(15% - var(--xDir) * 1%);
    /* Opera */
    left: -o-calc(15% - var(--xDir) * 1%);
    /* Standard */
    left: calc(15% - var(--xDir) * 1%);
    top: -moz-calc(55% + var(--yDir) * 1%);
    /* WebKit */
    top: -webkit-calc(55% + var(--yDir) * 1%);
    /* Opera */
    top: -o-calc(55% + var(--yDir) * 1%);
    /* Standard */
    top: calc(55% + var(--yDir) * 1%);
    -webkit-transform: rotate(85deg);
    transform: rotate(85deg)
}

#shapes-mask .p14 {
    left: -moz-calc(14% - var(--xDir) * 1%);
    /* WebKit */
    left: -webkit-calc(14% - var(--xDir) * 1%);
    /* Opera */
    left: -o-calc(14% - var(--xDir) * 1%);
    /* Standard */
    left: calc(14% - var(--xDir) * 1%);
    top: -moz-calc(97% - var(--yDir) * 1%);
    /* WebKit */
    top: -webkit-calc(97% - var(--yDir) * 1%);
    /* Opera */
    top: -o-calc(97% - var(--yDir) * 1%);
    /* Standard */
    top: calc(97% - var(--yDir) * 1%);
    -webkit-transform: rotate(85deg);
    transform: rotate(85deg)
}

#shapes-mask .p15 {
    left: -moz-calc(97% - var(--xDir) * 1%);
    /* WebKit */
    left: -webkit-calc(97% - var(--xDir) * 1%);
    /* Opera */
    left: -o-calc(97% - var(--xDir) * 1%);
    /* Standard */
    left: calc(97% - var(--xDir) * 1%);
    top: -moz-calc(94% - var(--yDir) * 1%);
    /* WebKit */
    top: -webkit-calc(94% - var(--yDir) * 1%);
    /* Opera */
    top: -o-calc(94% - var(--yDir) * 1%);
    /* Standard */
    top: calc(94% - var(--yDir) * 1%);
    -webkit-transform: rotate(85deg);
    transform: rotate(140deg)
}



#shapes-mask .white {
    stroke:white;
    fill: white
}



.newSection {
    background-image: linear-gradient(hsl(240,87%,6%), hsl(240,87%,18%), hsl(240,87%,6%));
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    color:aliceblue;
}
hr{
    height: 1px;
    background-color: aliceblue;
    border: none;
}

.newProject {
    margin-bottom: 10vh;
}

.projectTitle {
    font-family: 'Roboto', sans-serif;
    color:aliceblue;
}

.projectDescription {
    font-family: 'Roboto', sans-serif;
    color:aliceblue;
    margin-top:10px;
}

.technical{
  color: red;
}

.projectPics {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60vw;
    height: 33.75vw;
}





/*FOOTER BUTTON*/
@import url('https://fonts.googleapis.com/css?family=Roboto:300&display=swap');
 .button {
	 width: 200px;
	 height: 50px;
	 position: relative;
     margin:auto;
	 border: solid rgba(255, 255, 255, 0.3) 2px;
	 background: transparent;
	 cursor: pointer;
	 transition: all 1s;
}
 .button span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	color: white;
	font-family: 'Roboto', sans-serif;
	opacity: 0.9;
}
 .button .line {
	 background: white;
	 position: absolute;
	 transition: none;
	 transform: scale(0);
	 opacity: 1;
}
 .button .line:nth-child(1) {
	 transform-origin: 100% 100%;
	 height: 1px;
	 width: 20%;
	 bottom: 0;
}
 .button .line:nth-child(4) {
	 transform-origin: 0 100%;
	 height: 1px;
	 width: 20%;
	 top: -1px;
	 right: 0;
}
 .button .line:nth-child(2) {
	 transform-origin: 100% 100%;
	 height: 100%;
	 width: 1px;
	 bottom: 0;
	 left: -1px;
}
 .button .line:nth-child(5) {
	 transform-origin: 100% 0;
	 height: 100%;
	 width: 1px;
	 bottom: 0;
	 right: -1px;
}
 .button .line:nth-child(3) {
	 transform-origin: 0 100%;
	 height: 1px;
	 width: 100%;
	 top: -1px;
	 left: -1px;
}
 .button .line:nth-child(6) {
	 transform-origin: 100% 0;
	 height: 1px;
	 width: 100%;
	 bottom: 0;
	 right: -1px;
}
 .button:hover > .line {
	 transform: scale(1);
	 opacity: 0;
	 transition: all 1s;
}
 .button:hover > .line:nth-child(2), .button:hover > .line:nth-child(5) {
	 transition-delay: 0.5s;
}
 .button:hover > .line:nth-child(3), .button:hover > .line:nth-child(6) {
	 transition-delay: 0.9s;
}
 .button:hover {
	 background: rgba(255, 255, 255, 0.03);
}
 










/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/









/*---Media Queries --*/
@media (max-width: 992px) {

}
@media (max-width: 768px) {
  .aboutMe{
      font-size: 16px
  }
}
@media screen and (max-width: 576px) {

  .myPic{
      max-height: 20vh;
  }
  
  .aboutMe{
      font-size: 14px
  }

  .projectDescription{
      font-size:14px;
  }

  .button{
      width:100px;
      height:50px;
  }
}