/* globals + background + fonts
background #e6e8ea
background platinum #E5E5E5
medium #969797
dark #474647
enigma grey #98a3ab
------------------------------------------------------------
*/

* {
  box-sizing: border-box;
}

body {
  background-color: #e6e8ea;
  overflow-x: hidden;
}

h1 {
  margin-top: 1.5rem;
  color: #474647;
  font-family: 'NeueMontreal';
  font-style: normal;
  font-weight: normal;
  font-size: 1.1rem;
}

p {
  word-wrap: break-word;
  margin-left: 0rem;
  font-size: 1.1rem;
  width: 50%;
  color: #474647;
  font-family: 'NeueMontreal';
  font-style: 'normal';
}

/* controls left margin throughout the design */
div {
  margin-left: 1.5rem;
}

a.link {
  color: #474647;
  font-family: "NeueMontreal";
  font-size: 1.1rem;
}

a:link {
  text-decoration: underline;
}

a:hover {
  color: #969797;
}

@font-face {
  font-family: 'NeueMontreal';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/NeueMontreal-Regular.woff2') format('woff2');
}

::-webkit-scrollbar {
	width: 12px;
	background-color: #e6e8ea;
}

::-webkit-scrollbar-thumb {
	background-color: #474647;
}

@media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/*changes main margin on small devices */
@media only screen and (max-width: 960px) {
    div {
    margin: 1rem;
  }
}

/*
ABOUT page
------------------------------------------------------------ */

div.about {
  margin-top: 1rem;
  margin-bottom: 3rem;
}

img.about {
  max-width: 100px;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  object-fit: cover;
}

@media only screen and (max-width: 960px) {
    p.about {
    word-wrap: break-word;
    width: 100%;
  }
}

/* HEADER
------------------------------------------------------------*/
header {
  margin-bottom: 1rem;
}

img.header-image {
  margin-left: 0rem;
  width: 300px;
}

@media only screen and (max-width: 960px) {
    img.header-image {
      margin-left: 0rem;
      width: 220px;
  }
}

/* FOOTER
------------------------------------------------------------*/
div.back-to-top {
  margin-top: 1rem;
}

footer {
  padding-top: 1rem;
}

/* INDEX page images
------------------------------------------------------------*/

img.index {
  max-width: 50%;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  object-fit: cover;
}

@media only screen and (max-width: 960px) {
    img.index {
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
      max-width: 100%;
  }
}

img.index {
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 0px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

img.index:hover, img.index:focus, img.index:active {
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
}

div.index {
  width: inherit;
  height: inherit;
  display: flex;
  align-items: left;
  justify-content: left;
  flex-direction: column;
}


/* PROJECT page
------------------------------------------------------------ */

img.project {
  width: 50%;
  margin-top: 1rem;
  margin-bottom: 1rem;
  object-fit: cover;
}

@media only screen and (max-width: 960px) {
    img.project {
    width: 100%;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }
    p.project, p.footer {
    word-wrap: break-word;
    width: 100%;
  }
}