body{
    background-color: lightskyblue;
    width: 100%;
    /* height: 700px; */
    margin: 0;
}

/*  section 1 */
.page-1 {
    /* padding: 1%; */
    /* margin: 4%; */
    width: 100%;
    height: 500px;
    background-color:hotpink;
}

.hero-container {
    position: relative;
    background-image: url(../public/valley.jpg);
    /* display: flex; */
    /* height: 1000px; */
    /* width: 100%; */
    height: 100%;
    background-position: center;
    /* border: 2px solid white; */
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid rgb(47, 179, 255);
    width: 40%;
    height: 25%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.45);
    /* opacity: 0.45; */
    top: 70%;
    left: 55%;
}

.hero-box p {
 color: aliceblue;   
}
.hero-box a {
    color: rgb(133, 193, 233);   
}
.hero-box button {
    margin-top: 2%;
}

/*  section 2 */

.page-2 {
    /* display: flex; */
    width: 100%;
    height: 900px;
    /* padding-top: 20%; */
    /* padding-left: 40%; */
    /* align-items: center; */
    /* max-height: 290px; */
    background-color: palegreen;
    background-color: rgba(43, 2, 2, 0.45);
    background-image: url(../public/tower.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 2%;
    /* position: relative; */
    /* height: 600px; note: percent only works if body has a px height declared */
}

/* .clock img {
    display: block;
    max-width:430px;
    max-height:305px;
    width: auto;
    height: 100%;
} */

/* .clock {
    width: 50%;
    height: 100%;
    background-image: url(clockimage.png);
    background-size: 94%;
    background-position-x: center;
    background-repeat: no-repeat;
    padding-top: 17.7%;
    position:relative;
} */

.clock {
    border-radius: 50%;
    background: rgb(231, 181, 14) url(../public/clockimage.png);
    background-size: 88%;
    height: 23em;
    width: 23em;
    margin-left: 10%;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: center;
    position: relative;
}
  .hour-container, .min-container {
    /* background-color: rgba(43, 2, 2, 0.45); */
    position: absolute;
    top: 45%;
    right: 0;
    bottom: 0;
    left: 20%;
    height: 10%;
    width: 60%;
  }

.hour-hand {
    /* background-color: rgba(43, 2, 2, 0.45); */
    position: absolute;
    background-image: url(https://gabrielspinoza.github.io/SE-Bootcamp-2022/assignment-3/img/hand.png);
    align-items: center;
    background-position-x: center;
    height: 100%;
    width: 35%;
    /* top: -12%; */
    left: 50%;
    background-size: cover;
}

.min-hand {
    /* background-color: rgba(43, 2, 2, 0.45); */
    position: absolute;
    background-image: url(https://gabrielspinoza.github.io/SE-Bootcamp-2022/assignment-3/img/hand.png);
    align-items: center;
    background-position-x: center;
    height: 133%;
    width: 50%;
    top: -27%;
    left: 50%;
    background-size: cover;
}

.hour-container { animation: clock-hour-animation 10s infinite; }

.min-container { animation: clock-min-animation 10s infinite; }

@keyframes clock-hour-animation {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(30deg);}
}

@keyframes clock-min-animation {
    0% {transform: rotate(-90deg);}
    100% {transform: rotate(270deg);}
}