/*<!-- THIS IS THE CSS !-->*/

            :root {
                --body-bg-image: url('https://utopiste.eu/images/SeaGreenGlobe.png');

                /* colors */
                --content: #123456;
            }

			.pt-serif-regular {
  				font-family: "PT Serif", serif;
  				font-weight: 400;
  				font-style: normal;
}

			.pt-serif-bold {
 			 	font-family: "PT Serif", serif;
  				font-weight: 700;
  				font-style: normal;
}

			.pt-serif-regular-italic {
  				font-family: "PT Serif", serif;
  				font-weight: 400;
  				font-style: italic;
}

          .pt-serif-bold-italic {
  				font-family: "PT Serif", serif;
  				font-weight: 700;
  				font-style: italic;
}

            body {
              	font-family: PT Serif, serif;
                margin: 0;
                padding: 0;
                line-height: 1.;
                background-image: url('../images/SeaGreenGlobe.png');
                background-repeat: repeat;
	              background-position: center;
	              background-attachment: fixed;
                color: #17462C;
            }

            * {
                box-sizing: border-box;
            }


            #container {
                width:75%;
               /* max-width: 56.25rem; */
                outline-color: #17462C;
  				      outline-style: ridge;
  			    	  outline-width: 0.625rem;
  				      outline-offset: 0;
                margin: 0 auto;
            }
            #container a {
                color: #2E8B57;
                font-weight: bold;
                text-decoration:none;
            }
            #container li a:hover {
                color: #FFD700;
                text-decoration: underline;
            }


            #flex {
                display: flex;
            }

aside {
    background-color: #2E8B57;
    width: 12.5rem;   
    padding: 1rem;
    font-size: 0.875rem;
    box-sizing: border-box;
    position: sticky;
    top: 0rem;
    min-height:100vh;
    align-self: flex-start;
}

            main {
                background-color: rgba(255,255,255,0.9);
                flex: 1;
                padding: 1.25rem;
                order: 2;
            }

            #rightSidebar {
                order: 3;
}
p {
  line-height: 1.6rem;
  font-size: 1rem;
}

/*a {
                color: #2E8B57;
                font-weight: bold;
                text-decoration:none;
}

a:hover {
                color: #FFD700;
                text-decoration: underline;
            }
      */      
.pgreen {
  				color:#17462C;
}

.pblue {
  				color:#004F6E;
}

			.pyellow {
  				color:#806C00;
}

			.pred {
  				color:#591111;
}

			.pfindate  {
 				color:#002837;
              	font-size:1rem;
}

			.pengdate  {
  				color:#2D0909;
  				font-size:1rem;
          	}
            
h1 {
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(2.5rem, 6vw, 5rem);
    color: #2E8B57;
    text-align: center;
    text-transform: uppercase;
    text-decoration: underline;
}

h2 {
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(2rem, 4vw, 3.5rem);
    color: #009EDB;
    text-align: left;
}

h3 {
    font-family: "PT Serif", serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: #B22222;
    text-align: left;
}

h4 {
    font-family: "PT Serif", serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(1.25rem, 2vw, 2rem);
    color: #FFD700;
    text-align: left;
}

/* Sidebar Headings */

.asideh1 {
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    color: white;
    text-align: center;
    text-transform: uppercase;
    text-decoration: underline;
    line-height: 1.1;
}

.asideh2 {
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    color: #E0F7FF;
    text-align: center;
    text-transform: uppercase;
    text-decoration: underline;
    line-height: 1.1;
}

.asideh3 {
    font-family: "PT Serif", serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    color: #FFE4E1;
    text-align: left;
    line-height: 1.15;
}

.asideh4 {
    font-family: "PT Serif", serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    color: #FFF4B3;
    text-align: left;
    line-height: 1.2;
}

.box {
    background-color: #FFFFFF;
    outline: 0.5rem ridge #17462C;
    padding: 0.625rem;
    margin: 2rem 0;
}
            
			.sidebar-logo {
  		  		display: block;
    			width: 70%;
   				max-width: 7rem;
    			height: auto;
    			margin: 0 auto 1rem auto;
}


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: 2rem;
}

.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 only screen and (max-width: 48rem) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }


                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }
            }