/* Container with padding */
/*.container {
  width: 90%;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
}

/* Images and media scale with container */
/*img, video {
  max-width: 100%;
  height: auto;
}

/* Button styles */
/*button, a {
  padding: 10px 20px;
  font-size: 1rem;
  text-decoration: none;
  display: inline-block;
}

/* Navigation menu */
/*.menu {
  list-style-type: none;
  display: flex;
  justify-content: space-around;
}

.mobile-menu {
  display: none;
}

/* Responsive layout for smaller screens */
/*@media (max-width: 768px) {
  .column {
    flex: 100%;
  }

  .menu {
    display: none;
  }

  .mobile-menu {
    display: block;
  }
}

*/

/* 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: #FFFFFF;
  background-image: url('../images/SeaGreenGlobe.png');
  background-repeat: repeat;
	background-position: center;
	background-attachment: fixed;
  font-size: 1.1rem;
  font-family: Courier, serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

p {
  line-height: 1.5rem; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
  font-size: 1.1rem;
}

.pgreen {
  color:#17462C;
}

.pblue {
  color:#004F6E;
}

.pyellow {
  color:#806C00;
}

.pred {
  color:#591111;
}

.pfindate  {
  color:#002837;
  font-size:2vw;
}

.pengdate  {
  color:#2D0909;
  font-size:2vw;
}

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

/*This makes images shrink when their container becomes too small (responsive design)*/
img {
  max-width: 100%;
  height: auto;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.icon {
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
  max-height: 3.125rem;
}

.icon:hover {
  opacity:0.6;
}

.right {
  float: right;
  margin-left: 0.1rem;
}
.left {
  float: left;
  margin-right: 0.1rem;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
@media (max-width: 48rem) { /* 768px in rem */
  #container {
    width: 100%;
    padding: 0.9375rem; /* 15px in rem */
  }
  body {
    font-family: Courier, serif; /* Font for mobile */
    font-size: 0.9rem; /* Font size for mobile */
  }
  .icon {
    max-height: 2.5rem; /* Smaller size for mobile devices */
  }
}

.caption {
  margin-top: 0;
  font-size: 0.9rem;
  font-style: italic;

}
a {
  color: #2E8B57;
}

a:hover { 
  background-color: #CBE2D5;
}

/*.headergif {
  float: right;
  max-height: 5em;
  max-width: 5em;
}*/

/*TEXT*/
h1 {
  font-size: 10vw;
  color: #2E8B57;
  text-align: center;
  text-transform: uppercase;
  font-style: italic;
  text-decoration: underline;
}

h2 {
  font-size: 7vw;
  color: #009EDB;
  text-align: left;
}

h3 {
  font-size: 6vw;
  color: #B22222;
}

h4  {
  font-size: 4vw;
  color: #FFD700;
}

.otsikko {
  text-transform: uppercase;
  font-style: italic;
  text-decoration: underline;
}

.info {
    display: inline-block;
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.paluu {
  display:  inline-block;
  font-size:1rem;
  font-weight:bold;
  text-decoration:underline;
  color:#403600;
  background-color:#FFF5C0;
  Margin-Bottom:1.3rem;
}

.paluu:hover {
  background-color: #FFD700;
}

ul {
  font-size:1.2rem;
  line-height:1.3rem;
}

/*#CONTAINER is the rectangle that has contains everything but the background!*/
#container {
  margin: 3rem auto;
  width: 75%;
  color: #0C2316; 
  background: rgba(255,255,255, 0.95);
  outline-color: #17462C;
  outline-style: ridge;
  outline-width: 0.625rem;
  outline-offset: 0;
  padding: 1.25rem;
  display: flex;
  flex-wrap: wrap;
}

#footer-container {
  margin: 3rem auto;
  width: 75%;
  color: #0C2316; 
  background: rgba(192, 231, 246, 0.95);
  outline-color: #004F6E;
  outline-style: ridge;
  outline-width: 0.625rem;
  outline-offset: 0;
  font-size: 0.6rem;
  padding: 1.25rem;
  display: flex;
  flex-wrap: wrap;
}

#content {
  padding: 0.625rem 5% 0.625rem 5%;
}


/*HEADER STYLE*/
#header {
  background-color: #97C5AB;
  padding: 0 5%; /* Remove padding from the header div */
  margin: 0; /* Remove margin if needed */
  width: calc(100% + 2 * 1.25rem); /* Adjust width to account for container padding */
  margin-left: -1.25rem; /* Align header to the left edge of the container */
  margin-right: -1.25rem; /* Align header to the right edge of the container */
  margin-top: -1.25rem;
}
#header ul {
  list-style-type: none;
  padding: 0.5rem 0;
  margin: 0;
}
#header li {
  font-size: 1.2rem;
  display: inline-block;
  margin-right: 1.5rem;
  margin-bottom: 0.2rem;
  margin-top: 0.2rem;
}
#header li a {
  color: #17462C;
  font-weight: bold;
  text-decoration: none;
  background-color: inherit;
}
#header li a:hover {
  text-decoration: underline;
}

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

/*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;
}

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

*/