subproject17.css

#lie{
    width: 200px;
}

.ulli .lead{
    font-size: 14px;
    line-height: 1.5rem;
    color: white;
}

.ulli{
margin-top: -50px;
}

h2{
    font-size: 20px;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    text-align: center;
    color: red;
    text-decoration: overline rgb(144, 3, 97);
}

.pot{
   display: none;
}

.brl{
    width: 300px;
    border-radius: 10px;
}

#gope{
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: beige;
    padding: 20px;
}

#cpl{
    text-decoration: none;
}

#vol p{
    text-align: center;
    font-size: 14px;
    font-family: 'Raleway', sans-serif;
    color: rgb(184, 92, 92);
    margin-top: 15px;
}

#val{
    display: flex;
    justify-content: center;
}

h1{
    font-size: 25px;
    margin-top: 50px;
    text-align: center;
    text-transform: capitalize;
    font-family: 'Raleway', sans-serif;
    text-decoration: overline rgb(144, 3, 97);
}

#make{
    width: 100%;
    background-color: rebeccapurple;
    border-radius: 5px;
    margin-top: 20px;
}

#sake{
    width: 100%;
    background-color: rgb(56, 176, 182);
    margin-top: 50px;
    border-radius: 5px;
}

#sake h2{
    color: #ee6c4d;
    text-decoration: overline rgb(144, 3, 97);
}

#sake .pot{
    background-color: #ee6c4d;
    border: none;
}

#sake .pot:hover{
    background-color: #e6441b;
    border: none;
}

#take{
    width: 100%;
    background-color: rgb(1, 170, 255);
    margin-top: 50px;
    border-radius: 5px;
}

#take h2{
    color: rosybrown;
    text-decoration: overline rgb(144, 3, 97);
}

#take .pot{
    background-color: rosybrown;
    border: none;
}

.img-fluid{
    border-radius: 10px;
}

#take .pot:hover{
    background-color: rgb(250, 166, 166);
    border: none;
}

#rake{
    width: 100%;
    background-color: #97b2fd;
    margin-top: 50px;
    border-radius: 5px;
}

#rake h2{
    color: #ff4d6d;
    text-decoration: overline rgb(144, 3, 97);
}

#rake .pot{
    background-color: #ff4d6d;
    border: none;
}

#rake .pot:hover{
    background-color: #f51b43;
    border: none;
}

@media (max-width:991px){
    span{
        display: none;
    }
    .ulli{
        margin-top: 15px;
        }
    }

@media (max-width:768px){
    #lie{
        width: 200px;
    }

    .ulli{
        margin-top: 0px;
        }

        img{
            width: 100%;
        }

        .pot{
            display: inline-block;
            font-family: 'Raleway', sans-serif;
        }
}

.navbar-toggler-icon{
    width: 20px;
    height: 30px;
    background-color: #91386f; 
    border: none;
}

.navbar-toggler{
    border: none;
    border-radius: 3px;
    background-color: #91386f; 
    font-size: 0px;
}

.navbar-toggler:focus{
    background-color: none;
    border: none;
}

.navbar-toggler:active{
    background-color: #91386f; 
}
@media (max-width:768px){
    img{
        width: 180px;
    }
}

.drip{
    width: 120px;
}

.goat{
    border: none;
}
article{
    margin-top: 100px;
}

#baddo{
    width: 19px;
    color: rgb(108, 108, 108);
}

#kot{
    color: rgb(108, 108, 108);
    margin-left: 5px;
}
#some{
    margin-top: 60px;
}

#bala{
    font-size: 12px;
    padding: 10px;
    font-family: 'Roboto', sans-serif;
}

#rala{
    font-size: 12px;
    padding: 10px;
    font-family: 'Roboto', sans-serif;
}

#aspo{
    color: rgb(248, 19, 172);
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-size: 13px;
}

#aspo:hover{
    color: rgb(241, 183, 94);
    font-family: 'Roboto', sans-serif;
}

#asp{
    color: rgb(248, 19, 172);
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-size: 13px;
}

#asp:hover{
    color: rgb(241, 183, 94);
    font-family: 'Roboto', sans-serif;
}

#asp:active{
    color: rgb(241, 183, 94);
    font-family: 'Roboto', sans-serif;
    background-color: rgb(211, 231, 241);
}
#dopet{
    background-color: white;
}

.navbar-toggler-icon{
    color: red;
}
ul li{
    padding: 2px 0px;
list-style: none;    
}

h5{
    font-size: 18px;
    border: none;
    display: flex;
    flex-direction: column;
margin-left: 30px;
font-weight: 500;

}

a{
    color: black;
    text-decoration: none;
}

a:hover{
    color: palevioletred;
    text-decoration: none;
}

@media (max-width:767px) and (min-width:575px){
    h5{
        font-size: 15px;
    }
    
    p{
        font-size: 11px;
        font-weight: lighter;
    }
    #dope{
    width: 60px;
    margin-left: 80px;
    }

    #bala{
        display: none;
        }
        
        article{
        margin-top: 0px;
        }
    }
    @media (max-width:767px) and (min-width:550px){
        #bala{
        display: none;
        }
        
        article{
        margin-top: 0px;
        }
        
        }
        
        @media (max-width:1600px) and (min-width:767px){
            #rala{
                display: none;
            }
            .pops{
                width: 50px;
            }
            
            #jooor{
                position: fixed;
                right: 80px;
                bottom: 10px;
            }
            }
        
        @media (max-width:780px){
         
            .pops{
                width: 50px;
            }
            
            #jooor{
                position: fixed;
                right: 40px;
                bottom: 10px;
            }
        
        }
        
        @media (max-width:575px){
        #photo{
            display: none;
        }
        
        .lead{
            margin-left: 0px;
        }
        
        h2{
            margin-left: 0px;
            }

            #rala{
                margin-top: -80px;
            }
        }
        
        @media (max-width:767px){
         .cool{
             margin-top: 30px;
         }
        }
        
        
        @media (max-width:580px){
            #bala{
                display: none;
            }
            
            article{
                margin-top: 0px;
            }
        
            .pops{
                width: 40px;
            }
            
            #jooor{
                position: fixed;
                right: 0px;
                bottom: 10px;
            }
            }
        
            #dodo{
                text-align: start;
                border: none;
                padding: 5px 0px;
                font-size: 9px;
                color: rgb(169, 169, 169);
            }
            
            #dodo:hover{
            color: 	rgb(135, 206, 235);
            }
            
            
            #dodo:active{
                color: 	rgb(135, 206, 235);
                }
            
            i{
                border: none;
                background-color: white;
                padding: 8px 0px;
                padding-left: 8px;
                padding-right: 19px;
                text-align: center;
                align-items: center;
                border-radius: 50%;
                margin: auto;
            }
            
            #pli{
                color: rgb(169, 169, 169);
                font-size: 12px;
                -webkit-box-shadow: 9px 1px 22px -2px rgba(0,0,0,0.43); 
            box-shadow: 9px 1px 22px -2px rgba(0,0,0,0.43);
            margin-left: 9px;
            }
            
            #oli{
                color: rgb(169, 169, 169);
                font-size: 12px;
                -webkit-box-shadow: 9px 1px 22px -2px rgba(0,0,0,0.43); 
            box-shadow: 9px 1px 22px -2px rgba(0,0,0,0.43);
            }
            
            #oli:hover{
                color: 	rgb(135, 206, 235);
            }
            
            #pli:hover{
            color: 	rgb(135, 206, 235);
            }
            
            #plo{
                color: rgb(169, 169, 169);
                font-size: 12px;
                -webkit-box-shadow: 9px 1px 22px -2px rgba(0,0,0,0.43); 
            box-shadow: 9px 1px 22px -2px rgba(0,0,0,0.43);
            margin-left: 5px;
            }
            #plo:hover{
               
            color: 	rgb(240, 53, 53);
            }
            .xoxo{
                text-align: start;
                border: none;
                padding: 5px 0px;
                font-size: 10px;
                color: rgb(169, 169, 169);
            }
            
            #bebe{
                padding-left: 10px;
                padding-right: 19px;
                color: rgb(169, 169, 169);
                -webkit-box-shadow: 9px 1px 22px -2px rgba(0,0,0,0.43); 
            box-shadow: 9px 1px 22px -2px rgba(0,0,0,0.43);
            font-size: 12px;
            }
            
            #bebe:hover{
                color: 	rgb(135, 206, 235);
            }
        
        @media (max-width:767px) and (min-width:500px){
            .pops{
                width: 40px;
            }
            
            #jooor{
                position: fixed;
                right: 30px;
                bottom: 10px;
            }
        
            #rala{
                margin-top: -80px;
            }
        }

    
    @media (max-width:580px) and (min-width:120px){
        #poll{
            border: none;
            text-align: start;
            margin-left: -35px;
        }
        
        h5{
            margin-left: -5px;
        }
        .brl{
            width: 250px;
        }
    }

    @media (max-width:580px) and (min-width:120px){
        #poll{
            border: none;
            text-align: start;
            margin-left: -25px;
        }
        
        h5{
            margin-left: 10px;
        }

        .drip{
            margin-left: 10px;
        }

        article{
            margin-left: 10px;
        }
    }
    
    @media (max-width:916px) and (min-width:767px){
        #jooor{
            right: 2px;
        }
    }
    @media (max-width:1070px) and (min-width:994px){
        #jooor{
            right: 2px;
        }
    }

    @media (max-width:780px) and (min-width:300px){
.img-fluid{
    width: 400px;
    display: flex;
}
    }

    @media (max-width:300px){
        .brl{
            width: 200px;
        }

        #gope{
            background-color: white;
        }
    }

    #for{
        background: none;
        font-size: 15px;
        }
        
        #forn{
            background: none;
            }