/****** scrollbar ******/
::-webkit-scrollbar{
  width: 10px;
  height: 10px;
  display: none;
}

::-webkit-scrollbar-thumb{
  background: #fff;
  border-radius: 0px;
}

::-webkit-scrollbar-track{
  background: inherit;
  border-radius: 0px;
}
        
/****** select hightlight ******/
::selection {
  background: blue;
  color:white;
}

::-moz-selection {
  background: blue;
  color:white;
}
        
/****** body ******/
body {
  background-color:white;
  background-image:url("images/sky.png");
  background-repeat: repeat;
  background-position: 0 0;
  background-attachment: fixed;
  color:#000; /* default font color */
  font-family:'Times New Roman';
  font-size:18px; /* default font size */
  padding:10px;
}

/****** links ******/
a{
  text-decoration: underline;
  color: blue;
  transition:0.3s;
}

a:hover{
  cursor:help;
  transition:0.3s;
  color: purple;
}
        
/****** wrappers ******/
#wrapper{
  display: grid;
}

.example-image-gallery {
  display: flex;
  flex-wrap: wrap;
}
        
/****** main containers ******/
.box{
  padding:10px;
  border:2px dotted blue;
  box-shadow: 0 0 10px 4px white
}

.box-center{
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-centerflex{
  display: flex;
  justify-content: center;
  align-items: center;
  padding:10px;
  border:2px dotted blue;
  box-shadow: 0 0 10px 4px white
}

.centerflex{
  display: flex;
  justify-content: center;
  align-items: center;
}


.box-background {
  position:relative;
  max-width: 100%;
  padding: 12px;
  border: 2px dotted blue;
  box-shadow: 0 0 10px 4px white;
  background: white;
}

.box-backgroundPOS {
  display:flex;
  padding: 12px;
  border: 2px dotted blue;
  box-shadow: 0 0 10px 4px white;
  background: white;
}

.box-backgroundflex {
  display: flex;
  padding:10px;
  border:2px dotted blue;
  box-shadow: 0 0 10px 4px white;
  background: white;
}

* {
  box-sizing: border-box;
}

.imgcontainer-absolute {
  padding:10px;
  border:2px dotted blue;
  box-shadow: 0 0 10px 4px white;
  position:absolute;
  display:inline-flex;
  top: 20px;
  left: 20px;
}

.textcontainter-relative {
  position: relative;
}

.container {
  display: grid;
  grid-template:
    "myHeader myHeader"
    "mySidebar myMainContent"
    "myFooter myFooter"
    / 1fr 5fr;
  grid-gap: 10px;
}

header { 
  grid-area: myHeader;
  text-align: center;
  justify-content: center;
  }
aside { grid-area: mySidebar; }
main {  
  grid-area: myMainContent;
  justify-content: center;
  padding-right:20%;
}
footer { grid-area: myFooter; }

.sidebar{
  border:2px dotted blue;
  box-shadow: 0px 0px 10px 4px white;
  width:225px; /* width of sidebar - should add up to 100 when added to #main width */
  text-align: center;
  justify-content: center;
}

.post{
  display: grid;
  justify-content: center;
  line-height: 1.4;
  border:2px dotted blue;
  box-shadow: 0px 0px 10px 4px white
}
  
.banner{
  max-width:100%;
  max-height:100%;
}

/******* dividers ********/
#divider {
  padding:20px;
  background: url("images/blue2.gif");
  background-repeat: repeat-x;
}

/******* cards *******/

.details-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.details-box {
  flex: 1 1 500px; /* grow | shrink | base width */
  flex-shrink:0;
  max-width: 100%;
  padding: 12px;
  border: 2px dotted blue;
  box-shadow: 0 0 10px 4px white;
  background: white;
}

.details-card {
  flex: 1 1 250px; /* grow | shrink | base width */
  max-width: 100%;
  padding: 12px;
  border: 2px dotted blue;
  box-shadow: 0 0 10px 4px white;
  background: white;
}

.details-card summary {
  cursor: pointer;
  font-weight: bold;
  list-style: none; /* removes default triangle */
}

.details-card summary::-webkit-details-marker {
  display: none; /* removes marker in Chrome/Safari */
}

.details-card > *:not(summary) {
  margin-top: 10px;
}

.details-card[open] {
  animation: open 0.2s ease-out;
}

@keyframes open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Items */
.example-image-gallery div {
  box-sizing: border-box;
  width: calc(25% - 10px);
  margin: 5px;
  border: 5px solid blue;
  box-shadow: 0 0 10px 4px white;
  overflow: hidden;
  position: relative;
}

/* Images */
.example-image-gallery div img {
  transition: transform 0.5s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Captions */
.example-image-gallery div span {
  position: absolute;
  bottom: 15px;
  left: 0;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  background: white;
  padding: 5px 10px;
  font-size: 20px;
  opacity: 0;
  transform: translateY(100px);
  transition: transform 0.4s ease, opacity 0.5s ease;
}

/* Images on Hover */
.example-image-gallery div:hover img {
  transform: scale(1.35) rotate(10deg);
}

/* Captions on Hover */
.example-image-gallery div:hover span {
  opacity: 1;
  transform: none;
}
        
/****** mobile settings ******/
@media (max-width: 800px) {
  .container {
    grid-template:
      "myHeader"
      "mySidebar"
      "myMainContent"
      "myFooter";
  }  
  .example-image-gallery div {
    width: calc(50% - 10px);
  }
}