#div1 {
  width: 600px;
  height: 670px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
.textProcedure{
    font-size: larger;
    color: #a94442;
    font-weight: bold;
    }
.frq{
	    font-size: 21px;
    color: #a94442;
        padding: 2px;
    border-style: solid;
}


#modelTitle{
	background-color: #244f56;
    padding: 7px;
    color: #fff;
    font-size: 17px;
    margin:10px;}
#imgb1{
	background-image: url("images/b1.jpg");
	 background-color: #cccccc;
}
#soundP{
	background-color: #343a40;
   
    color: #fff;
    margin:4px;
        padding-bottom: 15px;
        padding-top: 15px;
}
.btn1 {
        margin-left:10px;
        margin-right: 10px;
        margin-top:7px;
        float:right;
        margin-bottom:10px;
        padding: 7px; 
        border:none; 
        border-radius: 5px;
        }

#errorMsg,#mainMSgError{
font-size: large;
    color: red;
    background: antiquewhite;
    padding: 10px;
        margin-top: 13px;
    
    }
#div1 {
  width: 600px;
  height: 670px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
#timeAnswer,#freqAnswer,#convertFreq,#freqAnswer,#soundAnswer
{
			background-color: #132d50;
			color:#fff;
			padding:15px;
			margin: 10px;
			
}
.note12{
	float: left;
    color: #8b1111;
    font-size: large;
    background-color: cornsilk;
    padding: 5px 20px;
    border-style: outset;
    border-color: #d36666;
    border-radius: 20px;
}
#imgb1{
	background-image: url("images/b1.jpg");
	 background-color: #cccccc;
}
 
.QueHead{font-size: 18px;
      font-size: 22px;
    font-weight: bold;
    color: #fff;
    background-color: #333;
    margin: 5px 0;
    border-radius: 10px;
    padding: 10px 0;
    font-family: Cambria, Georgia, serif;
	}

#questionDiv .queTitle {
	padding-left: 20px;
    font-size: 18px;
    font-weight: bold;
    margin: 15px 0;
}

#centerText1,#centerText2{
	    font-size: 20px;
}

#testSubmit:hover{
	background-color: #05aaa5
}

#testSubmit:active {
	background-color: #05aaa5;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
}
footer {
	background: rgb(125,176,169);
background: linear-gradient(90deg, rgba(125,176,169,1) 0%, rgba(78,109,114,1) 31%, rgba(33,44,62,1) 100%);
	padding: 2px 10px;
	border-top: 5px solid #2a333c;
	text-align: center;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}
.button1 {
  background-color: #004A7F;
  -webkit-border-radius: 10px;
  border-radius: 7px;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 15px;
 padding: 7px 10px; 
     margin-top: 4px;
  text-align: center;
  text-decoration: none;
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}
@-webkit-keyframes glowing {
  0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -webkit-box-shadow: 0 0 20px #FF0000; }
  100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
}

@-moz-keyframes glowing {
  0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
}

@-o-keyframes glowing {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}

@keyframes glowing {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}
 /* Style for the blinking note */
    .blinking-note {
      position: fixed;
       z-index: 9999;
      bottom: 5px;
      right: 20px;
      font-size: 18px;
      font-weight: bold;
      color: #ff0000;
      background-color: #f2e6e1;
      padding: 10px;
      border: 2px solid #ff0000;
      border-radius: 1px;
      animation: blink 1s steps(5, start) infinite;
      margin-bottom:30px;
    }

    /* Blinking animation */
    @keyframes blink {
      50% {
        opacity: 0;
      }
    }