*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
body{
    background-color: hsl(27, 66%, 92%);
}
.con{
    margin: auto;
    margin-top: 50px;
    width: 390px;
    height: 130px;
    background-color: hsl(10, 79%, 65%);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    gap: 30px;
}
.con1{
    /* align-items: center; */
    /* background-color: blue; */
    width: 40%;
    display: flex;
    flex-direction: column;
    margin-top: px;
    gap: 10px;
    padding: 10px;
}
.p1{
    color: white;
}
.h1{
    color: white;
}
.con2{
    /* background-color: yellow; */
    width: 50%;
    height: 90px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    /* justify-content: center; */
    padding: 20px;
}
.con3{
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: 3px solid white;
    border-radius: 100%;
    position: relative;
    /* margin-left: 80px; */
    margin-left: -20px;
}
.con4{
    width: 40px;
    height: 40px;
    background-color: hsl(25, 47%, 15%);
    border: 1px solid hsl(25, 47%, 15%);
    border-radius: 100%;
    /* margin-left: 20px; */
    position: absolute;
}
.cont1{
    background-color: white;
    margin: auto;
    margin-top: 20px;
    width: 390px;
    height: 100%;
    /* background-color: hsl(10, 79%, 65%); */
    border-radius: 20px;
    padding: 12px;
    /* padding-left: 20px; */
    /* margin-top: 20px; */
    /* display: flex; */
    /* flex-direction: col; */
    gap: 30px;
}
.man{
    display: flex;
    flex-direction: row;
    gap: 18px;
    margin-top: 190px;
}
.cont3{
    background-color: hsl(10, 79%, 65%);
    height: 90px;
    width: 35px;
    border-radius: 10px;
}
.cont4{
    background-color: hsl(10, 79%, 65%);
    height: 150px;
    width: 35px;
    border-radius: 10px;
    margin-top: -60px;
}
.cont5{
    background-color: hsl(186, 34%, 60%);
    height: 190px;
    width: 35px;
    border-radius: 10px;
    margin-top: -100px;
}
.cont6{
    background-color: hsl(10, 79%, 65%);
    height: 130px;
    width: 35px;
    border-radius: 10px;
    margin-top: -40px;
}
.cont7{
    background-color: hsl(10, 79%, 65%);
    height: 90px;
    width: 35px;
    border-radius: 10px;
    /* margin-top: -0px; */
}
.cont8{
    background-color: hsl(10, 79%, 65%);
    height: 170px;
    width: 35px;
    margin-top: -80px;
    border-radius: 10px;
}
.cont9{
    background-color: hsl(10, 79%, 65%);
    height: 100px;
    width: 35px;
    border-radius: 10px;
    margin-top: -10px;
}
.conr{
    background-color: hsl(10, 79%, 65%);
    height: 40px;
    width: 70px;
    border-radius: 10px;
    text-align: center;
    align-content: center;
    justify-self: center;
    margin-top: -50px;
    display: none;
}
.cont5:hover{
    cursor: pointer;
    background-color: hsl(28, 10%, 53%);
    transition: 3s;
}
.cont5:hover .conr{
    display: block;
    /* transition: 3s; */
}
.coi{
    background-color: hsl(10, 79%, 65%);
    height: 40px;
    width: 50px;
    border-radius: 10px;
    text-align: center;
    align-content: center;
    justify-self: center;
    margin-top: -50px;
    display: none;
}
.cont3:hover .coi{
    display: block;
}
.cont3:hover{
    cursor: pointer;
    background-color: rgba(165, 42, 42, 0.589);    
}
.cop{
    background-color: hsl(10, 79%, 65%);
    height: 40px;
    width: 50px;
    border-radius: 10px;
    text-align: center;
    align-content: center;
    justify-self: center;
    margin-top: -50px;
    display: none;
}
.cont4:hover .cop{
    display: block;
}
.cont4:hover{
    cursor: pointer;
    background-color: rgba(165, 42, 42, 0.589); 
}
.coq{
    background-color: hsl(10, 79%, 65%);
    height: 40px;
    width: 50px;
    border-radius: 10px;
    text-align: center;
    align-content: center;
    justify-self: center;
    margin-top: -50px;
    display: none;
}
.cont6:hover .coq{
    display: block;
}
.cont6:hover{
    cursor: pointer;
    background-color: rgba(165, 42, 42, 0.589); 
}
.cov{
    background-color: hsl(10, 79%, 65%);
    height: 40px;
    width: 50px;
    border-radius: 10px;
    text-align: center;
    align-content: center;
    justify-self: center;
    margin-top: -50px;
    display: none;
}
.cont7:hover .cov{
    display: block;
}
.cont7:hover{
    cursor: pointer;
    background-color: rgba(165, 42, 42, 0.589);
}
.cox{
    background-color: hsl(10, 79%, 65%);
    height: 40px;
    width: 50px;
    border-radius: 10px;
    text-align: center;
    align-content: center;
    justify-self: center;
    margin-top: -50px;
    display: none;
}
.cont8:hover .cox{
    display: block;
}
.cont8:hover{
    cursor: pointer;
    background-color: rgba(165, 42, 42, 0.589);
}
.coz{
    background-color: hsl(10, 79%, 65%);
    height: 40px;
    width: 50px;
    border-radius: 10px;
    text-align: center;
    align-content: center;
    justify-self: center;
    margin-top: -50px;
    display: none;  
}
.cont9:hover .coz{
    display: block;
}
.cont9:hover{
    cursor: pointer;
    background-color: rgba(165, 42, 42, 0.589);
}
/* This Is The End Of My Code. Please Do Not Manipulate This Code */