html {
  text-size-adjust: none;
}
body 
{
  background: #fff;
  color: #444;
  font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
}
.container
{
  padding: 3em 2em 0 2em;
  font-size: 2.4vmin;
}

div
{
  margin-bottom: 1em;
}
a
{
  color: #ED005E; 
}
.typing
{
  font-size: 1.3em;
  font-family: "Courier New";
  margin-bottom: 1em;
  color: #555;
}
.note
{
  font-size: 2.3em;
  line-height: 1.7em;
}

h1
{
  font-size: 2em;
  line-height: 1.5em;
}


@media screen and (max-height: 768px)
{
  .container 
  {
    padding: 1.5em 1.5em;
  }
}



.highlight-container, .highlight {
  position: relative;
  color: #000;
  margin:5px;
  line-height: 1.3em;
}

.highlight-container {
  display: inline-block;
}
.highlight-container:before {
  content: " ";
  display: block;
  height: 95%;
  width: 100%;
  margin-left: -3px;
  margin-right: -3px;
  position: absolute;
  background: #ffd500;
  transform: rotate(2deg);
  top: -1px;
  left: -1px;
  border-radius: 20% 25% 20% 24%;
  padding: 10px 3px 3px 10px;
}

#bar
{
  position: relative;
  padding: 0 5px;
  line-height: 1.3em;
}

#bar > span {animation: 8s autoplay4 infinite linear;
  position: absolute; top: 0; left: 0; opacity: 0.0}

#bar > span:nth-child(1) {animation-delay: 0s}
#bar > span:nth-child(2) {animation-delay: 2s}
#bar > span:nth-child(3) {animation-delay: 4s}
#bar > span:nth-child(4) {animation-delay: 6s}


@keyframes autoplay4 {
  0% {opacity: 0.0}
  4% {opacity: 1.0}
  18% {opacity: 1.0}
  28% {opacity: 0.0}
  75% {opacity: 0.0}
}




ul {
  list-style: none;
  padding: 0;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 13px;
  margin-bottom: 3em;
}

.image-gallery > li {
  flex-basis: 360px; 
  position: relative;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}


.image-gallery li img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  vertical-align: middle;

}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(57, 57, 57, 0.702);
  top: 0;
  left: 0;
  transform: scale(0);
  transition: all 0.2s 0.1s ease-in-out;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.3em;
}

/* hover */
.image-gallery li:hover .overlay {
  transform: scale(1);
}


.gradient-border {
  --border-width: 4px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: var(--border-width);
}
.gradient-border::after {
  position: absolute;
  content: "";
  top: calc(-1 * var(--border-width));
  left: calc(-1 * var(--border-width));
  z-index: -1;
  width: calc(100% + var(--border-width) * 2);
  height: calc(100% + var(--border-width) * 2);
  background: linear-gradient(60deg, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f, #abf25f, #5ff281, #5ff2f0);
  background-size: 300% 300%;
  background-position: 0 50%;
  border-radius: calc(2 * var(--border-width));
  animation: moveGradient 4s alternate infinite;
}

@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}


footer
{
  text-align: center;
}