* {
  color: #000;
  font-family:  Geneva, Arial, Helvetica, sans-serif;
}

body {
  padding: 0 1em;
  min-height: 800px;
  /* rotating ebrik */
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

#header {
  margin-top:0;
  margin-bottom: 1em;
  color: #125888;
}

.blue_text {
  color: #125888;
}

/* logo  */
#jdi_logo {
  margin-top: 0em;
  max-width: 300%;
  height: 50px;
}

.framed_image {
  border: 5px solid #000000; /* Width, style, and color of the frame */
  padding: 10px;            /* Space between the image and the frame */
  margin: 15px;             /* Space between the frame and other content */
}

/*https://www.pyxofy.com/css-art-how-to-make-a-3d-cube-with-css/#:~:text=The%20Front%20(1)%20face%20is,using%20the%20rotateY()%20function.&text=The%20Right%20(2)%20face%20needs,the%20Front%20(1)%20face.&text=Similar%20to%20the%20previous%20Right,it%20minus%20(-)%2090%20degrees.&text=Now%20it%27s%20time%20to%20rotate,number%204%20is%20correctly%20aligned.&text=Next%2C%20the%20Top%20(5),to%20ensure%20it%20faces%20upward.&text=To%20finish%20up%20the%20CSS,any%20angle%20of%20your%20choosing.&text=This%20is%20how%20Example%201,3%20examples%20with%20different%20rotations.*/
/* Position the 4 faces */
.scene {
  margin-top: 0;
  margin-left: 0;

  width: 200px;
  height: 200px;
  perspective: 600px; /* Depth of 3D space */
}

.cube {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: spin 30s 1 linear;
  position: static;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
}

.one { transform: rotateY(0deg) translateZ(100px); }
.two { transform: rotateY(90deg) translateZ(100px); }
.three { transform: rotateY(180deg) translateZ(100px); }
.four { transform: rotateY(270deg) translateZ(100px); }

/* Animation */
@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}