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

/*
Colors used

Text Color (Black): #000;
Primary Color (Teal): #1b4a56;
Secondary Color (Purple): #561b4a;
Tertiary Color (Dark Green): #4a561b;
 */

 /* Root Stylings */
 
 /* Universal Stylings */
 * {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

/* Body and Default Stylings */

body {
   font-family: 'Lato', sans-serif;
   font-weight: 400;
   font-size: 16px;
   line-height: 1.2;
   background-color: lightgray;
}

/* Heading Stylings */

h1 {
    font-family: 'Wire One', sans-serif;
    color: #1b4a56;
    font-size: 36px;
    line-height: 2;
}

h2 {
    font-size: 24px;
    color: #1b4a56;
    font-weight: 700;
    line-height: 1.6;
}

h3 {
    font-size: 18px;
    color: #1b4a56;
    font-weight: 700;
    line-height: 1.6;
}

 /* Link Stylings */

a {
    color: #561b4a;
    -webkit-transition: font-weight 0.4s;
    -o-transition: font-weight 0.4s;
    transition: font-weight 0.4s;
}

a:visited {
   /* visited link */
   color: #4a561b;
}

a:hover {
   font-weight: 700;
}

a:focus {
   font-weight: 700;
}

a:active {
   /* selected link */
   color: #1b4a56;
}

 /* Button Stylings */

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: #1b4a56;
   color: white;
   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(0, 0, 0, 0.3);
   -webkit-transition: 0.2s opacity;
   -o-transition: 0.2s opacity;
   transition: 0.2s opacity;
}

.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: #1b4a56;
   color: white;
   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(0, 0, 0, 0.3);
   -webkit-transition: 0.2s opacity;
   -o-transition: 0.2s opacity;
   transition: 0.2s opacity;
}

button:focus, button:hover, .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: #561b4a;
    color: white;
}

.standard-button {
    background-color: #561b4a;
    color: white;
}

.home-buttons {
    clear: both;
    text-align: center;
}

/* Navigation Stylings */

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

/* Profile Stylings */
.profile {
   max-width: 700px;
   margin: 0 auto;
}

.profile__portrait {
    float: left;
    width: 250px;
    margin-right: 40px;
    border-radius: 50%;
}
/* Header Stylings */
.page-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    padding: 20px;
}

.page-header__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 200px;
            flex: 0 1 200px;
}

.page-header__item:last-child {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    text-align: right;
}

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

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

/* About & Contact Page Stylings */
.about-info {
    text-align: center;
}

.about-info__list {
    list-style-type: none;
}

.about-table, .contact-page {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Footer Stylings */

.page-footer {
    clear: both;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center;
}

/* Grid Stylings */
.grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr auto 1fr auto 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
}

.grid__item {
    background-color: gray;
    padding: 5px;
}

.grid1 {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    padding: 20px;
}

.grid2 {
   -ms-grid-row: 1;
   -ms-grid-column: 2;
   padding: 20px;
}

.grid3 {
   -ms-grid-row: 1;
   -ms-grid-column: 3;
   padding: 20px;
}

.grid4 {
   -ms-grid-row: 2;
   -ms-grid-column: 1;
   padding: 20px;
}

.grid5 {
   -ms-grid-row: 2;
   -ms-grid-column: 2;
   padding: 20px;
}

.grid6 {
   -ms-grid-row: 2;
   -ms-grid-column: 3;
   padding: 20px;
}

/* Page Title Stylings */

.page-title {
    text-align: center;
}

/* SVG Animations */
@-webkit-keyframes color-change {
   0% {
       fill: #fab939;
     }
     50% {
       fill: #f9992b;
     }
     100% {
       fill: #f76414;
     }
 }
@keyframes color-change {
   0% {
       fill: #fab939;
     }
     50% {
       fill: #f9992b;
     }
     100% {
       fill: #f76414;
     }
 }

 @-webkit-keyframes boat-float {
     from {
         -webkit-transform: translate(0, 0);
                 transform: translate(0, 0);
     }
     to {
         -webkit-transform: translate(400px, 0);
                 transform: translate(400px, 0);
     }
 }

 @keyframes boat-float {
     from {
         -webkit-transform: translate(0, 0);
                 transform: translate(0, 0);
     }
     to {
         -webkit-transform: translate(400px, 0);
                 transform: translate(400px, 0);
     }
 }

 .sun {
   -webkit-animation: color-change 8s linear infinite alternate;
           animation: color-change 8s linear infinite alternate;
 }

 .boat {
     -webkit-animation: boat-float 12s linear infinite alternate;
             animation: boat-float 12s linear infinite alternate;
 }

/* Media Queries */
@media all and (max-width: 500px) {
   .grid {
     -ms-grid-columns: 1fr;
     grid-template-columns: 1fr;
     grid-gap: 10px;
   }
  
 }

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

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