subproject10.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;
}

.so{
    color: black;
    text-decoration: none;
    font-size: 12px;
}

.so:hover{
    color: violet;
    text-decoration: underline violet;
}

#dori{
    color: black;
    text-decoration: none;
    font-size: 12px;
}

#dori:hover{
    color: palevioletred;
    text-decoration: 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:780px) and (min-width:300px){
.img-fluid{
    width: 400px;
    display: flex;
}
    }

    strong{
        color: rgb(5, 0, 0);
    }
    
    #lower{
        display: none;
    }
    #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;
    }
    
    
    h3{
        background-color: white;
        text-align: center;
    }
    
    .drip{
        width: 120px;
    }
    
    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;
    }
    
    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;
    
    }
    
    @media (max-width:768px){
        img{
            width: 180px;
        }
    }
    
    @media (max-width:1600px) and (min-width:767px){
        #rala{
            display: none;
        }
        
        .pop{
            width: 70px;
        }
        
        #joor{
            position: fixed;
            right: 70px;
            bottom: 5px;
        }
        }
        
        @media (max-width:767px) and (min-width:550px){
            #bala{
                display: none;
                }
                
                article{
                    margin-top: 0px;
                }
            
    }
    
    @media (max-width:580px){
        #bala{
            display: none;
        }
        
        article{
            margin-top: 0px;
        }
        .so{
            width: 120px;
        }
        
        .pop{
            width: 70px;
        }
        
        #joor{
            position: fixed;
            right: 0px;
            bottom: 5px;
        }
        }
    
    #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);
        -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);
        -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);
        -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: 8px;
    }
    #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);
    }
    
    #bebe:hover{
        color: 	rgb(135, 206, 235);
    }
    
    @media (max-width:767px) and (min-width:500px){
        .pop{
            width: 70px;
        }
        
        #joor{
            position: fixed;
            right: 30px;
            bottom: 120px;
        }
        }
    
    @media (max-width:916px) and (min-width:767px){
        #joor{
            right: 2px;
        }
    }
    @media (max-width:1050px) and (min-width:994px){
        #joor{
            right: 2px;
        }
    }
    
    @media (max-width:580px) and (min-width:120px){
    #poll{
        border: none;
        text-align: start;
        margin-left: -35px;
    }
    
    h5{
        margin-left: -5px;
    }
    }

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

            @media (max-width:300px){
                .brl{
                    width: 200px;
                }
        
                #gope{
                    background-color: white;
                }
            }