style.css

/* @media min-width: 62em{
 #myVideo {
    display:block;
 }
} */

@font-face {
    font-family: "AvenirNext";
    src: url('data/font/avenir-next-regular.ttf') format("truetype");
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

html, body {
    width:100%;
    height: 100%;
    overflow: hidden;
  }
/*style="width:100%; height:100%; overflow:hidden;"*/
  body {
  margin: 0;
  display: flex;
  /* This centers our sketch horizontally. */
  justify-content: center;

  /* This centers our sketch vertically. */
  align-items: center;
  font-family: "AvenirNext", sans-serif;
}

img{
  display:block;
  width:100%; height:100%;
  object-fit: cover;
}
video{
  width:100%; height:100%;
  object-fit: cover;
}

h1{
    color: #8A4B08;
    font-family: "AvenirNext", sans-serif;
    font-weight: bold;
}
h2{
  color: #8A4B08;
  font-family: "AvenirNext", sans-serif;
  font-weight: bold;
  font-size: 20;
}
p{
  color: #8A4B08;
}
h3{
  color: #8A4B08;
  font-family: "AvenirNext", sans-serif;
  font-weight: bold;
  font-size: 18;
}
a{
color: #8A4B08;
text-decoration: none;
}
.page-container{
  position:fixed;  width:100%; height:100%; top:0; left: 100vw;
  opacity:0; transition:.4s all; text-align:center; align-items:center;justify-content: center;
}
.page-container.active{opacity:1; left:0;}

.round-button {
    position: absolute;
    left: 70%;
    bottom:15%;
    display:block;
    width:50px;
    height:50px;
    line-height:50px;
    border: 0px solid #f5f5f5;
    border-radius: 70%;
    text-align:center;
    text-decoration:none;
    font-size:20px;
    font-weight:bold;
    box-shadow: -3px 3px 13px 2px rgba(0,0,0,0.50);

}
.butt-r1{
  margin-left: -150px;
  background-image: url("data/icon/r1.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #FF5151;

}
.butt-r2{
  background-image: url("data/icon/r2.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #F5A623;
}
.butt-r3{
  margin-left: 150px;
  background-image: url("data/icon/r3.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #A051E5;
}
.round-button:hover {
    opacity: 0.8;
    box-shadow: 0 0 3px gray;

}
#container {
    position: relative;
    top: 5%;
    right: 6%;
}
#resizeWelcome {
  padding-right: 0px;
  float: right;
  max-width: 40%;
  max-height: 40%;
}
.carContainer{
  position: relative;
  top:-45px;
}
#resize {
  left: 0px;
  float: left;
  max-width: 50%;
  max-height: 50%;
}
#resize_2 {
  left: 0px;
  float: left;
  max-width: 30%;
  max-height: 30%;
}
.iconResize {
  position: relative;
  float:center;
  left:42%;
  top:-50px;
  max-width: 15%;
  max-height: 30%;
  border: 10px solid #f5f5f5;
  border-radius: 75%;
}
#icon-r1{
  background-color: #FF5151;
}
#icon-r2{
  background-color: #F5A623;
}
#icon-r3{
  background-color: #A051E5;
}
#curvePage{
  border: 0px solid:red;
  background-color: white;
  border-radius: 100%;
}
.ridepage{
  background:white;
  display: block;
  margin: 0 auto;
  position: absolute;
  width:100%;
  height:70%;
  bottom: 0;
  text-align: center;
  align-items: center;
  border-radius: 15px 15px 0px 0px;
  box-shadow: -3px 3px 13px 2px rgba(0,0,0,0.50);
}
.rideDes{
  position: relative;
  top:-100px;
  border: 0px solid red;
  padding-left : 120px;
  padding-right : 120px;
  padding-bottom: 20px;
  margin: 0;
}
.rectangle {
    display:block;
    position:absolute;
    align-items: center;
    justify-content: center;
    width:95%;
    height:30%;
    margin: 0 auto;
    bottom:0;
    left:0;
    right:0;
    border-radius: 15px 15px 0px 0px;
    background: #FFFFFF;
    box-shadow: -3px 3px 13px 2px rgba(0,0,0,0.50);
}
.rectVideo {
    display:block;
    position:absolute;
    align-items: center;
    justify-content: center;
    width:95%;
    height:15%;
    bottom:0;
    left:0;
    right:0;
    margin: 0 auto;
    border-radius: 15px 15px 0px 0px;
    background: #FFFFFF;
    box-shadow: -3px 3px 13px 2px rgba(0,0,0,0.50);
}
.btn-confirm{
    position: absolute;
    display: block;
    /* width:273px;
    height:77px; */
    bottom:18%;
    right: 0;
    left:0;
    margin: 0 auto;
    width: 160px;
    height: 30px;
    /* background-image: url("data/icon/confirm.png");
    background-repeat: no-repeat; */
    background-color: #8A4B08;
    border-radius: 25px 25px 25px 25px;
    box-shadow: -3px 3px 13px 2px rgba(0,0,0,0.50);
    text-align: center;
    padding-top: 10px;
    color: #FFFFFF;
}
.btn-confirm a{
    font-size: 30;
    font-family: "AvenirNext", sans-serif;
    font-weight: bold;
}

.btn-pay{
  position: absolute;
  display: block;
  bottom: 18%;
  right: 0;
  left: 0;
  margin: 0 auto;
  /* background-image: url(data/icon/confirm.png); */
  max-width: 47%;
  height: 30px;
  color: #FFFFFF;
  background-color: #8A4B08;
  border-radius: 25px 25px 25px 25px;
  box-shadow: -3px 3px 13px 2px rgba(0,0,0,0.50);
  font-style: bold;
  text-align: center;
  padding-top: 6px;
}

.btn-exit{
  text-align: center;
  position: absolute;
  bottom:10%;
  margin: 0;
  right: 0;
  left:0;
  margin: 0 auto;
}
.btn-end{
  text-align: center;
  position: absolute;
  right:10px;
  bottom:10%;
  margin: 0;
}
.btn-restart{
/* position: relative;
text-align: center;
margin: 0 auto; */
    position: absolute;
    bottom: 2%;
    margin: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.resizeRideTitle{
  position: absolute;
  left: 68%;
  bottom: 3%;

}
#rideTitle_1{
  margin-left: -170px;
  max-width: 7%;
  max-height: 7%;
}
#rideTitle_2{
  margin-left: -17px;
  max-width: 7%;
  max-height: 7%;
}
#rideTitle_3{
  margin-left: 130px;
  max-width: 7%;
  max-height: 7%;
}

#myVideo{
  position:absolute;
  display: block;
  top:0;
  left:-10;
  right:-10;
  margin: 0 auto;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;

}
#myVideoCanvas{
    position: absolute;
    /* display: block; */
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
     margin:  auto;
     transform:scale(2);
     width: auto;
     height: auto;
     /*z-index: -100; */
}
#page5{
  margin: 0;
  display: flex;
  width:100%; height:100%;
  object-fit: cover;
  position:absolute;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(-45deg, #F5ECCE, #FF8000, #FF0000, #BCF5A9,#BFFF00);
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
}
.thankPage{
  margin: 0;
  display: flex;
  width:100%; height:100%;
  object-fit: cover;
  position:absolute;
  align-items: center;
  text-align: center;
  justify-content: center;
	color: #FFFFFF;
  background: linear-gradient(-45deg, #F5ECCE, #FF8000, #FF0000, #BCF5A9,#BFFF00);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
}
.thankPage a{
  color: #61380B;
}
.thankPage h1{
  color: #61380B;
}
#rideCost{
  font-family: "AvenirNext", sans-serif;
  font-weight: bold;
  color:#8A4B08;
  font-size: 30;
}
#callnewRide{
  display: block;
  position: absolute;
  width: 300px;
  height: 80px;
  align-items: center;
  justify-content: center;
  text-align: center
  margin: 0 auto;
  padding: 20px;
  border: 0px;
  bottom:
  background-color: #FFFFFF;
  /* border-radius: 25px 25px 25px 25px;
    background: linear-gradient(-45deg,#F5ECCE, #FF8000, #FF0000, #BCF5A9,#BFFF00);
    background-size: 1200% 1200%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite; */
  /* background: #FFFFFF; */
  font-weight: bold;
}
.btn-goHome{
/* position: relative;
text-align: center;
margin: 0 auto; */
    display:block;
    position: absolute;
    bottom: 2%;
    margin: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
}
#timer{
  position: relative;
}

.rectVideo h3{
  position: relative;
  left: -30px;
  top:22px;
}
.centerRect{
  width:50%; height:50%;
  display: flex;
  object-fit: cover;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #FFFFFF;
  border: 0px;
  border-radius: 25px 25px 25px 25px;
  margin: 0 auto;
}
.centerText{
  position:relative;
  display:block;
  align-items: center;
  justify-content: center;
}
.centerText p{
  font-size: 20px;
  margin: 28px;
}
/* display: block;
position: absolute;
border: 2px solid red;
top:-100px;
padding-left : 120px;
padding-right : 120px;
padding-bottom: 20px;
margin: 0; */