/*
Colors used

Text Color (Dark Gray): #2b2b2b;
Primary Color (Purple): #53e3d4;
Secondary Color (Orange): #e0b354;
 */

 * {
  box-sizing: border-box;
}

body {
  background-color: #caebf2;
  color: --dark-grey;
  font-family: 'Roboto', sans-serif;
  font-weight: 400px;
  font-size: 18px;
/* Sets the font size to 16px */
line-height: 1.6;
/* Sets the line-height to 1.6 */
}

h1 {
  font-size: 30px;
  font-weight: 700;
}

h2 {
  font-size: 24px;
  font-weight: 700;
}

h3 {
  font-size: 18px;
  font-weight: 700;
}

a {
  color: #357b70;
}

a:hover, a:focus {
  /* No underlining when hovering over a link */
  text-decoration: none;
}

a:visited {
  /* visited link */
  color: #05676e;
}

a:active {
  /* selected link */
  color: #489c79;
}

button,.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 background color, font color, and text decoration (underline, etc.) of the button */
  background-color: #000;
  color: #fff;
  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: 3px solid rgba(244, 185, 0.4);
  transition: opacity 0.2s;
}

button:hover, button:focus, .contact-button:hover, .contact-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 80% */
  opacity: 0.8;
}

.button__secondary {
  background-color: #be899a;
  color: black;
}

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

.contact-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: black;
  color: #ffffff;
  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(244, 185, 0.4);
  margin-left: 40px;
  transition: opacity 0.2s;
}
.data_label {
  padding-left: 20px;
} 

.profile {
  max-width: 700px;
  margin: 100px auto;
  
}

.profile_portrait {
  float: left;
  width: 25%;
  height: auto;
  margin-right: 20px;
  border-radius: 50%;
}

.profile_portrait_about {
  float: left;
  width: 25%;
  height: auto;
  margin-right: 20px;
}

.profile_logo {
  width: 50%;
  height: auto;
}

.page-footer {
  clear: both;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.page-header {
  display: flex;
  width: 100%;
  padding: 20px;
  background-color: #f4b967;
}

.page-header_item {
  flex: 0 1 200px;
}

.page-header_item:last-child {
  flex-grow: 1;
  text-align: right;
}

.navigation_list {
  list-style-type: none;
}

.navigation_list li {
  display: inline-block;
  margin-left: 15px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-right: 20px;
}

.grid_item {
  padding: 25px;
  border: 5px solid #63bdb1;
  background-color: #fffefe;
}

.work_title {
  padding-left: 5px;
}

.contact_section {
padding-left: 20px;
}

main {
padding-left: 20px;
padding-right: 20px;
}

table {
margin-top: 20px;
}

.td_space {
padding-left: 20px;
text-align: center;
}

.td_heading {
font-weight: bold;
}

@media all and (max-width: 500px) {
.grid {
  grid-template-columns: 1fr;
}
}

@media all and (min-width: 500px) and (max-width: 750px) {
.grid {
  grid-template-columns: 1fr 1fr;
}
}

@media all and (max-width: 750px) {
    .grid {
      gap: 10px;
}
.grid_item:last-child {
  grid-column: auto/auto;
  grid-row: auto/auto;
}
h1 {
  font-size: 22px;
}
}

@keyframes color-change {
0% {
  fill: edc655;
}
50% {
  fill: #fcffad;
}
100% {
  fill: #f76414;
}
}

.sun {
animation-duration: 4s;
animation-name: color-change;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
@keyframes cloud-move {
from {
  transform: translate(0, 50px);
}
to {
  transform: translate(200px, 50px);
}
}

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

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

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

.contact_form {
text-align: center;
}

.contact_form_box {
width: 200px;
margin: auto;
}

.contact_me_title {
font-size: large;
width: 100%;
text-align: center;
}