/* Fonts from Google Fonts - more at https://fonts.google.com */
/*@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');*/
@import url("https://fonts.googleapis.com/css?family=Amatic+SC|Open+Sans");

:root {
  /* change the values below to your colors from your palette */
  --primary-color: #9D82B0;
  --secondary-color: #E3B5CC;
  --accent1-color: #99FFEE90;
  --accent2-color: #0E1116;

  /* change the values below to your chosen font(s) */
  --heading-font: "Amatic SC";
  --paragraph-font: "Open Sans";

  /* these colors below should be chosen from among your palette colors above */
  --headline-color-on-white: black; /* headlines on a white background */
  --headline-color-on-color: white; /* headlines on a colored background */
  --paragraph-color-on-white: black; /* paragraph text on a white background */
  --paragraph-color-on-color: white; /* paragraph text on a colored background */
  --paragraph-background-color: #9D82B0;
  --nav-link-color: #604771;
  --nav-background-color: #E3B5CC;
  --nav-hover-link-color: #E3B5CC;
  --nav-hover-background-color: #604771;
  
  --title-background-color: #E3B5CC;
}

.body {
  background-color: white;
}

#content {
  max-width: 1250px;
  margin: 0 auto;
}

img {
  max-width: 100%;
}

h1 {
  font-family: "Amatic SC", serif;
  font-size: 32px;
}

h2,
h3 {
  font-family: "Amatic SC", serif;
}

p {
  font-family: "Open Sans", sans-serif;
}

.homepage-div-a {
  background-color: white;
}

.homepage-div-b {
  background-color: var(--primary-color);
}

/* nav */

header {
  display: grid;
  grid-template-columns: 200px auto;
  align-items: center;
}

.topnavbox {
  background-color: var(--primary-color);
}

nav {
  background-color: var(--nav-background-color);
  line-height: 2em;
  text-align: center;
  font-family: var(--heading-font);
  font-size: 1.5em;
  font-weight: bold;
}
nav > ul {
  list-style-type: none;
  display: flex;
}
nav a {
  padding: 0.4em 3em;
  min-width: 70;
}
nav a:link,
nav a:visited {
  color: var(--nav-link-color);
}
nav a:hover {
  color: var(--nav-hover-link-color);
  background-color: var(--nav-hover-background-color);
}

/* Style The Dropdown Button */
.nav-dropbtn {
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.nav-dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.nav-dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.nav-dropdown-content a {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.nav-dropdown-content a:hover {background-color: var(--nav-hover-background-color)}

/* Show the dropdown menu on hover */
.nav-dropdown:hover .nav-dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.nav-dropdown:hover .nav-dropbtn {
  background-color: #3e8e41;
}

/*footer */

.footer {
  background-color: var(--secondary-color);
  border: .5px solid var(--accent2-color);
  text-align: center;
  padding: 1em;
}

/* Carousel */

.carousel {
  max-width: 600px;
}

.carousel-space {
  padding: 3em 0;
}

#carousel-homepage {
  margin: 0 auto;
  border: .5px solid var(--accent2-color);
}

.carousel-caption {
  height: 100px;
  background-color: #0E111680;
  color: black;
  font-family: "Amatic SC", serif;
  border: .5px solid var(--accent2-color);

}

/* Homepage about the boys css */

#homepage-about-the-boys-title {
  padding: 0 0 0.3em;
  width: 200px;
  font-size: 3em;
  text-align: center;
  margin: 0 auto;
}

#homepage-about-the-boys-paragraph {
  border: .5px solid var(--accent2-color);
  padding: 6px 0;
  text-align: justify;
  padding: 1em;
  margin-bottom: 4em;
  background-color: var(--accent1-color);
}

/* profiles css */

#homepage-meet-the-boys,
#homepage-bt21 {
  border: .5px solid var(--accent2-color);
  padding: 6px 0;
  width: 200px;
  text-align: center;
  background-color: var(--secondary-color);
  font-weight: bold;
}

#homepage-meet-the-boys {
  grid-column: 1/2;
}

#homepage-bt21 {
  grid-column: 5/6;
}

.homepage-boys-picture,
.homepage-bt21-picture,
.homepage-army-picture {
  max-width: 200px;
  border: .5px solid var(--accent2-color);
}

#homepage-profiles {
  display: grid;
  grid-template-columns: 300px 100px auto 100px 300px;
  grid-template-rows: repeat(300px 100px);
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
}

.homepage-boys-picture {
  grid-column: 1/2;
  box-shadow: 10px 16px  var(--accent1-color);
}

.homepage-boys-picture-credit {
  grid-column: 1/2;
  font-size: 0.7em;
}

.homepage-bt21-picture {
  grid-column: 5/6;
  box-shadow: 10px 16px  var(--accent1-color);
}

.homepage-bt21-picture-credit {
  grid-column: 5/6;
  font-size: 0.7em;
}

.homepage-boys-name {
  grid-column: 2/3;
  font-family: "Amatic SC", serif;
  font-size: 30px;
  font-weight: bold;
}

.homepage-bt21-name {
  grid-column: 4/5;
  font-family: "Amatic SC", serif;
  font-size: 30px;
  font-weight: bold;
}

#homepage-army {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
}

#homepage-army-title {
  grid-column: 1/3;
  padding: 1em 0 0.5em;
  width: 200px;
  font-size: 3em;
  text-align: center;
  margin: 0 auto;
}

.homepage-army-picture {
  grid-row: 2/3;
  box-shadow: 10px 16px  var(--accent1-color);
}

#homepage-army-picture-credit {
  grid-column: 2/3;
  font-size: 0.7em;
}

#homepage-van-name,
#homepage-army-name {
  grid-row: 4/5;
  font-family: "Amatic SC", serif;
  font-size: 30px;
  font-weight: bold;
}

/* homepage keeping up with bts */

#homepage-keeping-up-title{
  padding: 0 0 0.3em;
  font-size: 3em;
  text-align: center;
  margin: 3em auto 1em;
}

#homepage-social-feeds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
  grid-gap: 20px;
  margin: 5px 20px;
  justify-content: center;
  align-content: center;
  justify-items: center;
  justify-items: center;
}


#homepage-weverse {
  max-width: 500px;
  margin: 2em auto 5em;
}

#homepage-weverse-picture {
  max-width: 500px;
  border: .5px solid var(--accent2-color);
   box-shadow: 20px 36px  var(--accent1-color);
}

#homepage-weverse-title {
  text-align: center;
}

/* era pages */

.page-title-box {
  margin: 0 auto 3em;
  text-align: center;
  background-color: var(--secondary-color);
  width: 50%;
  border: .5px solid var(--accent2-color);
}

.page-title {
  font-size: 2.7em;
}

.era-video {
  max-width: 600px;
  margin: 0 auto 4em;
}

.era-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 2em 1em;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  
}

.cards-wrapper-album {
  display: flex;
  justify-content: center;
} 

.card-album {
  margin: 0 0.5em;
  box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
  border: none;
  border-radius: 0;
} 
.carousel-inner-album {
  padding: 1em;
}
.carousel-control-prev-album,
.carousel-control-next-album {
  width: 100%;
  
}
@media (min-width: 768px) {
  .card-album img {
    height: 11em;
  }
}

/* Articles */

.article-text-box {
  border: .5px solid var(--accent2-color);
  text-align: center;
  line-height: 2.5;
  padding: 1em;
  background-color: var(--secondary-color);
  font-size: 1.1em;
}

.article-title{
   text-align: center;
  font-weight: bold; 
}

/* Butter Album */

.butter-album-div-a {
  background-color: White;
}

.butter-album-div-b {
  background-color: #FF6B01;
}

/* Butter Song */
.butter-song-div-a {
    background-color: White;

}

.butter-song-div-b {
   background-color: #FFDB00;
}

#butter-records h4 {
  text-align: center;
  margin-bottom: 1em;
}

#butter-records {
  grid-column: 1/4;
  text-align: left;
}


#butter-cover-art {
  grid-column: 4/6;
}

#butter-billboard-twitter {
  grid-column: 1/3;
}

#butter-billboard-info {
  grid-column: 3/6;
}

#butter-videos-text {
  margin: 2em 0;
}

#butter-videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2em 1em;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  margin-bottom: 1em;
}

/* Community Page */

#community-header {
  background-image: url(https://cdn.glitch.com/675c43ff-88ce-412f-9529-2fd94c1f3218%2Fthumbnails%2Fpexels-nataliya-vaitkevich-7235797.jpg?1626377871733);
  height: 220px;
  margin: 20px 0;
}

#community-header-space {
  padding-top: 130px;
}

#community-title {
  background-color: var(--title-background-color);
  border: .5px solid var(--accent2-color);
  padding: .2em .5em ;
  width: 8em;
  
}

#community-picture-credit {
  margin-top: 25px;
  font-size: .8em
}

#community-army-explain h5{
  margin: 50px 0 30px;
  padding: 20px 0;
}

#army-pose-picture {
  max-width: 500px;
  margin: 0 auto 20px;
}

#community-form {
  background-color: white;
  border: .5px solid var(--accent2-color);
  border-radius: 5px;
  max-width: 700px;
  margin: 0 auto 20px;
  padding: 10px 0;
}


#community-form ul {
   list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}


.flex-left {
    width: 50%;
  margin-top: 80px;
}

.flex-left label {
  text-decoration: underline;
}

.flex-right {
    width: 50%;
}

.flex-right p{
  text-decoration: underline;
}

#community-form button {
  background-color: var(--accent1-color);
margin: 30px 250px 10px;
 
}

#community-form input[type=text] {
  padding: 3px 8px;
  margin: 20px 0;
}

#community-form input[type=text]:focus {
  background-color: var(--accent1-color);
}

#feedback {
    background-color: var(--accent1-color);
  border: .5px solid var(--accent2-color);
  text-align: center;
    top: 0;
    left: 0;
    right: 0;
    padding: .5em;
    /* make this element invisible until we are ready for it */
    display: none;
        
}
.moveDown {
    margin-top: 3em;
}
     

/* clear out for now

@media screen and (max-width: 550px) { 
/* beginning of media query */
    .home-grid {
    display: block;
    }
    
/* end of media query */ 
}

*/