/* Table of Contents:
   
   1. global styles

   2. typography
   
   3. layout
      3.1 links
   
   4. components
      4.1 buttons
      4.2 cards 

   5. Palindrome page

   6. Animations

   7. Smaller screens

*/

/* || global styles */

@import url('https://fonts.googleapis.com/css?family=Roboto:200,400,500&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
}

:root {
  --light-color: #e1f5fe;
  --primary-blue: #01579b;
  --primary-teal: #00BCD4;
  --secondary-purple: #AA00FF;
  --bg-light-blue: #E0F7FA;
}

/*removes wonky spcace on bottom of page*/
html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
  background: var(--bg-light-blue);
  font-size: 18px;
}

/* || typography -links  */


p {
  opacity: 0.87;
  letter-spacing: 0.5px;
}

h1 {
  font-size: 2.44em;
  font-weight: 500;
  text-align: center;
}

h2 {
  font-size: 2.14em;
  font-weight: 500;
}

h4 {
  font-size: 1.5em;
  font-weight: 400;
}

h6 {
  text-transform: uppercase;
  font-size: 1em;
  font-weight: 500;
  letter-spacing: 0.5px;
}

h7 {
  font-style: italic;
  text-transform: uppercase;
  font-size: 0.83em;
  letter-spacing: 0.5px;
}
.title {
  background-image: linear-gradient(130deg,
    #000,
    #000 49.9%,
    var(--light-color) 50.1%);
  color: var(--light-color);
}

nav a {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.3s all ease-in-out;
}

nav a:hover {
  opacity: 0.7;
}

/* || layout -links  */

header {
  width: 100%;
  height: auto;
  background-image: linear-gradient(90deg,
    var(--primary-blue),
    var(--primary-teal));
  color: var(--light-color);
}

/*this keeps the nav meat compact for large sceens*/
nav {
  max-width: 1720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
}

nav #logo {
  margin: 15px 0 15px 15px;
  font-size: 1.24em;
  font-weight: 300;
  letter-spacing: 0.5px;
  grid-row: 1;
  grid-column: 1;
}

main {
  margin: 0px auto;
  width: 95%;
  min-width: 310px;
  max-width: 1200px;
  height: auto;
}
.hero {
  position: relative;
  padding-top: 59px;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#hero-text {
  margin-top: 35px;
  padding: 30px;
  position: relative;
  z-index: 2;
}

footer {
  width: 100%;
  height: auto;
  background-image: linear-gradient(90deg,
    var(--primary-blue),
    var(--primary-teal));
  color: var(--light-color);
}

.footer-main {
  margin: 0px auto;
  width: 95%;
  min-width: 310px;
  max-width: 1200px;
}

#footer-end {
  font-size: 1.25em;
  margin-top: 4em;
  text-align: center;
}

/*a link order: link, visited, hover, active*/
#footer-end, #footer-end a:link, #footer-end a:visited {
  color: var(--bg-light-blue); 
}

#footer-end p {
  font-size: .75em;
  padding-top: 3em;
  padding-bottom: 1em;
}

#footer-end .fab {
  padding: 1em 0.5em;
}
#footer-end a:hover {
  color: var(--secondary-purple);
}
/* || components -buttons  */

/* header components */
#squares-container {
  top: 59.6px;
  right: 0;
  position: absolute;
  height: 75%;
  width: 30px;
}

.cube {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 16.66%;
  border-radius: 50%;
  background: var(--primary-teal);
}

#squares-container span:nth-child(1) {
  animation: move-left 5s infinite;
}

#squares-container span:nth-child(2) {
  animation: move-left-short 6s infinite;
}

#squares-container span:nth-child(3) {
  animation: move-left-up 5s infinite;
}

#squares-container span:nth-child(5) {
  animation: move-left 4s infinite;
}

#squares-container span:nth-child(4) {
  animation: move-left-short 4s infinite;
}

#squares-container span:nth-child(6) {
  animation: move-left-up 6s infinite;
}

.nav-container {
  position: fixed;
  top: 0;
  z-index: 50;
  width: 100%;
  background-image: linear-gradient(90deg,
    var(--primary-blue),
    var(--primary-teal));
  color: var(--light-color);
  border-bottom: 2px solid white;
}

/*hides checkbox and FA hamburger menu*/
#nav-toggle,
.hamburger-menu {
  display: none;
}

.hamburger-menu {
  grid-column: 3;
  cursor: pointer;
}

.fa-bars {
  font-size: 1.5em;
  margin-right: 15px;
}

.hide-me {
  display: none;
}

.teal {
  color: var(--primary-teal);
}

#logo span:nth-child(2) {
  animation: hide-me 4s;
  animation-fill-mode: forwards;
}

#logo span:nth-child(3) {
  padding-left: 7px;
  animation: slow-move 4s, color-swap 4s;
  animation-fill-mode: forwards;
}

#logo span:nth-child(4) {
  animation: color-swap 4s, hide-me 4.5s;
  animation-fill-mode: forwards;
}

.hamburger-menu {
  transition: 0.3s all ease-in-out;
}

.hamburger-menu:hover {
  opacity: 0.7;
  color: var(--primary-blue);
}

#right-menu {
  grid-column: 3;
  align-self: center;
}

#right-menu a {
  padding: 10px 0;
  margin-right: 15px;
  font-size: 1em;
  font-weight: 300;
  letter-spacing: 0.5px;
}

.hero-clip {
  width: 100%;
  height: 10vw;
  margin-bottom: 25px;
  background: var(--bg-light-blue);
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

.footer-clip {
  width: 100%;
  height: 10vw;
  background: var(--bg-light-blue);
  clip-path: polygon(100% 0, 0 0, 0 100%);
  margin-bottom: 25px;
  margin-top: 2em;
}

/* about me components */
.about-container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.profile-pic {
  display: grid;
  justify-content: center;
  grid-column: 1;
  grid-row: 1;
  min-width: 310px;
  margin: auto;
}

.img-circle {
  width: 75%;
  border-radius: 50%;
  margin: auto;
}

.center-text {
  text-align: center;
}

.about-info {
  padding-top: 10px;
  margin-bottom: 20px;
  grid-row: 1;
  background: var(--bg-light-blue);
}

.skills-container {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  width: 100%;
  height: auto;
}

.skills-left {
  grid-column: 1;
}

.skills-left p {
  margin-bottom: 5px;
}

.skills-right {
  grid-column: 2;
}

.skills-right p {
  margin-bottom: 5px;
}

.fa-check {
  color: var(--primary-teal);
  margin-right: 20px;
}

/* Contact Page */
.btn-submit {
  width: 50%;
  grid-row: 3;
  grid-column: 1;
  font-size: 1em;
  border-radius: 5px;
  padding: 10px 20px;
  border: 2px solid var(--bg-light-blue);
  background: none;
  color: var(--bg-light-blue);
}

.btn-submit:hover {
  border-color: var(--primary-teal);
}

.btn-submit:active {
  border-color: black;
  color: black;
}

details {
  line-height: 1.5;
  user-select: none;
  cursor: pointer;
}

.portfolio-head {
  border-bottom: 2px solid black;
  margin: 0 auto;
  display: grid;
  column-gap: 15px;
  grid-template-columns: auto 1fr auto auto;
}

.btn-2 {
  outline: none;
  background: none;
  padding: 8px 10px;
  cursor: pointer;
  border: 2px solid var(--light-color);
  border-bottom: none;
  transition: 0.3s all ease-in-out;
}

.btn-2:hover {
  color: var(--primary-teal);
}

.btn-2.active {
  border-color: black;
  background: black;
  color: white;
}

.btn-3 {
  position: fixed;
  background: none;
  padding: 8px 10px;
  cursor: pointer;
  border: 2px solid var(--bg-light-blue);
  border-radius: 10px;
  color: var(--bg-light-blue);
  right: 20px;
  top: 20px;
}

.btn-3:hover {
  color: pink;
  border: 2px solid pink;
  outline: none;
}

.fa-times {
  color: red;
  font-size: 3em;
}

.col-1 {
  grid-column: 1;
}

.col-3 {
  grid-column: 3;
}

.col-4 {
  grid-column: 4;
}

.portfolio-area {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  margin: 20px 0;
}

/*begins as a filter for design card
*/
.filterDiv {
  display: none;
}

.show {
  display: block;
}

.code-card {
  min-width: 310px;
  min-height: 310px;
  max-width: 590px;
  max-height: 590px;
  background: white;
  border-radius: 10px;
  padding-bottom: 0.5em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.design-card {
  min-width: 310px;
  min-height: 310px;
  max-width: 590px;
  /*max-height: 590px;*/
  background: white;
  border-radius: 10px;
  padding-bottom: 0.5em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.error-container {
  border-radius: 10px;
  text-align: center;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%,-50%);
}
.pop-out {
/*  line-height: 55%;*/
  font-size: 12em;
  font-weight: 700;
  color: var(--primary-blue);
  text-shadow: 1px 1px 1px #919191,
    1px 2px 1px #919191,
    1px 3px 1px #919191,
    1px 4px 1px #919191,
    1px 5px 1px #919191,
    1px 6px 1px #919191,
    1px 7px 1px #919191,
    1px 8px 1px #919191,
    1px 9px 1px #919191,
    1px 10px 1px #919191,
    1px 18px 6px rgba(16,16,16,0.4),
    1px 22px 10px rgba(16,16,16,0.2),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(16,16,16,0.4);
}

.img-responsive {
  width: 100%;
  object-fit: cover;
}

figure img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

figure {
  transition: 0.3s all ease-in-out;
}

figure:hover {
  opacity: 0.87;
}

figcaption {
  padding: 0.5em 1em;
  opacity: 0.87;
}

i {
  font-size: 0.8em;
  padding: 1em;
  opacity: 0.87;
}

.modal {
  display: none;
  outline: none;
  position: fixed;
  z-index: 51;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: black;
}

.modal-content {
  margin: 20px auto;
  display: block;
  width: 80%;
  max-width: 1200px;
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 1200px;
  text-align: center;
  color: var(--bg-light-blue);
  padding: 1em 0;
  height: 150px;
}

.contact-head {
  border-bottom: 2px solid var(--bg-light-blue);
  margin: 0 auto;
  padding-bottom: 0.75em;
}

#form-outer {
  min-width: 310px;
  max-width: 100%;
  margin: 0.75em auto;
}

#form-outer p {
  opacity: 1;
  font-size: 0.83em;
}

#contact-form {
  display: grid;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: repeat(5, auto);
  padding-top: 1.5em;
  margin: 0.75em 0 0 0;
  color: var(--bg-light-blue);
}
/*This is larger screen */
.box1,
.input-container {
  grid-row: 1;
  grid-column: 1 / span 2;
}
.box2 {
  grid-row: 1;
  grid-column: 3 / span 2;
}
.box3 {
  grid-row: 2;
  grid-column: 1 / span 4;
}
.box5 {
  grid-row: 5;
}
.input-container {
  border-radius: 5px;
  font-size: 1em;
  width: 100%;
  padding: .5em .5em;
  border: none;
  background: var(--bg-light-blue);
  opacity: .95;
}

/*honeypot*/
.nomohuney {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -1;
}

/* || Palindrome page */
.palindrome-tester {
  margin-top: 70px;
  margin-bottom: 70px;
  width: 100%;
}

.palindrome-tester h1 {
  text-align: left;
}

.palindrome-title {
  font-size: 3.5em;
  font-weight: bold;
  opacity: 0.77;
  letter-spacing: 0.5px;
}

.input-box {
  margin-top: 1em;
  border: none;
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
  font-size: 1.83em;
  height: 60px;
  width: 100%;
  padding: 1px 7px;
  background: var(--background-color);
}

.input-box:focus {
  outline: none;
  border-bottom: 2px solid rgba(0, 0, 0, 0.8);
}

.wrapper {
  margin-top: 1em;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-gap: 1em 1em;
}

button {
  cursor: pointer;
}

button:disabled {
  opacity: 50%;
  cursor: not-allowed;
}

.btn-check {
  font-size: 1em;
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none;
  background: var(--primary-blue);
  color: var(--bg-light-blue);
  border: none;
  transition: 0.3s all ease-in-out;
}

.btn-check:hover {
  color: white;
}

.btn-check:focus {
  opacity: 0.87;
  outline: none;
}

.btn-delete {
  font-size: 1em;
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none;
  background: black;
  color: var(--bg-light-blue);
  border: none;
  transition: 0.3s all ease-in-out;
}

.btn-delete:hover {
  color: white;
}

.btn-delete:focus {
  opacity: 0.87;
  outline: none;
}

#palindromeStatus {
  margin-top: 1em;
  text-align: center;
  padding: 1em;
}

/* || Animations */

@keyframes slow-move {
  0% {
    margin-left: 0px;
  }

  84% {
    margin-left: 0px;
  }

  85% {
    padding-left: 7px;
    margin-left: 30px;
  }

  100% {
    padding-left: 0px;
    margin-left: 0px;
  }
}

@keyframes color-swap {
  0% {
    color: var(--primary-teal);
  }

  100% {
    color: white;
  }
}

@keyframes hide-me {
  0% {
    opacity: 100%;
  }

  75% {
    opacity: 100%;
  }

  100% {
    opacity: 0%;
  }
}

@keyframes move-left {
  0% {
    transform: translate3d(0px, 0px, 0px);
    animation-timing-function: ease-in;
    opacity: 100%;
  }

  50% {
    transform: translate3d(-400px, 30px, 0px);
    animation-timing-function: ease-out;
    opacity: 0%;
  }

  100% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 0%;
  }
}

@keyframes move-left-short {
  0% {
    transform: translate3d(0px, 0px, 0px);
    animation-timing-function: ease-in;
    opacity: 100%;
  }

  50% {
    transform: translate3d(-400px, -40px, 0px);
    animation-timing-function: ease-out;
    opacity: 0%;
  }

  90% {
    transform: translate3d(0px, 0px, 0px);
  }

  100% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 0%;
  }
}

@keyframes move-left-up {
  0% {
    transform: translate3d(0px, 0px, 0px);
    animation-timing-function: ease-in;
    opacity: 100%;
  }

  80% {
    transform: translate3d(-500px, -80px, 0px);
    animation-timing-function: ease-out;
    opacity: 0%;
  }

  100% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 0%;
  }
}

/* || smaller screens */
/*OG: 854px*/
@media only screen and (max-width: 740px) {
  body {
    font-size: 16px;
  }

  h1 {
    font-size: 2.20em;
  }

  h2 {
    font-size: 2em;
  }
  .palindrome-title {
    font-size: 3em;
  }
  .hamburger-menu {
    display: inline-block;
    grid-column: 3;
    align-self: center;
  }

  #right-menu {
    display: none;
    grid-column: 1 / span 3;
    user-select: none;
  }

  #nav-toggle:checked~#right-menu {
    display: grid;
    grid-row-start: 2;
    grid-auto-flow: row;
    grid-template-columns: auto;
    margin-left: 15px;
    animation: slide-out 0.5s;
  }

  #right-menu a:nth-child(1) {
    animation: show-up 2s;
  }

  #right-menu a:nth-child(2) {
    animation: show-up-2 2s;
  }

  #right-menu a:nth-child(3) {
    animation: show-up-3 2s;
  }

  .profile-pic {
    grid-column: 1 / span 2;
    grid-row: 1;
  }

  .img-circle {
  width: 90%;
  }

  .about-info {
    margin-top: 15px;
    grid-column: 1 / span 2;
    grid-row: 2 / span 2;
  }

  .portfolio-area {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  .btn-check {
    grid-row: 1;
    grid-column: 1 / span 2;
  }

  .btn-delete {
    grid-row: 2;
    grid-column: 1 / span 2;
  }

  .input-box {
    margin-top: 1em;
    border: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.4);
    font-size: 1em;
    height: 40px;
    width: 100%;
    padding: 0px 7px;
    background: var(--background-color);
  }

  .modal-content {
    width: 100%;
  }
  /*This is for smaller screen*/
  .box1,
  .input-container {
    grid-column: 1/span 4;
    grid-row: 1;
  }

  .box2 {
    grid-column: 1/span 4;
    grid-row: 2;
  }

  .box3 {
    grid-column: 1 / span 4;
    grid-row: 3;
  }
  .btn-submit {
    width: auto;
    grid-row: 4;
    grid-column: 1;
  }
}

/*@media query end*/
@keyframes slide-out {
  0% {
    height: 0px;
  }

  100% {
    height: 118px;
  }
}

@keyframes show-up {
  0% {
    opacity: 0%;
  }

  100% {
    opacity 100%;
  }
}

@keyframes show-up-2 {
  0% {
    opacity: 0%;
  }

  5% {
    opacity: 0%;
  }

  100% {
    opacity 100%;
  }
}

@keyframes show-up-3 {
  0% {
    opacity: 0%;
  }

  10% {
    opacity: 0%;
  }

  100% {
    opacity 100%;
  }
}