* {
  box-sizing: border-box;
}

  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #2C4A48 #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #2C4A48;
  }

::selection {
 color: white;
 background: #364552;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #191b21;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #191b21 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


body {
  font-family: Arial, sans-serif;
  padding: 2px;
  padding-left: 22%;
  padding-right: 22%;
  font-size: 1rem;
  background: url(tlo.png);
}
#divider {
	display: block;
	margin-right: auto;
	margin-left: auto;
	max-width: 100%;
}
.icons {
	background: #B3B3B3;
	padding: 20px;
	border-radius: 5px;
	width: 70%;
	margin: auto;
}
.icons img {
      transition-duration: 0.5s;
      transition-property: scale;
	  margin: 1px 2px;
   }
   
  .icons img:hover {
      scale: 2;
      image-rendering: pixelated;
      transition-duration: 0.5s;
      transition-property: scale;
   }
.stamps img {
      transition-duration: 0.5s;
      transition-property: scale;
	  margin: 1px 2px;
   }
   
  .stamps img:hover {
      scale: 2;
      image-rendering: pixelated;
      transition-duration: 0.5s;
      transition-property: scale;
   }
summary {
	cursor: pointer;
	color: #00403E;
}
summary:hover {
color: #6ca9cd;
}
summary:active {
color: #368BB3;
}
a {
color: #007ac2;
}

a:hover {
color: #6ca9cd;
}

a:active {
color: #6ca9cd;
text-decoration-style: double;
}

.nav a {
  color: #f2f2f2;
  text-align: center;
  padding-left: 14px;
  padding-right: 14px;
  text-decoration: none;
  line-height: 2;
}

.nav a:hover {
  color: #f2f2f2;
  text-shadow: 0px 0px 11px #FFFFFF;
}
.nav a:active {
  color: #f2f2f2;
  text-shadow: 0px 0px 11px #60BDBB;
}

.nav {
padding: 5px;
text-align: center;
background: #2C4A48;
color: white;
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 1.3rem;
}

h3, h2, h1 {
color: #2C444A;
font-family: "Comic Sans MS", cursive, sans-serif;
}

h1 {
font-size: 24px;
}
h2 {
font-size: 20px;
}
h3 {
font-size: 18px;
}

.header {
  padding: 5px;
  text-align: center;
}

.row {
  display: -webkit-flex;
  display: flex;
}

.column {
   padding-top: 10px;
   padding-right: 25px;
   padding-left: 25px;
   padding-bottom: 30px;
}

.side {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
   background: #e3ecf1;
}

.main {
background: white;
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
}

.footer {
  background-color: #2C4A48;
  color: white;
  padding: 10px;
  text-align: center;
}
.footer a {
color: #BDE8FF;
text-decoration-line: none;
}

.footer a:hover {
color: #E5F7FF;
}
.footer a:active {
color: #7B9AA8;
}
@media (max-width: 1100px) {
  body {
  padding-left: 10%;
  padding-right: 10%;
  }
}

@media (max-width: 750px) {
  .row {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .icons img:hover {
      scale: 1;
   }   
  .stamps img:hover {
      scale: 1;
   }
   .icons {
	padding: 5px;
	width: 95%;
}
}

@media (max-width: 700px) {
  body {
  padding: 0px;
  }
}
/*********************************
* Honeycomb Stamp Layouts v. 1.2 *
* CSS by Mooeena                *
* Free to use/modify w/ credit   *
* http://mooeena.neocities.org   *
* 15 widths and 2 preset layouts *
* To use: include the classes    *
* "honeycomb hc-[PICK LAYOUT]"   *
* to your images' container div. *
*********************************/
.honeycomb { display: grid;
             grid-auto-rows: 28px;
             gap: 30px 18px;
             padding: 0 32px 56px 0; }
.hc-2 { grid-template-columns: repeat(2, 32px); } /*Infinite-length section 2 stamps wide*/
.hc-3 { grid-template-columns: repeat(3, 32px); } /*Infinite-length section 3 stamps wide*/
.hc-4 { grid-template-columns: repeat(4, 32px); } /*Infinite-length section 4 stamps wide*/
.hc-5 { grid-template-columns: repeat(5, 32px); } /*Infinite-length section 5 stamps wide*/
.hc-6 { grid-template-columns: repeat(6, 32px); } /*Infinite-length section 6 stamps wide*/
.hc-7 { grid-template-columns: repeat(7, 32px); } /*Infinite-length section 7 stamps wide*/
.hc-8 { grid-template-columns: repeat(8, 32px); } /*Infinite-length section 8 stamps wide*/
.hc-9 { grid-template-columns: repeat(9, 32px); } /*Infinite-length section 9 stamps wide*/
.hc-10 { grid-template-columns: repeat(10, 32px); } /*Infinite-length section 10 stamps wide*/
.hc-11 { grid-template-columns: repeat(11, 32px); } /*Infinite-length section 11 stamps wide*/
.hc-12 { grid-template-columns: repeat(12, 32px); } /*Infinite-length section 12 stamps wide*/
.hc-14 { grid-template-columns: repeat(14, 32px); } /*Infinite-length section 14 stamps wide*/
.hc-16 { grid-template-columns: repeat(16, 32px); } /*Infinite-length section 16 stamps wide*/
.hc-18 { grid-template-columns: repeat(18, 32px); } /*Infinite-length section 18 stamps wide*/
.hc-20 { grid-template-columns: repeat(20, 32px); } /*Infinite-length section 20 stamps wide*/
.hc-mini { grid-template-columns: repeat(3, 32px); padding-bottom:28px;} /*Hexagonal group of max 7 stamps*/
.hc-hive { grid-template-columns: repeat(7, 32px); padding-bottom:28px;} /*Oval-shaped group of max 17 stamps*/
/*The following concern the interlocking pattern of the grids:*/
.hc-2 > :nth-child(2n+1), .hc-4 > :nth-child(2n+1), .hc-6 > :nth-child(2n+1), .hc-8 > :nth-child(2n+1), .hc-10 > :nth-child(2n+1), .hc-12 > :nth-child(2n+1), .hc-14 > :nth-child(2n+1), .hc-16 > :nth-child(2n+1), .hc-18 > :nth-child(2n+1), .hc-20 > :nth-child(2n+1) { margin-top: 28px; }
.hc-3 > :nth-child(6n+1), .hc-3 > :nth-child(6n+3), .hc-3 > :nth-child(6n+4), .hc-3 > :nth-child(6n) { margin-top: 28px; }
.hc-5 > :nth-child(10n+1), .hc-5 > :nth-child(10n+3), .hc-5 > :nth-child(10n+5), .hc-5 > :nth-child(10n+6), .hc-5 > :nth-child(10n+8), .hc-5 > :nth-child(10n) { margin-top: 28px; }
.hc-7 > :nth-child(14n+1), .hc-7 > :nth-child(14n+3), .hc-7 > :nth-child(14n+5), .hc-7 > :nth-child(14n+7), .hc-7 > :nth-child(14n+8), .hc-7 > :nth-child(14n+10), .hc-7 > :nth-child(14n+12), .hc-7 > :nth-child(14n) { margin-top: 28px; }
.hc-9 > :nth-child(18n+1), .hc-9 > :nth-child(18n+3), .hc-9 > :nth-child(18n+5), .hc-9 > :nth-child(18n+7), .hc-9 > :nth-child(18n+9), .hc-9 > :nth-child(18n+10), .hc-9 > :nth-child(18n+12), .hc-9 > :nth-child(18n+14), .hc-9 > :nth-child(18n+16), .hc-9 > :nth-child(18n) { margin-top: 28px; }
.hc-11 > :nth-child(22n+1), .hc-11 > :nth-child(22n+3), .hc-11 > :nth-child(22n+5), .hc-11 > :nth-child(22n+7), .hc-11 > :nth-child(22n+9), .hc-11 > :nth-child(22n+11), .hc-11 > :nth-child(22n+12), .hc-11 > :nth-child(22n+14), .hc-11 > :nth-child(22n+16), .hc-11 > :nth-child(22n+18), .hc-11 > :nth-child(22n+20), .hc-11 > :nth-child(22n) { margin-top: 28px; }
.hc-mini > :nth-child(1), .hc-mini > :nth-child(3), .hc-mini > :nth-child(4), .hc-mini > :nth-child(6) { margin-top: 28px; }
.hc-mini > :nth-child(7) { grid-area: 3/2; }
.hc-hive > :nth-child(1), .hc-hive > :nth-child(3), .hc-hive > :nth-child(5), .hc-hive > :nth-child(7), .hc-hive > :nth-child(8), .hc-hive > :nth-child(10), .hc-hive > :nth-child(12), .hc-hive > :nth-child(14) { margin-top: 28px; }
.hc-hive > :nth-child(15) { grid-area: 3/2; }
.hc-hive > :nth-child(16) { grid-area: 3/4; }
.hc-hive > :nth-child(17) { grid-area: 3/6; }
.hc-center {margin: auto; width:min-content;} /* Add this class to center a group of stamps. */
.hc-center > * {margin-left: -16px;}