/* made by studying themesCode tutorials, Viktor Tibay's code, w3 school, and more */

html
{
  width: 100%;
  height: 100%;
                }
body {
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;

}

.Frame {
	width: 1270px;
	margin: 0 auto;
	border: 2px solid black;
}

.transform {
  width: 500px;
  height: 700px;
  margin-top: 40px;
  position: relative;
}

.transform img{
  width: 100%;
  height: 100;
}

.top {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: all 0.7s ease;
}

.top:hover {
  opacity: 1;
}

#loadEr {
position: fixed;
top: 10%;
left: 10%;
transform: translate(-50%, -50%);
color: limegreen;
font-family: 'MS Gothic', Georgia, 'Times New Roman', Times, serif;
font-size: 28px;
background: rgba(0, 0, 0, 0.7);
padding: 20px 30px;
border-radius: 8px;
z-index: 9999;
display: inline-flex;
}

.dot {
width: 15px;
height: 15px;
background-color: red;
border-radius: 50%;
margin: 0 2px;
animation: blink 1.2s infinite ease-in-out;
}

.dot:nth-child(1) {
  animation-delay: 0s;
}
.dot:nth-child(2) {
  animation-delay: 0.1s;
}
.dot:nth-child(3) {
  animation-delay: 0.2s;
}
@keyframes blink {
  0%, 80%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}