body {
  font-family: 'VT323', monospace;

}


.intro-text{
    text-align: center;
}

body {
    position: relative; /* allows absolute children to work inside body */
    margin: 0; /* remove default browser margin */
    padding: 0;
  }
  
  .myimage {
    position: fixed;
    top: 120px;  /* distance from top */
    right: 200px; /* distance from right */
    width: 300px;
    height: auto;
  }
  
  .myimage1 {
    position: fixed;
    top: 230px;  /* distance from top */
    right: 500px; /* distance from right */
    width: 600px;
    height: auto;
  }
  
  .myimage2-container {
    position: fixed;
    top: 190px;
    right: 600px;
    width: 150px;
    height: auto;
    cursor: pointer;
}

.myimage2 {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
    display: block;
}

.myimage2-container:hover .myimage2 {
    transform: rotate(-5deg) scale(1.1);
}


.overlay-text {
    position: absolute;
    top: 70px;
    left: 90px;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 3px black;
    font-size: 16px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.myimage2-container:hover .overlay-text {
    opacity: 1;
}

.myimage3 {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
    display: block;
}

.myimage3-container{
    position: fixed;
    top: 170px;
    right: 830px;
    width: 250px;
    height: auto;
    cursor: pointer;
}

.overlay-text1 {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 3px black;
    font-size: 16px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.inner-container:hover .overlay-text1 {
    opacity: 1;
}
.inner-container:hover .myimage3 {
    transform: rotate(-5deg) scale(1.1);
}
.myimage4 {
    width: 50%;
    height: auto;
    transition: transform 0.3s ease;
    display: block;
}

.myimage4-container{
    position: fixed;
    top: 175px;
    right: 650px;
    width: 250px;
    height: auto;
    cursor: pointer;
}

.overlay-text2 {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 3px black;
    font-size: 16px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.inner1-container:hover .overlay-text2 {
    opacity: 1;
}
.inner1-container:hover .myimage4 {
    transform: rotate(-5deg) scale(1.1);
}

.myimage5 {
    width: 50%;
    height: auto;
    transition: transform 0.3s ease;
    display: block;
}
.myimage5-container{
    position: fixed;
    top: 60px;
    right: 230px;
    width: 250px;
    height: auto;
    cursor: pointer;
}
.overlay-text3 {
    position: absolute;
    top: 35%;
    left: 25%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 3px black;
    font-size: 16px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.inner2-container:hover .overlay-text3 {
    opacity: 1;
}
.inner2-container:hover .myimage5 {
    transform: rotate(-5deg) scale(1.1);
}

.myimage6 {
    width: 50%;
    height: auto;
    transition: transform 0.3s ease;
    display: block;
}
.myimage6-container{
    position: fixed;
    top: 145px;
    right: 148px;
    width: 220px;
    height: auto;
    cursor: pointer;
}
.overlay-text4 {
    position: absolute;
    top: 35%;
    left: 25%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 3px black;
    font-size: 16px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.inner3-container:hover .overlay-text4 {
    opacity: 1;
}
.inner3-container:hover .myimage6 {
    transform: rotate(5deg) scale(1.2);
}
.myimage7 {
    width: 70%;
    height: auto;
    transition: transform 0.2s ease;
    display: block;
}
.myimage7-container{
    position: fixed;
    top: 140px;
    right: 1000px;
    width: 360px;
    height: auto;
    cursor: pointer;
}
.overlay-text5 {
    position: absolute;
    top: 35%;
    left: 25%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 3px black;
    font-size: 16px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.inner4-container:hover .overlay-text5 {
    opacity: 1;
}
.inner4-container:hover .myimage7 {
    transform: rotate(2deg) scale(1.1);
}