/*-----Adam Demol 2022-----*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&');

:root {
  line-height: 1.4;
  font-size: 16px;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  --colour1: #fcfcfc;
  --colour2: #ee4583;
  --colour3: #252525;
  --colour4: #dd608d;
  --colour5: #161616;
  --colour6: #101010;
  --nav-offset: 260px;
}

/* remove default styles from everything */
* { margin: 0px; padding: 0px; border: 0px; box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  position: relative;
  color: var(--colour1);
  background: var(--colour5);
  overflow-x: hidden;
  min-height: 100vh;
}

a {  
  color: var(--colour1);
  text-decoration: none;
}

h1 { font-size: 2.4rem;}
h2 { font-size: 1.7rem; }
h3 { font-size: 1.2rem; }

section {
  display: grid;
  justify-content: center;
  padding: 5rem 3rem;
  margin-left: var(--nav-offset);
}

header {
  display: grid;
  justify-content: center;
  padding: 8rem 3rem;
  min-height: 35vh;
  margin-left: var(--nav-offset);
}

.headline {
  display: grid;
  gap: .7rem;
}

.animation-container {
  overflow: hidden;
}

.heading {
  font-size: 4rem;
  line-height: 4rem;
  animation: slideup 1s 1 normal both;
}
.heading2 {
  animation: slidedown 1s .3s 1 normal both;
  padding-bottom: 1rem;
}
@keyframes slideup {
  from  { transform: translateY(100px); }
  to    { transform: translateY(0); }
}
@keyframes slidedown {
  from  { transform: translateY(-100px); }
  to    { transform: translateY(0); }
}

.header-text {
  color: #ddd;
}

.nav-hero {
  font-size: 1.4rem;
  font-weight: bold;
  padding: 1rem 3rem .3rem 1rem;
}

.nav-header {
  padding: 1rem 3rem .3rem 1rem;
  color: #ccc;
}

hr {
  height: 1px;
  width: 100%;
  background-color: #413c3e;
  margin-block: .4rem;
}

nav {
  position: fixed;
  height: 100%;
  width: var(--nav-offset);
  background: var(--colour3);
  padding: 1.2rem;
  box-shadow: 2px 0 12px 0 #111;
  border-bottom: 1px solid #333;
}

nav ul {
  display: grid;
  height: fit-content;
  color: var(--colour1);
  list-style: none;
}

nav ul li {
  display: flex;
}

nav ul li a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 3rem 1rem 1rem;
  border-radius: 5px;
  font-size: .9rem;
  width: 100%;
  transition: all 100ms ease-in-out;
}

nav ul li a:hover {
  background: var(--colour5);
  color: var(--colour4);
}

.cta {
  width: fit-content;
  padding: .7rem 1rem;
  color: var(--colour1);
  background: var(--colour2);
  border: .3rem solid var(--colour2);
  border-radius: 5px;
  transition: 200ms ease-in-out;
  text-decoration: none;
  display: block;
  box-shadow: 0px 5px #882348, 0px 7px 10px #000;
  margin-top: 1.4rem;
}

.cta:hover {
  box-shadow: unset;
  transform: translateY(4px);
}

.projects h1 {
  text-align: center;
  margin-bottom: 3rem;
}

.projects-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, 600px);
  justify-content: center;
  gap: 3rem;
  max-width: 1500px;
  min-width: 300px;
  width: 100%;
}

.project-card {
  font-size: .9rem;
  display: grid;
  gap: 1.5rem;
  padding: 3rem;
  background: var(--colour3);
  position: relative;
  transition: all 150ms ease-in-out;
  border-radius: 10px;
  box-shadow: 0 6px 12px 0 #111;
  border-bottom: 4px solid var(--colour4);
}
.project-card:hover {
  box-shadow: 0 6px 20px 0 #000;
  border-bottom: 4px solid var(--colour2);
}

.tech-used {
  display: block;
  padding-bottom: .5rem;
  color: #ccc;
}

.project-btns {
  display: flex;
  gap: 1rem;
}

.project-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  background: #111;
  padding: .5rem .9rem;
  transition: all 150ms ease-in-out;
}

.project-btn:hover, .project-btn:hover > svg {
  background: var(--colour4);
}

.project-btns svg {
  width: 30px;
  fill: var(--colour1);
  transition: all 150ms ease-in-out;
}

/*---- Skills section ----*/
.dark-section {
  margin-left: unset;
  background: var(--colour6);
  border-bottom: 1px solid #333;
  border-top: 1px solid #333;
  box-shadow: inset 0 0 20px 10px #101010;
  padding: 5rem 3rem 5rem calc(3rem + 300px);
}

.dark-section h1 {
  text-align: center;
}

.skills-list {
  padding-block: 2rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  gap: 1.2rem;
  justify-content: center;
  list-style: none;
  max-width: 900px;
  min-width: 300px;
  width: 100%;
}

.skills-list li {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .7rem;
}

.react-logo:hover {
  animation: rotate 2s infinite both ease-in-out;
}

@keyframes rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.btt-btn {
  width: 46px;
  height: 46px;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  bottom: 10px;
  right: 10px;
  border-radius: 50%;
  background: var(--colour1);
}

.btt-btn:hover > svg {
  fill: var(--colour4);
}

.btt-btn svg {
  height: 40px;
  width: 40px;
}

.about-content {
  padding-top: 2rem;
  display: grid;
  gap: 2rem;
  max-width: 1000px;
  min-width: 260px;
  width: 100%;
}

.mobile-dropdown-toggle {
  display: none;
}

.show {
  pointer-events: all;
  transform: translateX(0px);
}

@media screen and (max-width: 950px) {
  .projects-wrap {
    grid-template-columns: repeat(auto-fill, 400px);
    gap: 3rem;
  }

  .project-card {
    gap: 1rem;
    padding: 2rem;
  }
}

/* Screens under 600px styles */
@media screen and (max-width: 700px) {
  h1 {
    font-size: 2.5rem;
  }

  .nav-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
  }

  .mobile-dropdown-toggle {
    display: flex;
    background: unset;
    color: var(--colour1);
  }

  .navbar {
    z-index: 9;
    position: absolute;
    background: var(--colour3);
    inset: 0;
    top: 70px;
    height: calc(100dvh - 70px);
    display: flex;
    flex-direction: column;
  }

  nav {
    z-index: 999;
    width: 100%;
    height: 70px;
  }

  nav ul {
    transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
    transform: translateX(-100dvw);
    pointer-events: none;
  }

  header {
    min-height: 100dvh;
    margin-left: unset;
    padding: 4rem 2rem 4rem 2rem;
    align-items: center;
  }

  .headline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .heading {
    font-size: 3rem;
  }

  section {
    scroll-margin-top: 70px; 
    margin-left: unset;
    padding: 3rem 2rem;
  }

  .dark-section {
    padding: 3rem 2rem;
  }

  .projects {
    padding: 3rem;
  }

  .projects-wrap {
    grid-template-columns: repeat(auto-fill, 300px);
    gap: 3rem;
  }
  
  .project-card {
    font-size: .8rem;
    gap: 1rem;
    padding: 2rem;
  }

  .project-card h2 {
    font-size: 1.3rem;
  }
}