/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #111a2d;
  background-image: url(../images/bg-dk-blu.png);
	background-position: top;
	background-repeat: 0;
	background-attachment: fixed;
    background-size: auto;
  font-size: 16px;
  font-family: Helvetica, sans-serif;
  margin: 0;
}



p {
  line-height: 1.6em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
}

hr {
  border: solid #d9d9d9;
  border-width: 2px 0 0 0;
}

img {
  max-width: 100%;
  height: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em; 
}

.right {
  float: right;
  margin-left: 1em;
}
.left {
  float: left;
  margin-right: 1em;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
@media only screen and (min-width: 600px) {
  .small {
    max-width: 60%;
    height: auto;
  }
}
.caption {
  margin-top: 0;
  font-size: 0.9em;
  font-style: italic;
}

.home-cont {
  display: flex;
  position: relative;
  width: 100%;
  height: auto;
  justify-content: center;
  background-color: #111a2d;
  background-image: none;
}

.btm-image {
  position: relative;
  max-width: 100%;
  width: 90%;
  
  }

.top-img {
  /* Position the top image absolutely within its relative parent */
  position: absolute; 
  max-width: 60%;
  width: 100%;
  /* Place it at the top-left corner of the container */
  top: 3px; 
  /* Optional: Adjust size relative to the container */
  height: auto;
  }


/* Mouse over link */
a:hover { 
  background-color: #fff6e6;
}

/* Unvisited link */
a:link {
  color: #f906ca;
}

/* Visited link (after it has been clicked and the page navigated) */
a:visited {
  color: #86066d;
}

/* Selected link (the moment it is clicked) */
a:active {
  color: #00ffa5;
}

/* Use for unstyling a link or for an image as a link to prevent weirdness. */
.unstyle-link, 
.unstyle-link:visited, 
.unstyle-link:hover, 
.unstyle-link:active, 
.unstyle-link:focus {
  background-color: rgba(255, 255, 255, 0);
}


h1, h2, h3, h4, h5 {
  font-family: Helvetica, sans-serif;
  color: #f2f2f2;
}

/*#CONTAINER is the rectangle that contains everything but the background!*/
#container {
  margin: 3em auto;
  width: 90%;
	max-width: 700px;
	background-color: #111a2d;
  color: #f2f2f2; 
  outline-color: rgba(169, 169, 169, 0);
  outline-style: ridge;
  outline-width: 4px;
  outline-offset: 0;
}

#content {
  padding: 10px 5% 20px 5%;
}


/*HEADER LINKS STYLE*/
#header {
  background-color: #111a2d;
  padding: 0 5%;
  border-color: rgba(169, 169, 169, 0.33);
  border-style: ridge;
  border-width: 0 0 4px 0;
}
#header ul {
  list-style-type: none;
  padding: 0.5em 0;
  margin: 0;
}
#header li {
  font-size: 1.2em;
  display: inline-block;
  margin-right: 1.5em;
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}
#header li a {
  color: #f2f2f2;
  text-decoration: none;
  background-color: inherit;
}
#header li a:hover {
  text-decoration: underline;
  color: #f906ca;
}

.thumbnail img {
  margin-left: 10px;
  margin-right: 5px;
  margin-bottom: 2px;
  margin-top: 2px;
}

.thumbnail {
  color: #f2f2f2;
  
}

/*Daily Painting Month List*/
.art-list {
    /* Removes default browser padding and margin for the <ul> */
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: rgba(169, 169, 169, 0);
}

.art-list li {
    /* The key property to display items horizontally */
    display: inline-block; 
    
    /* Optional styling for better presentation */
    padding: 1px 5px; /* Adds spacing around the content */
    margin-right: 1px;  /* Adds space between list items */
    
}

.art-list li a {
    /* Optional: style the links inside the list items */
    text-decoration: underline; 
}

/*POST LIST STYLE*/
#postlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
#recentpostlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
.moreposts {
  font-size: 0.8em;
  margin-top: 0.2em;
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
  text-align: center;
  margin-top: 1.4em;
}

/*Header Image*/
.center {
  width: 90%;
  max-width: 700px;
}


/*DISQUS STYLE*/
#disqus_thread {
  margin-top: 1.6em;
}

/*FOOTER STYLE*/
#footer {
  font-size: 0.8em;
  padding: 0 5% 10px 5%;
}

/*Responsive Youtube Embed*/
.video-container {
    overflow: hidden;
    position: relative;
    width:100%;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}