body {
    background-color : lightblue;
    background-image : linear-gradient(180deg, black, purple, blueviolet, blue, lightblue);
    background-repeat : no-repeat;
    margin : auto;
    }
    #wrapper {
    margin : auto;
   /* width: auto;*/
    background-color : gray;
    border-radius : 15px;
    }
    #logo {
    background-color : aliceblue;
    border-radius : 9px;
    padding : 15px;
    margin : 25px;
    }
    h2 {
    color : orangered;
    font-family : Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    }
    nav {
    background-color : seashell;
    border-radius : 9px;
    }
    #paragraph {
    text-align : center;
    margin-left : 30px;
    }
    .title {
    /*float : left;*/
    margin : 5px;
    padding : 25px;
    }
    #different_color {
    background-color : yellow;
    }
    p {
    margin-inline-start : 2px;
    margin-inline-end : 2px;
    }
    .hyperlinks {
   /* float : right;
    width : 500px;*/
    margin : 3px;
    padding-right : 100px;
    }
    .product_box {
    background-color : blueviolet;
    padding : 10px;
    /*float : left;
    width : 200px;*/
    margin : 5px;
    }
    footer {
    text-align : left;
    margin : 15px;
    }
    /* For mobile phone*/
[class*="col"]{
    width: 100%;
}
.hyperlinks{
    margin-right: 175px;

}
nav li{
    list-style-type: none;
}
@media only screen and (min-width:700px) {
    /* For tablets: */
    h1 {
        display : flex;
        flex-direction : row;
        flex-wrap : wrap;
        }
        #logo{
        display : flex;
        flex-wrap : nowrap;
        }
        nav {
        flex : 1;
        }
        main {
        flex : 2;
        }
        nav li {
        border-radius : 10px;
        /*float : left;*/
        padding : 10px;
        border : none;
        margin-bottom : 11px;
        text-align : center;
        list-style-type : none;
        margin-left : 0;
       width : 200px;
        }
        .hyperlinks{
            margin-right: 400px;
        }
        }
        @media screen and (min-width:1000px){
        /* For desktop */
            main {
            margin-left : 9px;
            }
            footer {
            text-align : left;
            margin : 15px;
            clear : both;
            }
            #wrapper {
            width : 1000px;
            margin : auto;
            background-color : gray;
            border-radius : 15px;
            }
            nav li {
            border-radius : 10px;
            float : left;
            border : none;
            margin-bottom : 11px;
            text-align : center;
            list-style-type : circle;
            margin-left : 0;
            width : 200px;
            }
            nav {
            background-color : seashell;
            border-radius : 9px;
            float : left;
            }
        
            nav li{
                list-style-type: none;
            }
            .hyperlinks{
                margin-right: 670px;

            }
        }