/* generic page styles */

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

body {
    background-color:rgb(154, 218, 163);color:crimson
}

/* 1st BUTTON*/
#s1_bgcolor {
    background-color:white;padding: 10px; font-weight: bold; text-align: center;
}

#s1_bgcolor:hover{background-color: black; color:white;}


/* 2nd button*/
#s2_year {
    background-color:white;padding: 10px; font-weight: bold; text-align: center;
}

#s2_year:hover{background-color: black; color:white;}

/*3rd button*/
#s3_joke{
    background-color:white;padding: 10px; font-weight: bold; text-align: center;
}
    
#s3_joke:hover{background-color: black; color:white;}


section#main{
    display: flex; flex-flow: row wrap;
    justify-content: center;
}
section#main article{
    flex: 0 0 40%;
    background-color: midnightblue; color: #eee;
    margin:24px; padding: 20px; text-align: center;
}

article h2 {
    text-align: center; color: rgb(154, 218, 163);
}

#heading { color: midnightblue; font-size: 35px;}

nav {
    border-style: outset; padding:10px;border-width: 10px; text-align: center;
}

#c {color:red}
#o{color:skyblue}
#l{color: yellow;}
#o2{color:hotpink;}
#r{color: green;}