/** @format */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow */

.social {
  position: sticky;
  padding: 5px;
  left: 50px;
  bottom: 35px;
  /*background: gray;              */
  width: 300px;
  height: 50px;
  /*border: 8px solid #000;*/
  border: none;
  list-style: none;
  display: flex;
}

.instagram {
  position: sticky;
  padding: 5px;
  left: 100px;
  bottom: 35px;

  width: 300px;
  height: 50px;
  /*border: 8px solid #000;*/
  border: none;
  list-style: none;
  display: flex;
}

.facebook {
  position: sticky;
  padding: 5px;
  left: 10px;
  bottom: 35px;

  width: 300px;
  height: 50px;
  /*border: 8px solid #000;*/
  border: none;
  list-style: none;
  display: flex;
}

.twitter {
  position: sticky;
  padding: 5px;
  left: 100px;
  bottom: 35px;

  width: 300px;
  height: 50px;
  /*border: 8px solid #000;*/
  border: none;
  list-style: none;
  display: flex;
}

.youtube {
  position: sticky;
  padding: 5px;
  left: 100px;
  bottom: 35px;

  width: 300px;
  height: 50px;
  /*border: 8px solid #000;*/
  border: none;
  list-style: none;
  display: flex;
}

h1 {
  /* text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);*/
  text-align: center;
  letter-spacing: 3.5px;
  color: #ffffff;
}

.btn:hover,
.btn:active {
  background-color: goldenrod;
}

.icon {
  height: 24px;
  width: 24px;
}

.btn {
  position: absolute;
  font-weight: bold;
  /*	  color: purple;*/
  background-color: gray;
  border-radius: 20px;
  border-color: white;
  left: 20px;
  bottom: 5px;
  color: black;
  text-transform: uppercase;
}

.btn:link,
.btn:visited {
  position: absolute;
  /*  color: purple; */
  background-color: gray;
  border-radius: 25px;
  border-color: white;
  right: 20px;
  bottom: 5px;
  color: black;
  text-transform: uppercase;
  padding: 8px 16px;
}

.container--1 {
  height: 500px;
  width: 500px;
  /*box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.7);*/
  /*box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);*/
  /*           LR   top/btn  blur  scale shadow up   color.                */
  /*  display: grid;
  grid-template-columns: 300px;
  column-gap: 10px;
  row-gap: 40px;*/
  color: #212529;
  letter-spacing: 1.5px;
}

body {
  /*text-shadow: #764ba2;*/
  margin: 20px;
  /*justify-content: center;*/
  /*  border-top: 8px solid goldenrod;
  border-left: 8px solid goldenrod;
  border-right: 8px solid goldenrod; */
}

.marquee {
  height: 25px;
  width: 420px;
  bottom: 300px;
  left: 50px;
  /* right: 700px;*/
  overflow: hidden;
  position: absolute;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.marquee div {
  display: block;
  width: 200%;
  height: 30px;
  position: absolute;
  overflow: hidden;
  animation: marquee 5s linear infinite;
}

.marquee span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}

/* Button used to open the Game Descriptions - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: gray;
  padding: 16px 20px;
  border: none;
  cursor: crosshair;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 320px;
  animation: example1 1.5s;
}

/* The popup form - hidden by default */
.form-popup {
  box-shadow: 0px 3px 3px 3px #555;
  /*           LR   top/btn  blur  scale shadow up   color.                */
  /*text-shadow: #764ba2;*/
  display: none;
  position: fixed;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: medium;
  top: 75px;
  bottom: 50px;
  left: 450px;
  /* left: 40px; */
  text-align: left;
  border: 1px solid #f1f1f1;
  border-radius: 20px;
  background-image: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  z-index: 9;
}

.form-popupX {
  /*display: none;
  position: fixed;*/
  top: 200px;
  bottom: 75px;
  right: 200px;
  left: 700px;
  border: 3px solid #f1f1f1;
  border-radius: 25px;

  /* z-index: 9;*/
}

/* Add styles to the form container */
.form-container {
  /*box-shadow: 5px 5px 5px 5px #555;*/
  /*           LR   top/btn  blur  scale shadow up   color.     */
  max-width: 300px;
  padding: 10px;
  /*background-color: white;*/
  /* background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  */
}

/* Button used to open the Game descriptions - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: rgb(2, 49, 119);
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}

/* The popup form - hidden by default */
.form-popup {
  /*box-shadow: 20px 20px 20px 10px #555;*/
  /*           LR   top/btn  blur  scale shadow up   color.     */
  display: none;
  position: fixed;
  bottom: 100;
  right: 100px;
  border: 10px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
  background-image: linear-gradient(135deg, #667eea 50%, #513375 100%);
  /* background-image: linear-gradient(135deg, #007eaa 50%, #004ba2 100%); */
}

/* ============================================================= */
img {
  position: absolute;
}

.circleK1 img {
  /*animation: animate 20s linear infinite;*/
  left: 26px;
  top: 28px;
  width: 58px;
  height: 58px;

  border-radius: 50%; /* used ????? */
  background: cornflowerblue;
  background-color: goldenrod;
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.circleK2,
img {
  left: 36px;
  top: 38px;
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 50%;
  /*animation: animate 20s linear infinite;*/
}

.circleK1:hover {
  background: darkgoldenrod;
}
.circleK2:hover {
  background: darkgoldenrod;
}
.circleK3:hover {
  background: darkgoldenrod;
}
.circleK4:hover {
  background: darkgoldenrod;
}
.circleK5:hover {
  background: darkgoldenrod;
}
.circleK6:hover {
  background: darkgoldenrod;
}

.circleK3:hover .img-top {
  left: 39px;
  top: 43px;
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
  animation: animate 20s linear infinite;
}

#container {
  left: 3px;
  top: 4px;
  width: 70px;
  height: 40px;
  /* display: flex;
  align-items: left;
  justify-content: left;
  overflow: hidden;*/
  color: gray;
}

@keyframes mymove {
  from {
    color: #667eea;
  }
  to {
    color: aqua;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.5, 0.5);
    opacity: 0.5;
  }
  to {
    transform: scale(2.5, 2.5);
    opacity: 0;
  }
}

@keyframes example1 {
  0% {
    background-color: yellow;
  }
  25% {
    background-color: goldenrod;
  }
  50% {
    background-color: goldenrod;
  }
  100% {
    background-color: darkgoldenrod;
  }
}

@keyframes example2 {
  0% {
    background-color: yellow;
  }
  25% {
    background-color: goldenrod;
  }
  50% {
    background-color: goldenrod;
  }
  100% {
    background-color: darkgoldenrod;
  }
}

@keyframes example3 {
  0% {
    background-color: yellow;
  }
  25% {
    background-color: goldenrod;
  }
  50% {
    background-color: goldenrod;
  }
  100% {
    background-color: darkgoldenrod;
  }
}
/*  button .item {
  z-index: 100;
  padding: 5px;
} */
/* -------------------------------------------------------------------------------------------------------------- */
/* This is the code that places the circles in the frame: */

.circleK1 {
  position: absolute;
  padding: 5px;
  /* Starting position of the first circle: I sub 350-200=150.  Start to the left more.*/
  left: 150px;
  top: 50px;
  background: gold;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  /* border: black;  */
  color: pink;
  border: 8px solid #000;
  /* opacity: 0;
  /* animation: scaleIn 4s infinite cubic-bezier(0.36, 0.11, 0.89, 0.32); */
}
/* -------------------------------------------------------------------------------------------------------------- */
.circleK2 {
  position: absolute;
  background: gold;
  padding: 5px;
  left: 256px; /* 456-200=256 */
  top: 100px;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  color: black;
  border: 8px solid #000;
}

.circleK2a {
  position: absolute;
  left: 33px;
  top: 37px;
  background: gold;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  border: 3px solid brown;
}

.circleK2b {
  position: absolute;
  left: 39px;
  top: 43px;
  background: goldenrod;
  border-radius: 50%;
  width: 23px;
  height: 23px;
  border: 3px solid goldenrod;
}
/* -------------------------------------------------------------------------------------------------------------- */
.circleK3 {
  position: absolute;
  background: gold;
  padding: 5px;
  left: 258px; /* 458-200=258 */
  top: 218px;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  color: black;
  border: 8px solid #000;
}

.circleK3a {
  position: absolute;
  left: 33px;
  top: 37px;
  background: gold;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  border: 3px solid brown;
}

.circleK3b {
  position: absolute;
  left: 39px;
  top: 43px;
  background: goldenrod;
  border-radius: 50%;
  width: 23px;
  height: 23px;
  border: 3px solid goldenrod;
}
/* -------------------------------------------------------------------------------------------------------------- */
.circleK4 {
  position: absolute;
  background: gold;
  padding: 5px;
  left: 150px;
  top: 265px;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  color: black;
  border: 8px solid #000;
}
.circleK4a {
  position: absolute;
  left: 33px;
  top: 37px;
  background: gold;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  border: 3px solid brown;
}

.circleK4b {
  position: absolute;
  left: 39px;
  top: 43px;
  background: goldenrod;
  border-radius: 50%;
  width: 23px;
  height: 23px;
  border: 3px solid goldenrod;
}
/* -------------------------------------------------------------------------------------------------------------- */
.circleK5 {
  position: absolute;
  background: gold;
  padding: 5px;
  left: 43px;
  top: 100px;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  color: black;
  border: 8px solid #000;
}
.circleK5a {
  position: absolute;
  left: 33px;
  top: 37px;
  background: gold;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  border: 3px solid brown;
}

.circleK5b {
  position: absolute;
  left: 39px;
  top: 43px;
  background: goldenrod;
  border-radius: 50%;
  width: 23px;
  height: 23px;
  border: 3px solid goldenrod;
}
/* -------------------------------------------------------------------------------------------------------------- */
.circleK6 {
  position: absolute;
  background: gold;
  padding: 5px;
  left: 43px;
  top: 218px;
  background: gold;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  color: black;
  border: 8px solid #000;
}
.circleK6a {
  position: absolute;
  left: 33px;
  top: 37px;
  background: gold;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  border: 3px solid brown;
}

.circleK6b {
  position: absolute;
  left: 39px;
  top: 43px;
  background: goldenrod;
  border-radius: 50%;
  width: 23px;
  height: 23px;
  border: 3px solid goldenrod;
}