/* CSS Rules for Odin-recipe website */

    #background-home { 
    Background-image: URL(../images/background-main.jpg); 
    Background-repeat: no-repeat; 
    Background-attachment: fixed; 
    Background-size: cover; 
    } 
    
    #background-recipe { 
    Background-image: url(../images/background-image.webp); 
    Background-repeat:no-repeat; 
    Background-attachment:fixed; 
    Background-size:cover; 
    }

    .body {
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        text-align: center;
        font-size: medium;
        color: black;
    }

    .img {
        border: 2.5px solid black;
    }

    .header, 
    .header-main { 
    Font-size: x-large; 
    } 
    
     .header { 
    Font-size: large; 
    Font-weight:bold; 
    } 

    .list {
        display: inline block;
        text-align: left;
    }
    
    .section { 
    Word-wrap: break-word; 
    Width: 700px ; 
    }

    .section-extra {
        width:400px;
    }

    Div, .section { 
    Box-sizing: border-box;
    background-color: rgb(153,255,153); 
    margin: 20px auto;
    Height: auto; 
    Padding: 20px; 
    Border: 5px solid black;
    border-radius: 5px; 
    }

    ol {counter-reset: item;}
ol li {display: block;}
ol li:before {content: counter(item) ". "; counter-increment: item; font-weight: bold;}

    .button {
        background-color: #4CAF50;
        border: 2px solid black;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 12px;
      }

    .nav { 
    Color: solid green; 
    } 
    
     .nav, 
    .odin { 
    Box-sizing: border-box;
    background-color: rgb(255,166,177); 
    margin: 10px auto;
    Width: 300px; 
    Height: auto; 
    Padding: 20px; 
    Border: 10px solid blue; 
    }