body {
        font-family: Roboto;  
        background-color: rgb(241, 246, 248);

}


.container {
    max-width: 700px;
    margin: 100px auto;   
} 

main {
    margin-top: 50px;
}

h1 {font-size: 195%;}

h2 {font-size: 165%;}

h1, h2 {
    margin-top: 28px;
    font-weight: 400;
} 

h3 {
    font-weight: 500;
}

p {
    line-height: 160%;    
} 

ul {
    list-style: none; 
    margin-left: 20px; 
    padding-left: 0px;
} 

ul li {
    margin-top: 10px;
} 


a {
    text-decoration-line: none;
    }

a:visited {
    color: rgb(43, 43, 224);
}    

a:hover {

    text-decoration-line: underline;
}

hr {
    width: 50%; 
    margin-top: 50px;
} 

.tmp01 {
            width: 330px;
            height: 275px;
            margin-left: 20px;
            
              /* border: 1px dotted black;  */
            display: inline-block;
            vertical-align: top;
}

.tmp02 { 
    font-size: 150%;
    font-weight: 400;
    margin: 10px 0px 0px 0px;
    padding: 0%;
}

.tmp03 { 
    
    font-size: 90%;
    font-weight: 400;
    margin: -8px 0px 0px 0px;
    padding: 0%;
}

.tmp04 {
    font-size: 90%;    
    line-height: 130%;
} 

.tmp05 {
    font-size: 130%;
    font-weight: 500;
    margin: 30px 0 0 0;
    padding: 0;
} 

.tmp06 {
    font-size: 100%;
    font-weight: 400; 
    margin: -5px 0 0 0;
    padding: 0;
}


.tmp07 {
    font-size: 125%;
    font-weight: 500; 
    margin: 10px 0 0 0;
    padding: 0;
}

.tmp08 {
    font-size: 115%;
    font-weight: 400; 
    margin: 0;
    padding: 0;
}

.hr { /*highlight red*/
        background-color: rgb(250, 225, 225);  
}

.hy { /*highligh yellow*/
        background-color: rgb(250, 250, 175);
}