:root {
    --black: #000;
    --white: #fff;
    --light-grey: #d3d3d3;
    --dark-grey: #433f3f;
    --bg: #abc;
    --content-bg: #f7dfec; 
    --nav-hover: #F2C9E0;
    --nav-txt: #000;
    --section-bg: #ccd6e0;
    --section-border: #D96690;
    --img-border: #F28DB2;
}

body {
    font-family:sans-serif ;
    background: var(--bg);
}

/* structure */ 
#content {
    background: var(--content-bg); 
    border: 4px solid var(--section-border);
    padding: 5px;
    width: 80%; /* width of div across page*/
    margin: auto; /* center horizontally */
    border-radius: 15px; /* will round corners a little bit */
    margin-top: 50px;
    margin-bottom: 50px;
}

/*header and footer*/
#header {
    text-align: center;
}
#main-nav {
    margin-top: 0px;
    padding-top: 0px;
}
#main-nav ul {
    /*remove list indent */
    padding-left: 0;
    margin: auto;
    margin-top: 0px;
}
#main-nav li {
    list-style-type: none;
    background: var(--white);
    padding: 10px;
    border: 4px solid var(--section-border);
    border-radius: 15px;
}
#main-nav a {
    text-decoration: none;
    color: var(--nav-txt);
}
#main-nav li:hover {
    background: var(--nav-hover);
}
#logo{
    margin: auto;
    margin-top: 40px;
    border: 4px solid var(--section-border);
    border-radius: 15px;
    text-align: center;
}
.logo-img{
    width: 100%;
    text-align: center;
}
#logo:hover{
    border: 4px dotted var(--section-border);
}

#foot {
    width:100%;
    background-image: url('images/wallpaper.jpg');
    height: 150px;
    margin-top: 40px;
    border-top: 4px solid var(--section-border);
}
.footer{
    position: relative;
    top: 30%;
    padding: 5px;
    border: 4px solid var(--section-border);
    border-radius: 15px;
    color: var(--section-border);
    width: 120px;
    background: var(--content-bg);
    text-align: center;
    margin:auto;
}

/* Hamburger */

#hamburger div {
    width: 25px;
    height: 2px;
    background-color: var(--img-border);
    border: 1px solid var(--section-border);
    margin: 6px 0;
}
#hamburger{
    margin-left: 20px;
    margin-bottom: 20px;
}
#hamburger:hover {
    background-color: var(--nav-hover);
}

.hide-small {
    display: none;
}

/* Main Content */
#main-content {
    margin-top: 50px;
    margin-bottom: 50px;
}
.product-type {
    width:80%;
    margin:auto;
}
.product-content {
    width:90%;
    margin:auto;
}

.product-name {
    margin-top:0px;
    width:180px;
    height: 53.4px;
    background: var(--dark-grey);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    
}
.name {
    color: var(--white);
    text-align: center;
    margin-top:0px;
}
.name {
    padding-top: 10px;
}

.product {
    background: var(--section-bg);
    border: 3px solid var(--section-border);
    margin:auto;
    margin-bottom: 20px;
    width: 180px;
    height: 152px;
    border-radius: 15px;
}
.products {
    margin-left:0px;
    padding-left: 0px;
    margin-top:15px;
}
.type-title h3{
    margin-left:5px;
    margin-bottom:0px;
}
.type-title {
    margin-bottom: 0px;
    padding-bottom:0px;
    border-bottom: 1px solid var(--dark-grey);
    -webkit-text-stroke: 1px var(--section-border);
    color: var(--bg);
}
 /*images*/

.images{
    width: 100px;
    height:85px;
    margin-left:40px;
    margin-top:10px;
}




/* For larger resolutions */
@media only screen and (min-width: 812px) {
    
    .columns{
        display:flex;
    }
    #nav-items{
        display:flex;
    }
    #main-nav {
        display:flex;
        
    }
    #main-nav li {
        text-align: center;
        margin:40px;
    }
    .products {
        display:flex;
        width:100%;
    }
    #hamburger {
        display: none;
    }
    .head {
        width:100%;
        background-image: url('images/wallpaper.jpg');
        height: 300px;
        border-bottom: 4px solid var(--section-border);
        margin:0px;
        padding:0px;
        margin-bottom: 30px;
    }
    body{
        width: 100%;
        margin: 0px;
        padding: 0px;
    }
    #content {
        margin-top: 75px;
        margin-bottom: 100px;
    }
    
}


/* For smaller resolutions */
@media only screen and (max-width: 768px) {
    #content {
        width:95%;
    }
}