/* 
CSS file Structure:

1: CSS VARIABLES
2: RESET - setting browser common baseline
3: HTML ELEMENTS - styling for HTML elements
4: UTILITY CLASSES - used only for setting padding-bottom.
5: NAVBAR (incl. navbar icons)
6: SECTION - common styling used in sections incl. 'heading', etc.
6.1: Home - styling specific to 'Home' section
6.2: Projects - styling specific to 'Projects' section
7: MODAL - styling for modal containing contact form
9: BUTTONS & LINKS - styling for CTA buttons & in-text links
*/


/* CSS VARIABLES */
:root {
  --grey-1: rgb(70, 70, 70);
  --grey-2: rgb(235, 235, 235);
  --grey-3: rgb(173, 173, 173);
  --grey-4: rgba(44, 44, 44, 0.95);
  --orange-1: rgb(218, 97, 28);

  --card-border: .05rem solid rgba(173, 173, 173, .3);
  --modal-border: .05rem solid var(--orange-1);
  --border-radius: .3rem;

  --transition-fast: .1s ease-in-out;
  --transition-slow: .23s ease-in-out;
}


/* RESET */
*,
*:before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: inherit;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 62.5%; /* 1rem = 10px conversion */
  font-weight: 300;
  line-height: 1.38;
  letter-spacing: .07rem;
  background-color: var(--grey-1);

  /* 'snap' scroll effect - start position set on .section (further down) */
  /* scroll-snap-type: y mandatory; */
}


/* HTML ELEMENTS */
h1,
h2 {
  font-weight: 300;
}

h1 {
  color: var(--orange-1);
  font-size: 2.75rem;
}

h2 {
  color: var(--grey-3);
  font-size: 1.6rem;
}

p {
  color: var(--grey-3);
  font-size: 1.15rem;
}

a,
a:link,
a:visited {
  text-decoration: none;
  outline: none;
}

label {
  font-weight: 400;
}

input,
textarea {
  display: block;
  color: var(--grey-2);
  font-size: 1.05rem;
  letter-spacing: .09rem;
  width: 100%;
  padding: .4rem .5rem;
  outline: none;
  background-color: inherit;
  border: none;
  border-bottom-color: var(--grey-3);
  border-bottom-width: .03rem;
  border-bottom-style: solid;
}

input::placeholder,
textarea::placeholder {
  color: var(--grey-3);
}

input {
  font-weight: 100;
  margin-bottom: 1rem;
}

textarea {
  font-family: inherit;
  height: 10rem;
  resize: none;
  margin-bottom: 2rem;
}


/* UTILITY CLASSES */
.pd-btm-xl { padding-bottom: 2.75rem; }
.pd-btm-l { padding-bottom: 2.25rem; }
.pd-btm-m { padding-bottom: 1.75rem; }
.pd-btm-s { padding-bottom: 1.25rem; }
.pd-btm-xs { padding-bottom: .5rem; }


/* NAVBAR (incl. navbar icons) */
.nav-bar {
  z-index: 1;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: .75rem 0 .5rem;
  background-color: var(--grey-1);
}

.nav-bar-container {
  height: 2.35rem; /* controls size of icons */
  display: flex;
}

.nav-links {
  flex: 2; /* from parent 'flex' container */
  display: flex;
}

.nav-btn-modal {
  flex: 1;
}

.icon {
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.nav-link-icon {
  fill: var(--grey-2);
  transition: fill var(--transition-fast);
}

.current,
.current:active,
.nav-btn-modal-icon {
  fill: var(--orange-1);
}


/* SECTION */
.section {
  min-height: 100vh;
  width: 100%;
  max-width: 773px;
  padding: 0 5vw;
  margin: 0 auto;

  /* scroll snap effect set on body */
  /* scroll-snap-align: start;  */
}

.section-start {
  height: 0;
  width: 25%;
  max-width: 300px;
  margin: 0 auto;
  border: .05rem solid var(--grey-3);
  opacity: .1;
}

/* Home */
.home {
  padding-top: 20vh; 
}

.changing-header {
  color: var(--grey-2);
}

/* Projects */
.projects,
.about {
  padding-top: 5vh;
}

.projects {
  padding-bottom: 8rem;
}

.card {
  position: relative;
  padding: 2rem .75rem 1.5rem;
  margin-bottom: 1.5rem;
  border: var(--card-border);
  border-radius: var(--border-radius);
}

.card h2 {
  color: var(--grey-2);
}

.tools {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--grey-2);
  padding: .4rem;
}

.card-links {
  display: flex;
  justify-content: space-around;
}


/* MODAL */
.contact-modal-state {
  display: none;
}

.contact-modal-state:checked + .modal {
  opacity: 1;
  visibility: visible;
}

.contact-modal-state:checked + .modal .modal-content-container {
  right: 0;
}

.modal {
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--grey-4);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all var(--transition-slow);
}

.modal-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.modal-content-container {
  position: relative;
  right: -25rem;
  width: 84%;
  max-width: 400px;
  padding: 3.5rem 1rem 2.5rem;
  background-color: var(--grey-1);
  border: var(--modal-border);
  border-radius: var(--border-radius);
  transition: all var(--transition-slow);
}

.modal-content-container h2 {
  color: var(--orange-1);
  font-weight: 400;
}

.btn-modal-close  {
  position: absolute;
  top: .75rem;
  right: .75rem;
  height: 1.25rem;
  width: 1.25rem;
}

.modal-close-icon {
  fill: var(--grey-2);
}


/* BUTTONS & LINKS */
.btn-cta-1 {
  cursor: pointer;
  color: var(--grey-1);
  font-size: 1.25rem;
  background-color: var(--orange-1);
  padding: .7rem 1.1rem;
  border: none;
  border-radius: var(--border-radius);
}

.btn-cta-1:active {
  color: var(--grey-2);
}

.in-text-link {
  color: var(--orange-1);
  padding-bottom: .25rem;
  border-bottom-width: .05rem;
  border-bottom-style: solid;
}