body  {
background-color: #fff;
margin: 0;/* 0 negative space around the outside of the body */
padding: 0;  /* 0 negative space around the inside of the body */
font-size:90%;/*ADDED*/
width:95%;
font-family: Helvetica;
/*color:red; THIS MAKES THE TITLE RED*/
}

.gwyrdd{
font-weight:300;
margin:10px 0px 0px 10px;
color:gray;
}

.orEnter{
font-size:10px;
color:gray;
display:none;
}

.hebAngh{
/*font-size: 37px;*/
font-size:16px;
font-weight:400;
margin:10px 0px 0px 10px;
text-align:center;
}

.tudDwy{
font-size:1.2rem;
margin:10px 10px 0px 10px;
color:#666;
}

.hl{
font-weight:500;
background-color:yellow;
}

.hebAngh{
font-size:1rem;
font-weight:400;
margin:10px 0px 0px 10px;
text-align:left;
}

.oDan{
text-decoration:underline;
}

#main-content{
position:relative;
margin:0;
padding:0px 0px 0px 10px;
width:auto;
}


#bwrdd{
position:relative;
top:10px;
padding-bottom:1rem;
}

#bwrdd td{
font-size:1.2rem;
padding-left:0.9rem;
}

#rdech {
position: relative;
display:block;
background-color: #fff;
color: #000;
font-size: 1.1rem;
margin:5px 0px 10px 0px;
}

#sut {
-webkit-tap-highlight-color:rgba(0,0,0,0); 
/*REMOVES THE HIGHLIGHTING THAT PRECEDES THE ONCLICK EVENT AND SPEEDS UP THE PROCESS, NOT THAT IT IS CRUCIAL FOR MOST EXERCISES. IN GAMES IT CAUSES A FLICKERING EFFECT SO THIS STYLE CALL MIGHT BE USEFUL IN THESE CASES*/
}


#sut a{
color:silver;
cursor:pointer;
-webkit-tap-highlight-color:rgba(0,0,0,0); 
/*REMOVES THE HIGHLIGHTING THAT PRECEDES THE ONCLICK EVENT AND SPEEDS UP THE PROCESS, NOT THAT IT IS CRUCIAL FOR MOST EXERCISES. IN GAMES IT CAUSES A FLICKERING EFFECT SO THIS STYLE CALL MIGHT BE USEFUL IN THESE CASES*/
}

#modal {
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
}

#modalMask {
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    background-color: #eee;
    z-index: 1000;
    opacity: 0.9;
    filter:alpha(opacity=90);
    -moz-opacity: 0.9;
}

#modalContent {
    position: relative;
    width:270px;
    margin: 15px auto;
    padding:5px 10px 10px 10px;
    background-color: #fff;
    border:1px solid #000;
    text-align:justify;
    z-index: 9999;
}

#teitl {
position:relative;
top:20px;
font-size:1.5rem;
font-weight:300;
color:#03F;
margin:8px 0px 8px 0px;
display:inherit;
}

#ndech {
position:relative;
top:20px;
font-size:1.3rem;
font-weight:300;
color:blue;
margin:8px 0px 8px 0px;
display:inherit;
cursor:pointer;
-webkit-tap-highlight-color:rgba(0,0,0,0); 
/*REMOVES THE HIGHLIGHTING THAT PRECEDES THE ONCLICK EVENT AND SPEEDS UP THE PROCESS, NOT THAT IT IS CRUCIAL FOR MOST EXERCISES. IN GAMES IT CAUSES A FLICKERING EFFECT SO THIS STYLE CALL MIGHT BE USEFUL IN THESE CASES*/
}

#r1 {
position: relative;
display: none;
padding: 0;
}

#r11 {
position: relative;
display: none;
padding: 0;
}


#cw1{
position:relative;
display:inline-block;/*IT MIGHT HAVE TO BE NONE DEPENDING ON JS AND WHAT IS SUPPOSED TO APPEAR AND ADD INLINE-BLOCK IN JS*/
left: 0px;
font-size:1rem;
font-weight:600;
color:black;
/*padding-right:15px;
padding-top:20px;*/
}

#result{
position:relative;
display:inherit;/*IT MIGHT HAVE TO BE NONE DEPENDING ON JS AND WHAT IS SUPPOSED TO APPEAR*/
color:blue;
padding-left:20px;
padding-right:20px;
}




#userInput{
position:relative;
display:block;/*IT MIGHT HAVE TO BE NONE DEPENDING ON JS AND WHAT IS SUPPOSED TO APPEAR*/
top:0px;
left: 30px;
font-size:1.2rem;
font-weight:600;
color:black;
display:block;
padding-right:15px;
padding-top:0px;
}


#fb{
position:relative;
display:inherit;
font-size:1rem;
color:#900;
width:inherit;
padding-top:0px;
}

#fb strong{
color:blue;
}

#fb u{
text-decoration:line-through;
color:red;
}

#n1 {
position:relative;
/*top:30px;*/
font-size:25px;
font-weight
:600;
color:blue;
display:none;
text-align:center;
/*padding-top:20px;*/
cursor:pointer;
-webkit-tap-highlight-color:rgba(0,0,0,0); 
/*REMOVES THE HIGHLIGHTING THAT PRECEDES THE ONCLICK EVENT AND SPEEDS UP THE PROCESS, NOT THAT IT IS CRUCIAL FOR MOST EXERCISES. IN GAMES IT CAUSES A FLICKERING EFFECT SO THIS STYLE CALL MIGHT BE USEFUL IN THESE CASES*/
}

#dangSgor{
padding-top:1.5rem;
padding-left:1.3rem; 
font-size:1.2rem;
}

#eto{
color:blue;
font-size:1.2rem;
padding-top:1.5rem;
padding-left:2rem;
}

#adref{
font-size:1.2rem;
padding-top:1.5rem;
padding-left:2rem;
}

/*********************************DT*****************************************/

@media all and (min-width: 720px){

body  {
font-size:90%;/*ADDED*/
max-width:1000px;/*CADW O YN GUL AR SGRIN MAWR*/
margin:0 auto;
line-height:1.75rem;
font-weight:400;
margin-left:15rem;
}

.hebAngh{
/*font-size: 37px;*/
font-size:2rem;
margin:10px 10px 0px 10px;
}

.tudDwy{
font-size:2rem;
margin:10px 10px 0px 10px;
}

.orEnter{
display:block;
}

#bwrdd td{
font-size:1.6rem;
padding-left:2rem;
top:30px;
padding-bottom:2rem;
}

#teitl{
top:0px;
font-size:2.2rem;
}

#sut a{
top:60px;
left:150px;
font-size:1.7rem;
}

#ndech {
top:100px;
font-size:2rem;
}

#ndech2{
top:140px;
font-size:2rem;
}

#cw1{
width:95%;
text-align:left;
top:30px;
margin-bottom:3rem;
font-size:2rem;
line-height:2.5rem;
color:black;
/*border:2px #6C0;*/
}

#userInput{
top:120px;
text-align:left;
margin-bottom:20px;
font-size:1.2rem;
color:blue;
/*border:2px #6C0;*/
/*border:#303 dashed;*/
padding-top:20px;
}

#fb{
top:70px;
left:23px;
font-size:2rem;
padding:25px 5px 5px 5px;
}

#n1 {
top:2rem;
font-size:2rem;
font-weight:600;
padding-top:40px;
}

#dangSgor{
padding-top:3rem;
padding-left:3rem; 
font-size:2rem;
}

#eto{
color:blue;
padding-top:3rem;
padding-left:3rem; 
font-size:2rem;
}

#adref{
padding-top:3rem;
padding-left:3rem; 
font-size:2rem;
}

}/*CAU MQ*/