body {
     background-color: #000;
     color: #fff;
     font-family: 'Prompt', sans-serif;
}
 h1 {
     text-align: center;
     margin-top: 30px;
}
/* home page */
 .homepage {
/*     background-image: url("swirl.png");*/
     background-color: #000;
     background-size: cover;
     background-repeat: no-repeat;
     display: grid;
     grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}
 .main-navigation {
     background-color: #fff;
}
 .main-navigation a {
     float: right;
     color: white;
     background: #fff;
     text-decoration: none;
     padding: 12px 30px;
     border: 1px solid #fff;
     transition: background 250ms ease-in-out;
}
 .main-navigation a:hover, .main-navigation a:focus {
     background: #000;
}
/*the first time*/
 .content {
     max-width: 100%;
     background-image: url("tin.png");
     background-size: cover;
     font-size: 1.2em;
     overflow-x: hidden;
}
 #index {
     width: 100%;
}
 #jesus {
     margin-left: 69%;
 }
 #typewriter-text {
     display: block;
     overflow: hidden;
     white-space: nowrap;
     margin: 0;
     animation: typewriter 6s steps(50) 1;
}
 #typewriter-container {
     line-height: 1.4;
     color: #fff;
     height: 5%;
     letter-spacing: 0.15em;
     position: absolute;
     width: 100%;
     display: flex;
     align-items: center;
}

 @keyframes typewriter {
     from {
         width: 0;
    }
     to {
         width: 100%;
    }
}
 #rewired {
     margin-left: 70%;
}
 #typewriter-text a:link {
     color: #fff;
}
 #typewriter-text a:link {
     color: #fff;
}
 #typewriter-text a:hover {
     color: #fff;
}
 #typewriter-text a:visited {
     color: #fff;
}

/*page 2*/
 .content2 {
     font-size: 20px;
     line-height: 2;
     text-orientation: upright;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     max-width: 100%;
     box-sizing: border-box;
     background-image: url("eye.gif");
}
 #know {
     margin-left: 39%;
     margin-top: 23%;
}
 #tell {
     margin-top: 69%;
     margin-left: 33%;
}
 #imageText {
     margin-top: 134%;
     margin-bottom: 0;
     margin-left: 46%;
}
 #enlarged, #medium, #toggleImage {
     width: 100%;
     min-width: 100%;
     height: 264px;
}
 #enlarged {
     margin-top: 0;
}
 #medium {
     margin-top: 53%;
}
 #lie, #image2, #image3 {
     text-align: center;
}
 #toggleImage {
     margin-top: 105%;
}
 #imageText a {
     color: #fafa83;
     text-decoration: none;
     border-bottom: 1px solid #fafa83;
     transition: border-color 0.3s;
     font-size: 1.2em;
}
 #imageText a:hover {
     border-color: #fafa83;
}
 #imageText a:visited {
     color: #fafa83;
}
/* Page 3 */
 #page3 {
     background-image: url("static.gif");
}
 #page3po {
     display: grid;
     grid-template-columns: 1fr;
     font-family: monospace;
}
 #wrapper1 {
   max-width: 50%;
    border: 5px solid;
    margin: auto;
    height: 1350px; /* Set a fixed height */
    overflow: hidden; /* Hide the overflow */
    padding: 1%;
    background-color: #000000f0;


}
 #short {
     font-size: 1.5rem;
    line-height: 2;
    /* background-color: #000000e8; */
    /* padding-left: 3%; */
    /* padding-top: 1%; */
    /* width: 90%; */
    margin-left: 3%;
     opacity: 0;
    transition: opacity 3s ease; /* Add a transition for opacity */
/*     transition: opacity 3s ease; /* Add a transition for opacity */*/

}
#short2 {
    font-size: 1.5rem;
    line-height: 2;
    text-align: right;
    /* background-color: #000000e8; */
    /* width: 90%; */
    margin-right: 3%;
     opacity: 0;
    transition: opacity 3s ease; /* Add a transition for opacity */
}

#short:hover + #short2:hover {
      display: block;
     opacity: 1;
     transition: opacity 3s ease; /* Add a transition for opacity */

}

    

}
 #short2 a {
     color: #fff;
     text-decoration: none;
     border-bottom: 1px solid #fff;
     transition: border-color 0.3s;
}
 #short2 a:hover {
     border-color: #fff;
}
 #short2 a:visited {
     color: #fff;
}
 #sub a {
     color: #00ff00;
     text-decoration: none;
     border-bottom: 1px solid #00ff00;
     transition: border-color 0.3s;
}
 #sub a:hover {
     border-color: #00ff00;
}
 #sub a:visited {
     color: #00ff00;
}
/*Page 5*/
 #road {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
}
 #dagger{
     background-image: url("slice12.jpg");
     background-size: cover;
     background-repeat: no-repeat;
     width:100%;
}
 #dagger2 {
     background-image: url("slice12.jpg");
     background-size: cover;
     background-repeat: no-repeat;
     width: 100%;
}
 #away {
     background-image: url("slice123.jpg");
     background-size: cover;
     background-repeat: no-repeat;
     text-align: center;
     color: #badecd;
     font-size: 1.5rem;
     font-weight: 800;
     font-family: 'Orbitron', sans-serif;
     line-height: 1.6;
     padding-left: 7%;
     padding-right: 7%;
     margin-top: 0;
}
 #linkanywhere a:link {
     color: #badecd;
}
 #linkanywhere a:hover {
     color: #badecd;
}
 #linkanywhere a:visited {
     color: #badecd;
}
/*Page 6*/
 #wrapper {
     width: 100%;
}
 #congrats {
     background-image: url("reward.gif");
     color: #000;
     margin-top: 0;
     padding: 3%;
     font-size: 3.4rem;
}
 #page6 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     font-family: monospace;
}
 #rewardsystem {
     width: 72%;
     font-size: 1.2rem;
     margin-left: 2%;
     line-height: 2;
}
 #mouse {
     width: 88%;
     margin-top: 3%;
}
 #rewardsystem a:link {
     color: #fff;
}
 #rewardsystem a:hover {
     color: #fff;
}
 #rewardsystem a:visited {
     color: #fff;
}
/*about.html/page4*/
 #page4 {
    text-align: left;
    background-image: url("redsquig.jpg");
}
 #page4wrapper {
    width: 90%;
    border: 5px solid;
    margin: auto;
    width: 50%;
    padding: 2%;
    background-color: #000;
}
 #about {
    margin: 1%;
 }
 #author {
    font-size: 1.1em;
}
 #backto a {
     color: #fff;
}
 #backto a:hover {
     color: #fff;
}
 #backto a:visited {
     color: #fff;
}