body{
    background-image:url("https://codehs.com/uploads/fa76f325cf0d76bf3c1bfa35e36180cc");
     background-size:cover;
     background-repeat:no-repeat;
     font-variant:small-caps;
     font-family:rf;
     background-attachment:fixed;
}

header{background-color:white;
    color:black;
    text-align:center;
    font-size:3vw;
    width:80%;
    margin:auto;}
    
nav {Background-color:black;
    outline:3px white inset;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:10px;
    padding-top:10px;
    text-align:center;
    width:80%;}
    
button {background:none;
        border-style:none solid none none;
        border-color:black;
        height:10%;
        width:15%;
        font-size:1.50vw;
        text-align:center;
        color:white;
        box-shadow:2px 2px 8px 8px red inset, -2px -2px 8px 8px red inset;
        font-family:rf;
        font-variant:small-caps;
        margin:auto}




 @font-face{font-family:rf;src:url("https://codehs.com/uploads/09b13d13628f296b7373344a7e24eb9f");}



.parent{display:flex; 
flex-wrap:wrap; 
width:80%; 
margin:auto; 
text-align:center; 

margin-bottom:20px;
    background-color:transparent;
}
.sizing{
    font-size:3vw;
}
.vendor{
    width:25%;
    text-align:center;
   padding-left:50px;
   padding-right:50px;
   margin-bottom:10px;
   border:solid white 2px;
}

ol, a{list-style-type:none;
color:white;
text-decoration:none;
}

.classo{font-size:3.38vw}

   h2{
       color:white;
       font-size:3.50vw;
       font-family:rf;
       font-variant:small-caps;
       } 
    
    .div2{height:30%;width:80%; margin-left:auto;
        margin-right:auto;
        background-color:black;
    }
    
    .width {width:79%;}
div{
    
border-radius:20px;
margin:auto;

width:500px;
 }
 
 /*do we need to change this */
img{
    height:200px;
    width:100%;
    border-radius:20px;
    margin-left:auto;
    margin-right:auto;
    display:block;
}

.button {background-color:black;
        font-size:60px;
        width:900px;
    font-variant:small-caps;
}

button:hover {animation:hover 1s forwards;}

@keyframes hover {from{background:none;height:10%;width:14%;}
                    to{background:black;height:15%;width:18%;}}


div:hover > ol{
    display:block;
    animation:trans 2s forwards;
}

@keyframes trans{
    from {filter:opacity(0);}
        to {filter:opacity(1);}
        }


ol{
    display:none;
    text-align:center;
    margin-left:-10px;
}

    li{
        font-size:1.25vw;
    }
    
#left {width:6vw;
    height:5vw;
    float:left;}

#right {width:6vw;
    height:5vw;
    float:right;
    padding-right:10px;}