/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* Importing the 'Caveat' font from Google Fonts with weights 100, 300, and 700 */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html,
body {
  height: 100%;
} 


a {
  color: undefined;
}

body {
  font-family: 'Caveat', sans-serif;
  font-weight: 200;
  font-size: 18px; /*sets the font size to 22 pixels*/
  line-height: 1.1; /*sets the line height to 1.1 times the font size*/
  color: rgba(0, 43, 122, 0.7); /*sets the font color to blue*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /*uses flexbox layout for the body*/
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; /*stacks the body elements vertically*/
}

h1 {
  font-family: 'Caveat', sans-serif;
  font-weight: 700;
  font-size: 30px; /*sets the font size to 22 pixels*/
  line-height: .9; /*sets the line height to 1.1 times the font size*/
  color: rgba(3, 104, 53, 0.8); /*sets the font color to green*/
}

h2 {
  font-family: 'Caveat', sans-serif;
  font-weight: 100;
  font-size: 25px; /*sets the font size to 22 pixels*/
  line-height: .8; /*sets the line height to 1.1 times the font size*/
  color: rgba(63, 53, 123, 0.7); /*sets the font color to purple*/
}   

a {
    color: rgba(138, 126, 206, 0.7); /*sets the link color to a shade of purple*/
}

a:visited {
    color: rgba(27, 144, 152, 0.6); /*visited link is a dark shade of green*/
}    
 
a:hover {
    text-decoration: none; /*no underlining when hovering over a link*/
}

a:active {
    color: rgba(255, 105, 180, 0.3); /*active link is a shade of pink*/
}   

button {
  /* overwrites browser defaults and resets the border */
  border: none;
  /* takes the font from the outer container */
  font-family: inherit;
  /* styles the background color, font color, and text decoration (underline, etc.) of the button */
  background-color: rgba(3, 104, 53, 0.8); /*medium shade of green*/
  color: rgb(247, 243, 243);
  text-decoration: none;
  /*adds spacing to the button (this will be discussed more in-depth later) */
  padding: 10px;
  border-radius: 3px;
  /* gives the button a bottom border with a width of 2px, a type of solid, and a color in RGBA format */
  border-bottom: 2px solid rgba(43, 43, 43, 0.8);
}

button:hover, button:focus {
  /* lets the mouse appear as a hand when hovering over the button */
  cursor: pointer;
  /* reduces the opacity of the button to 80% */
  opacity: 0.4;
}

.button__secondary {
  background-color: rgb(234, 196, 125); /*light shade of orange*/
  color: rgba(43, 43, 43, 0.8); /*black*/
}

.navigation-list__item--active {
  text-decoration: none;
}




/*Exercise 1.6 - CSS Box Model and Flexbox*/

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /*sets the box-sizing property to border-box for all elements*/
}

.page-header {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex; /*uses flexbox layout for the header*/
 width: 100%; /*sets the width of the header to 100% of its container*/
 padding: 5px; /*adds 20 pixels of padding around the header*/
 margin: 5px 0; /*adds a margin of 10 pixels to the top and bottom of the header*/
 border: 2px solid rgba(0, 43, 122, 0.7); /*adds a border of 3 pixels with a blue color*/
 background-color: rgba(160, 223, 137, 0.6); /*sets the background color of the header to a*/
 position: sticky; /*makes the header stick to the top of the viewport when scrolling*/
 top: 0;
}

.page-header__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 100px;
          flex: 0 1 100px; /*sets the flex properties of the header items*/
}

.page-header__item:last-child {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; /*allows the last header item to grow and fill available space*/
  text-align: right; /*aligns the text of the last header item to the right*/
}

.heading {
 clear: both; /*clears any floating elements above the footer*/
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex; /*uses flexbox layout for the footer*/
 -webkit-box-orient: vertical;
 -webkit-box-direction: reverse;
     -ms-flex-direction: column-reverse;
         flex-direction: column-reverse; /*stacks the footer items vertically*/
 text-align: center; /*centers the text within the footer*/
}
.navigation-list {
  list-style-type: none; /*removes the default list styling*/
}

.navigation-list li {
display: inline-block; /*displays the list items inline*/
margin-left: 15px; /*adds a left margin of 15 pixels to each list item*/
}

.profile {
  max-width: 700px; /*sets the maximum width of the profile section to 700 pixels*/
  margin: 0 auto; /*centers the profile section horizontally*/
}

.profile__portrait {
  float: left;
  width: 250px; /*sets the width of the image to 250 pixels*/
  margin-right: 40px; /*adds a right margin of 40 pixels to the image*/
  border-radius: 50%; /*makes the image circular*/
}

.project-list{
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 25px 1fr 25px 1fr 25px 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;/*creates three columns, each 200 pixels wide*/
  /*grid-template-rows: 1fr 1fr;*/
  grid-gap: 25px; /*adds a gap of 25 pixels between the grid items*/
}

.project-list__item {
  background-color: rgb(234, 196, 125); /*sets the background color of the grid items to a light shade of orange*/
  padding: 5px; /*adds 20 pixels of padding around the header*/
  margin: 5px 0; /*adds a margin of 10 pixels to the top and bottom of the header*/
  border: 2px solid rgba(0, 43, 122, 0.7); /*adds a border of 3 pixels with a blue color*/
  -ms-flex-preferred-size: 100vw;
      flex-basis: 100vw;  
  -ms-flex-negative: 1;  
      flex-shrink: 1; 
}

.page-footer {
 clear: both;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex; /*uses flexbox layout for the header*/
 width: 100%; /*sets the width of the header to 100% of its container*/
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center; /*centers the footer items horizontally*/
 justify-items: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center; /*centers the footer items vertically*/
 text-align: center; /*centers the text within the footer*/
 width: 100%; /*sets the width of the footer to 100% of its container*/
 margin-top: auto;
 position: bottom 0;
}


/* Exercise 1.7 - Advanced Topics in CSS */
@media all and (max-width: 750px) {
  .project-list {
    -ms-grid-columns: 1fr 10px 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
  }
  .project-list__item:last-child {
    grid-column: auto / auto;
    grid-row: auto / auto;
  }
  h1 {
    font-size: 20px;
  }
}


.button {
  /* overwrites browser defaults and resets the border */
  border: none;
  display: inline-block;
  /* takes the font from the outer container */
  font-family: inherit;
  /* styles the button */
  background-color: rgba(27, 144, 152, 0.6);
  color: rgb(247, 243, 243);
  text-decoration: none;
  padding: 8px;
  border-radius: 3px;
  /* width of the border, type, color */
  border-bottom: 2px solid rgba(43, 43, 43, 0.8);
  -webkit-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
  -webkit-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}


button {
  /* overwrites browser defaults and resets the border */
  border: none;
  display: inline-block;
  /* takes the font from the outer container */
  font-family: inherit;
  /* styles the button */
  background-color: rgba(27, 144, 152, 0.6);
  color: rgb(247, 243, 243);
  text-decoration: none;
  padding: 8px;
  border-radius: 3px;
  /* width of the border, type, color */
  border-bottom: 2px solid rgba(43, 43, 43, 0.8);
  -webkit-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
  -webkit-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}

button:hover,
button:focus,
.button:hover,
.button:focus {
  /* lets the mouse appear as a hand when hovering over the button */
  cursor: pointer;
  /* reduces the opacity of the button to 20% */
  opacity: 0.2;
}

.navigation-list__item {
  /* overwrites browser defaults and resets the border */
  border: none;
  display: inline-block;
  /* takes the font from the outer container */
  font-family: inherit;
  /* styles the button */
  background-color: none;
  color: rgb(247, 243, 243);
  text-decoration: none;
  padding: 8px;
  border-radius: 3px;
  /* width of the border, type, color */
  border-bottom: 2px solid rgba(43, 43, 43, 0.8);
  -webkit-transition-duration: 0.9s;
       -o-transition-duration: 0.9s;
          transition-duration: 0.9s;
  -webkit-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}

button {
  /* overwrites browser defaults and resets the border */
  border: none;
  display: inline-block;
  /* takes the font from the outer container */
  font-family: inherit;
  /* styles the button */
  background-color: none;
  color: rgb(247, 243, 243);
  text-decoration: none;
  padding: 8px;
  border-radius: 3px;
  /* width of the border, type, color */
  border-bottom: 2px solid rgba(43, 43, 43, 0.8);
  -webkit-transition-duration: 0.9s;
       -o-transition-duration: 0.9s;
          transition-duration: 0.9s;
  -webkit-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}

button:hover,
button:focus,
.navigation-list__item:hover,
.navigation-list__item:focus {
  /* lets the mouse appear as a hand when hovering over the button */
  cursor: pointer;
  /* reduces the opacity of the button to 20% */
  opacity: 0.2;
}


/* Animations for the SVG on the About page */
@-webkit-keyframes color-change {
  0% {
    fill: rgb(234, 196, 125);
  }
  75% {
    fill: rgba(27, 144, 152, 0.6);
  }
}
@keyframes color-change {
  0% {
    fill: rgb(234, 196, 125);
  }
  75% {
    fill: rgba(27, 144, 152, 0.6);
  }
}

.sun {
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
  -webkit-animation-name: color-change;
          animation-name: color-change;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes cloud-move {
  from {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  to {
    -webkit-transform: translate(500px, 50px);
            transform: translate(500px, 50px);
  }
}

@keyframes cloud-move {
  from {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  to {
    -webkit-transform: translate(500px, 50px);
            transform: translate(500px, 50px);
  }
}

.cloud-front {
  -webkit-animation-duration: 45s;
          animation-duration: 45s;
  -webkit-animation-name: cloud-move;
          animation-name: cloud-move;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes cloud-move-reverse {
  from {
    -webkit-transform: translate(446px, 48px);
            transform: translate(446px, 48px);
  }
  to {
    -webkit-transform: translate(100px, 48px);
            transform: translate(100px, 48px);
  }
}

@keyframes cloud-move-reverse {
  from {
    -webkit-transform: translate(446px, 48px);
            transform: translate(446px, 48px);
  }
  to {
    -webkit-transform: translate(100px, 48px);
            transform: translate(100px, 48px);
  }
}

.cloud-back {
  -webkit-animation: 20s cloud-move-reverse infinite alternate linear;
          animation: 20s cloud-move-reverse infinite alternate linear;
}