/*********************
* Table of contents:
*
* Base styles ("raw elements")
*   Root
*   Typography
*   links
*   images
* Main section
* header
*   Logo
*   Menu
* footer
* About us banner
* Reviews
* Image gallery
* Columns
 /*********************/

 /* Colors
 #C4C5C9 (light)
 #BAB9BE (inner gallery)
 #C4C5C9 (outer gallery)
 #84858A (dark - from 2nd to bottom)
 #262932 (almost darkest - from footer)
 #272A33 (white on black text)
 #272A33 (very darkest - from image)
 /***************
 * base styles
 ****************/
/***************
* root styles */
html {
  -webkit-locale: en;
  direction: ltr;
  unicode-bidi: isolate;
}

html {
  font-size: 100%;
  display: block;
  /*color: text;*/
}

body {
  margin: 0 auto;
  padding: 0;
  font-family: "Roboto", helvetica, arial, sans-serif;
  line-height: 1.5;
  color: #262932;
  background-color: black;
  max-width: 800px;
  border-bottom: 10px solid #262932;
}

body {
  display: block;
}

/* delete afterwards!!!! */
/*{
  border: 1px red solid;
} -->/

/* Typography */
h1,
h2 {
  font-family: "Roboto", cursive;
  margin: 0 0 1em 0;
}
h1 {
  font-size: 3rem;
  text-align: center;
}
h2 {
  font-family: "Roboto", cursive;
  font-size: 1.5rem;
  margin: 0 0 0;
  color: #262932;
}

.albums h2 {
  color: #fffcf9;
}

a {
   font-weight: bold;
   text-decoration: underline;
   color: #272A33;
}

 a:hover,
 a:focus {
   color: #00ffff;
 }

 p {
    display: block;
    /*margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 5%;
    margin-inline-end: 5%;*/
}

 img {
   width: 100%;
   display: block;
 }

 /***************
 * global styling
 ****************/

 header
 main
 footer
 .gallery
 .getintouch {
   padding: 3rem;
   margin-bottom: 3rem;
 }

 /***************
 * main section
 ****************/
 main {
   background-color: #C4C5C9;
   border-top: 30px solid #C4C5C9;
   border-bottom: 30px solid #C4C5C9;
   border-right: 30px solid #C4C5C9;
   border-left: 30px solid #C4C5C9;
   color: #fffcf9;
 }

 /***************
 * header change background color
 ****************/

header {
   background-image: url(images/main-stage-1.jpg);
   background-size: cover;
   background-position: center;
   max-width: 800px;
   display: flex;
   justify-content: space-between;
   flex-direction: column;
 }

 .contactnassus header {
   background-image: url(images/fans-2.jpg);
 }

 .contactnassus h2 {
   color: #fffcf9;
 }

.albumsheader header {
   background-image: url(images/kyle-glenn-SrASYZZpyjw-unsplash.jpg);
 }

 .albums header {
   background-image: url(images/kyle-glenn-SrASYZZpyjw-unsplash.jpg);
 }

 header h1 {
   margin-bottom: 3.5em;
   margin-top: 2.5em;
   color: #fffcf9;
 }

 .albums header h1 {
   margin-bottom: 2.5em;
   margin-top: 2.5em;
   color: #fffcf9;
 }

header p {
  color: #262932;
  font-weight: bold;
  padding-left: 30px;
  padding-right: 30px;
}

.home header p {
  font-size: smaller;
}

 /* main image***/
main {
   flex: 0 1 80px;
   min-width: 40px;
 }

.albums main {
    flex: 1 0 auto;
 }

.albums main {
   display: block;
 }

 a[href^="mailto"]:hover:after { content: " > " attr(title); }

 /* main content styles from style2.css */

 .flex-container {
   display: flex;
   flex-wrap: wrap;
   margin-top: 10px;
 }

 .flex-child.image {
   min-width: 200px;
 }

 .flex-child.text {
   min-width: 150px;
 }

 .flex-container ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   font-size: small;
 }

 .flex-child {
   flex: 1;
   border: 2px;
   font-size: small;
 }

 .flex-child:first-child {
   margin-right: 20px;
 }

 .flex-child h3 {
   color: #fffcf9;
   margin-top: 0px;
   margin-bottom: 5px;
 }

 .flex-child h5 {
   margin-top: 0px;
   margin-bottom: 5px;
   color: #262932;
 }

 .flex-child p {
   margin: 0px;
   color: #262932;
   font-size: smaller;
   padding-bottom: 2px;
   margin-bottom: -3px;
 }

 .flex-child-icons {
   border: 2px;
   margin-right: 10px;
   color: black;
 }

 .flex-child-icons i {
   background-color: orange;
   max-height: 8px;
 }

 /*******
 menu ***/
 .menu {
   /* flex: 0 1 auto; */
   width: 100%;
 }

 .menu ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   font-size: small;
}

 .menu li {
   margin-top: 0rem;
   margin-left: 1.5rem;
 }
/** insert opacity**/
 .menu a {
   color: #fffcf9;
   background-color: transparent;
   text-decoration: none;
   display: block;
   width: 100%;
   text-align: center;
   border-radius: 0.5em;
   padding: 0.5em 1em;
   box-sizing: border-box;
 }

 .menu a:hover,
 .menu a:focus {
   color: #00ffff;
   background-color: transparent;
 }

 .introduction {
   background-color: rgba(186,185,190,0.5);
   margin-top: 2.5em;
 }

 /***************
 * footer
 ****************/

 footer {
   background-color: #272A33;
   color: #fffcf9;
   justify-content: center;
 }

 footer p {
   text-align: center;
   font-size: small;
   margin-top: 0;
 }

 footer p {
   padding-top: 20px;
   padding-bottom: 5px;
 }

 /***************
 * getintouch
 ****************/
 .getintouch {
   background-color: #85868B;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   padding-bottom: 20px;
}

.home .getintouch {
  padding-top: 20px;
}

.contactnassus .getintouch {
  padding-top: 20px;
}

.getintouch p {
  margin-top: 5px;
  margin-bottom: 5px;
  padding-right: 60px;
  padding-left: 60px;
}

.home .getintouch p {
  font-size: smaller;
}

.contactnassus .getintouch p {
  font-size: smaller;
}

.galleryimage {
  margin: 0 0 0;
}

.albums .galleryimage {
  margin: 10px;
  margin-left: 33px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  max-width: 130px;
  max-height: 130px;
  min-width: 130px;
  min-height: 130px;
}

.albums .gallery h2 {
  padding-left: 36px;
  padding-top: 3%;
  color: #fffcf9;
}

.home .gallery h2 {
  padding-bottom: 15px;
}

.contact p {
  margin-top: 0px;
  /*margin-inline-start: 10%;
  margin-inline-end: 10%;*/
  margin-left: 10px;
  margin-right: 10px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 70%;
  text-decoration-color: white;
}

.home .contact p {
  font-size: 70%;
}

.contactnassus .contact p {
  font-size: 70%;
}

.albums .contact p {
  font-size: small;
}


.aside a:hover, .menu a:focus {
  color: #00ffff;
  background-color: transparent;
}

.aside a {
  color: #fffcf9;
}


 /***************
 * image gallery
 ****************/

 .home .gallery {
   background-color: #C4C5C9;
   color: #fffcf9;
   margin-bottom: 0;
   margin-top: 0;
   padding: 0;
 }

 .albums .gallery {
   background-color: #85868B;
   color: #fffcf9;
   margin-bottom: 0;
   margin-top: 0;
   padding: 0;
   padding-bottom: 30px;
 }

 .gallery h3 {
   /*margin-inline-start: 5%;
   margin-inline-end: 5%;*/
   color: #262932;
 }

 .home .gallery h3 {
   font-size: smaller;
 }

.gallerycontainer {
  background-color: #272A33;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* under .gallerycontainer may need to separate this to be specific to home and conntactnassus pages
padding-top: 4px;
padding-bottom: 4px; */

 .gallery h4 {
   /*margin-inline-start: 5%;
   margin-inline-end: 5%;*/
   margin-top: 0;
   margin-bottom: 0;
   background-color: #272A33;
   font-size: smaller;
 }

 .home .gallery ul {
   list-style-type: none;
   padding: 0;
   margin-top: 0;
   margin-bottom: 0;
   margin-left: 0rem;
   margin-right: 0rem;
   display: flex;
   flex-wrap: wrap;
 }

 .albums .gallery ul {
   list-style-type: none;
   padding: 0;
   margin-top: 0;
   margin-bottom: 0;
   display: flex;
   flex-wrap: wrap;
   text-align: center;
 }

 .home .gallery li {
   flex: 1 0 150px;
   background-color: #BAB9BE;
   padding: 10px;
 }

 .albums .gallery li {
   flex: 1 0 150px;
   background-color: #85868B;
 }

 .gallery p {
   font-size: smaller;
   text-decoration-color: #272A33;
   color: #262932;
 }

 footer ul {
     list-style: none;
     padding: 0;
 }

 footer ul li {
     display: inline-block;
     margin: 0 4px;
 }

 .icons-container {
   align-self: flex-end;
   flex: auto;
   text-align: left;
   margin: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin-top: -15px;
   margin-bottom: -15px;
 }

 nav {
   align-self: flex-end;
   flex: auto;
   justify-content: center;
}

 /* Style all font awesome icons */
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  color: white;
}

/* Twitter */
.fa-twitter {
  color: white;
}

/* Linkedin */
.fa-linkedin {
  color: white;
}

/* Google */
.fa-google {
  color: white;
}