style.css

.center-text {
  text-align:center;
  font-size: 90%;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.block-text2 {
  font-size: 89%;
  width:100%;
  height 100vw;
  text-align: justify;
  margin: 0 auto;
  margin-bottom: 1em;
  line-height: 120%;
}

.practiceText {
 width: 85vw;
 height: 10vw;
 position: absolute;
 top: 1%;
 left: 2.5%;
 margin-right:50%;
 transform: translate(0%,0%);
 z-index: 2;
}

.cardbox {
 width:50vw;
 height: 0vw;
 position:absolute;
 top:20%;
 left:50%;
 margin-right:50%;
 transform: translate(-47%,0%);
 background-color: white;
}

.cct-box {
 width:87.5vw;
 height: 92vh;
 position: fixed;
 top:10%;
 left:0%;
 margin-right:0%;
 transform: translate(7%,2.5%);
}

.cct-box2 {
 width:87.5vw;
 height: 78vh;
 position: fixed;
 top:15%;
 left:0%;
 margin-right:0%;
 transform: translate(7%,2.5%);
}

.titleBigBox {
	width: 80vw;
	height: 10vw;
	position: absolute;
	top: 0%;
	left: 4.5%;
	margin-right:50%;
	transform: translate(0%,0%);
	background-color: white;
}

.square {
   float:left;
   position: relative;
   width: 10%;
   padding-bottom : %; /* = width for a 1:1 aspect ratio */
   margin:1%;
   overflow:hidden;
   color: #fff;
}

.card_image {
   height: 6vw;
}



.titleboxLeft {
  width:16vw;
  height: 2vw;
  position:absolute;
  top:10%;
  left:6%;
  margin-right:-50%;
  transform: translate(0%,0%);
  border-style: solid;
  border-color: black;
}

.titleboxLeft1 {
  width:15vw;
  height: 2vw;
  position:absolute;
  top:40%;
  left:9%;
  margin-right:-50%;
  transform: translate(0%,0%);
  border-style: solid;
  border-color: black;
}

.titleboxRight {
  width:16vw;
  height: 2vw;
  position:absolute;
  top:10%;
  left:75%;
  margin-right:-50%;
  transform: translate(0%,0%);
  border-style: solid;
  border-color: black;
}

.titleboxRight1 {
  width:15vw;
  height: 2vw;
  position:absolute;
  top:40%;
  left:72%;
  margin-right:-50%;
  transform: translate(0%,0%);
  border-style: solid;
  border-color: black;
}



.titlebox {
  width:30vw;
  height: 3vw;
  position:absolute;
  top:10%;
  left:50%;
  margin-right:-50%;
  transform: translate(-50%,0%);
}


.titleboxMiddle1 {
  width:15vw;
  height: 2vw;
  position:absolute;
  top:40%;
  left:50%;
  margin-right:-50%;
  transform: translate(-50%,0%);
  border-style: solid;
  border-color: black;
}

.buttonbox {
  width:32vw;
  height: 2vw;
  position:absolute;
  top:65%;
  left:50%;
  margin-right:-50%;
  transform: translate(-50%,0%);
  border-style: solid;
  border-color: white;
}

.buttonbox2 {
  width:7vw;
  height: 2vw;
  position:absolute;
  top:65%;
  left:65%;
  margin-right:-50%;
  transform: translate(45%,0%);
  border-style: solid;
  border-color: white;
}

.CCT-btn {
  font-size:16px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 0px 0px 0px 0px;
  margin: 0px 2px;
  color: white;
  background-color:cornflowerblue;
  cursor: pointer;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  height: 100%;
  width: 32%;
}

.CCT-btn:hover {
  border-color:#999;
  background-color: darkblue;
}

.CCT-btn:disabled {
  background-color: #8ea0c2;
}

#instructButton {
  width: 100%;
}