/*
colors useed:
background color: #adc9bF (sage green)
text color: #0f3b06
*/
* {
  box-sizing: border-box;
}

.logo {
  max-width: 50px;
  margin-left: 10px;
}

body {
  background-color: #adc9bf; /* sage green */
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4; /* 1.4 x the font size */
  color: #0f3b06;
}

.css-box-shadow {
  /* start ------------ */
  width: [object Object]px;
  height: [object Object]px;
  background: #adc9bf;
  border: none;
  box-shadow: 5px 6px 20px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 5px 6px 20px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 6px 20px rgba(0, 0, 0, 0.5);
  top: 0;
  z-index: 1; /* makes nav bar highest in the stack */
}

img {
  width: 100%;
}

h1,
h2,
h3 {
  font-family: EB Garamond; /* more edits to come when spacing is better sorted out */
  font-weight: 300;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.5em;
  margin: 0.5em;
}

header {
  /* text-align: center; */
  padding: 10px 0 4px;
  background-color: #74c5c1;
  position: fixed;
  width: 100%;
}

.navtoggle li:not(:last-child) {
  display: none;
}

.navtoggle,
.navtoggle.responsive {
  position: relative;
}

.navtoggle li .icon {
  position: absolute;
  right: 0;
  top: 10px;
  font-size: 20px;
  padding-right: 0;
}

.navtoggle.responsive li {
  display: block;
  padding: 10px 0;
  border-top: 1px solid #486f4a;
}

.navtoggle.responsive nav {
  padding: 24px 0 0;
}

.navtoggle.responsive li:last-child {
  padding: 0 0 10px;
}

a {
  color: #0f3b06;
  text-decoration: underline;
}

.social {
  text-decoration: none;
}

a:hover,
a:focus {
  color: #53732a;
}

a:active {
  color: #9ac56f;
}

.primary-button {
  display: inline-block;
  background-color: #d8decc;
  color: #276c5b;
  font-weight: 600;
  padding: 13px;
  border-radius: 30px;
  border: 2px solid #0e362c;
  transition: 0.2s opacity;

  /*
      so, for a transitions to work, there needs to be a default and a hover/secondary state.
      need to code both the default and the hover/secondary state in order for the defined transition to be seen.
      define the start and the finish of this journey.
      you can put multiple types of transitions on one line for the same type of default state
        ie. primary button will have 3 different transisions so needs 3 different hover/secondary states to display all:
            .button {
              border: none;
              font-family: inherit;
              background-color: #05676e;
              color: white !important;
              text-decoration:none;
              padding: 10px;
              border-radius: 3px;
              border-bottom: 2px solid #03474c;
              transition: 0.4s opacity, 0.5s background-color, 0.4s font-size;
            }

            .button:hover {
              cursor: pointer;
              opacity: 0.8;
            }

            .button2:hover {
              background-color: #489c79;
            }

            .button3:hover {
              font-size: 18px;
            }
      info source: https://codepen.io/anon/pen/ZyxoMx
    */

  text-decoration: none;
}

.primary-button:hover,
a:focus {
  color: #276c5b;
  opacity: 0.8; /* reduces opacity 80% */
  text-decoration: none;
}

nav > ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

nav > ul > li > a {
  padding: 0 15px;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;

  /* increase spacing btn buttons?? */
}

/* layout styling */

.container {
  padding: 0 15px;
}

.row {
  margin: 25px 0;
}

#projects .row {
  padding-bottom: 4vh;
  border-bottom: 1px solid #0b280d;
}

#hero h1 {
  text-align: left;
  margin-right: 10%;
  font-size: 3em;
}

#hero {
  background-color: #0e4d50;
  margin-top: 65px;
  padding-top: 20%;
  padding-bottom: 10px;
  display: inline-block;
  width: 100%;
  color: #cce7d2;
}

#me {
  margin-right: 35%;
}

.work {
  margin-top: 28%;
}

footer > div > div > a > img {
  width: 40px;
  text-align: center;
}

footer {
  padding-right: 12.5px;
  padding-left: 12.5px;
}

.skills {
  font-style: italic;
}

.step {
  margin-bottom: 8vh;
}

#pp {
  max-width: 100%;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#ab-left {
  display: none;
}

.caption {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 13px;
}

#results {
  margin-bottom: 5vw;
}

@keyframes bg-color-change {
  0% { fill: #87c9d6; }
  60% { fill: #e3d19b; }
  100% { fill: #1e2248; }
}

.bg {
  animation-duration: 15s;
  animation-name: bg-color-change;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease;
}

@keyframes skyline-color {
  0% { fill: #518297; }
  60% { fill: #b1986e; }
  100% { fill: #0d0c2e; }
}

.skyline {
  animation: 15s skyline-color infinite alternate ease;
}

@keyframes cube-move {
  from { transform: translate(-300px, 50px); }
  to { transform: translate(300px, 50px); }
}

.clouds {
  animation-duration: 25s;
  animation-name: cube-move;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

#contact {
  border-top: 1px solid black;
  margin-right: 2.5%;
  margin-left: 2.5%;
}

#contactHome {
  border-top: none;
}

.fa-arrow-left {
  margin-left: 5%;
}

#back {
  text-decoration: none;
}

/* medium devices */
@media only screen and (min-width: 640px) {
  .container {
    padding: 0;
    margin-left: 5vw;
    margin-right: 5vw;
  }

  nav > ul > li {
    display: inline-block;
  }

  header {
    text-align: unset;
    padding: 20px 0 13px;
  }

  .navtoggle li:not(:last-child) {
    display: inline-block;
  }

  .navtoggle li:last-child {
    display: none;
  }

  nav {
    width: auto;
    float: right;
    margin-top: 4px;
  }

  body {
    font-size: 18px;
  }

  #hero {
    padding-top: 20%;
    text-align: left;
  }

  #hero h1 {
    margin-right: 20%;
    font-size: 3.5em;
  }

  .col-md-6 {
    width: 50%;
    padding: 10px;
  }

  [class*="col-"] {
    float: left;
  }

  .row::after {
    content: "";
    clear: both;
    display: table;
  }

  #skills-tools {
    margin-bottom: -0.2em;
    margin-top: 1em;
  }

  nav > ul {
    margin: 1em 0;
  }

  #about {
    background-color: #0e4d50;
    margin-top: 90px;
    position: relative;
  }

  .meet {
    color: #cce7d2;
    position: absolute;
    top: 36%;
    left: 10%;
  }

  #ab-left {
    display: inline-block;
    width: 50%;
  }

  #ab-right {
    width: 50%;
    margin-left: 50%;
  }

  .work {
    margin-top: 18%;
  }

  .program {
    display: inline-block;
    width: 49%;
    margin-left: auto;
    margin-right: auto;
  }

  .navtoggle.responsive li {
    padding: 0;
    border-top: 0;
  }

  .navtoggle.responsive nav {
    padding: 0;
  }

  #ani {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  #ocean {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* large devices */
@media only screen and (min-width: 1024px) {
  h1 {
    font-size: 3em;
  }

  #hero {
    padding-top: 15%;
  }

  #me {
    font-size: 1.3em;
    margin-right: 50%;
  }

  #ab-left > span {
    font-size: 1.5em;
  }

  .col-lg-7 {
    width: 58.33%;
    padding: 10px;
  }

  .col-lg-5 {
    width: 41.66%;
    padding: 10px;
  }

  .meet {
    top: 43%;
    left: 13%;
  }

  .text {
    margin: 50px 100px;
  }

  .pross-img {
    width: 30%;
  }

  .work {
    margin-top: 15%;
  }

  .program {
    width: 49%;
  }

  #shrink img {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  #sf svg {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .caption {
    text-align: center;
  }

  #poster {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  #ani {
    width: 40%;
  }

  #ocean {
    width: 80%;
  }
}

/* x-large devices
@media only screen and (min-width: 1440px) {
} */