/* Style the header */
.header {
  padding: 30px;
  text-align: center;
  background: #00C9FF; 
  color: yellow;
}

/* Increase the font size of the h1 element */
.header h1 {
  font-size: 40px;
}

/* Increase the font size of the h2 element */
.header h2 {
  font-size: 20px;
}

body {
  font-family: Times, serif;
  line-height: 1.6;
  margin: 0;
}

/* Style the top navigation bar */
.navbar {
  overflow: hidden;  /* Hide overflow */
  background-color: black; /* Dark background color */
}

/* Style the navigation bar links */
.navbar a {
  float: left; /* Make sure that the links stay side-by-side */
  display: block; /* Change the display to block, for responsive reasons (see below) */
  color: yellow; /* White text color */
  text-align: center; /* Center the text */
  padding: 14px 20px; /* Add some padding */
  text-decoration: none; /* Remove underline */
}

/* Right-aligned link */
.navbar a.right {
  float: right; /* Float a link to the right */
}

/* Change color on hover/mouse-over */
.navbar a:hover {
  background-color: yellow; /* Grey background color */
  color: #0000ff; /* Black text color */
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {
    flex-direction: column;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}

@media screen and (max-width: 400px) {
  .navbar b {
    float: none;
    width: 100%;
  }
}

/* Style the footer */
.footer {
  color: yellow;
  text-align: center;
  background-color: black;
  padding: 14px 20px;
}






.img-zoom-container {
  position: relative;
}

.img-zoom-lens {
  position: absolute;
  border: 1px solid #d4d4d4;
  /*set the size of the lens:*/
  width: 40px;
  height: 40px;
}

.img-zoom-result {
  border: 1px solid #d4d4d4;
  /*set the size of the result div:*/
  width: 300px;
  height: 300px;
}

.code {
  background-color:black;
  color:yellow;
}


/* test shaking */
img.shakable:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

div.a {
  font-size: 12pt;
  text-align: justify;
  line-height: normal;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 50px;
  margin-right: 50px;

}

a {
     text-decoration: none;
     color: black;
    }
a:hover {
  color: grey;
}