* {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
}

body {
          box-sizing: border-box;
          background: linear-gradient(to bottom, #ffea00, #be0300);
          width: 100%;
          height: 100vh;
          overflow: hidden;
          font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial,
                    sans-serif;
}
.container {
          width: 80%;
          height: 100vh;
          margin: 0 auto;
}
.firstRow {
          width: 100%;
          height: 7%;
          text-align: center;
}

.secondRow {
          width: 100%;
          height: 7%;
          font-size: 20px;
}

.thirdRow {
          width: 100%;
          height: 50%;
}

.leftSideOfThirdRow {
          width: 20%;
          height: 100%;
          float: left;
          color: #000;
          font-size: 25px;
          transition: all 0.5s linear;
          text-decoration: underline;
          display: flex;
          align-items: center;
          transform: rotate(-90deg);
}

.leftSideOfThirdRow:hover {
          text-shadow: 3px 3px 5px #000;
}

.centerOfThirdRow {
          width: 60%;
          height: 100%;
          float: left;
          /* background-color: #fff; */
          border-bottom: 1px solid;
}

.topSideOfCenter {
          width: 100%;
          height: calc(50% - 10px);
          margin-bottom: 20px;
          position: relative;
}

.topSideOfCenter #computerChoose {
          width: 150px;
          height: 160px;
          border-radius: 30%;
          position: absolute;
          top: 5px;
          left: 5%;
}

.bottomSideOfCenter {
          width: 100%;
          height: calc(50% - 10px);
          position: relative;
}

.bottomSideOfCenter #userChoose {
          width: 150px;
          height: 160px;
          border-radius: 30%;
          position: absolute;
          bottom: 5px;
          right: 5%;
}

.rightSideOfThirdRow {
          width: 20%;
          height: 100%;
          float: left;
          transform: rotate(90deg);
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 25px;
          /* position: absolute; */
          top: 200px;
          right: -500px;
}

h3 {
          margin: 0;
}

.myButton {
          padding: 20px 55px;
          background: linear-gradient(to bottom, #be0300, #ffea00);
          border-radius: 20px;
          color: #fff;
          font-weight: 700;
          border: 1px solid #be0300;
          position: absolute;
          top: -50px;
          left: 35%;
          /* transform: translateX(-50%); */
          font-size: 30px;
          outline: none;
          cursor: pointer;
          box-shadow: 0px 10px 10px;
          background-repeat: no-repeat;
          background-size: cover;
          transition: all 0.1s linear;
}

.myButton:active {
          transform: translateX(10px);
          transform: translateY(10px);
          box-shadow: 1px 5px 15px;
          background: linear-gradient(to bottom, #ffea00, #be0300);
}

.fourthRow {
          width: 100%;
          height: 26%;
}

.contentOfFourthRow {
          width: 60%;
          height: 100%;
          margin: 0 auto;
}

.fivethRow {
          width: 100%;
          height: 7%;
          font-size: 20px;
          text-align: right;
}

.contentOfFourthRow {
          display: flex;
          align-items: center;
          justify-content: space-around;
}

.textYourChoose {
          float: left;
          font-size: 25px;
}

.row5Image {
          width: 120px;
          height: 130px;
          border-radius: 30%;
          transition: all 0.3s linear;
          cursor: pointer;
}

.row5Image:hover {
          transform: translateY(-10px);
}

#computerBall {
          color: #ff0000;
          font-size: 120%;
}
#userBall {
          color: lightgreen;
          font-size: 120%;
}

hr {
          border: none;
          border-top: 1px dashed #fff;
          margin: 0;
}

#result {
          width: 400px;
          height: 200px;
          text-align: center;
          transition: all 0.5s linear;
}

