.left_div {
    width : 50%;
    display: flex;
    height: 100%;
    flex-direction: column;
}
.right_div {
    width : 50%;
    display: flex;
    height: 100%;
    flex-direction: column;
}

.web_div {
    width : 50%;
    display: flex;
    height: 100%;
    flex-direction: row;
    position: relative;
}
.exact_time {
    width:420px;
    height:100px;
    margin-left: 250px;
    margin-top: 70px;
    border-radius: 3px;
    background-color: white;
    position: relative;
    z-index: 1;
}
.trans_box_1{
    width:280px;
    height:100px;
    border-radius: 4px;
    margin-left: 320px;
    margin-top: -90px;
    background-color: rgb(233, 122, 233);
    z-index: -1;
    opacity: 1;
}
.trans_box_2{
    width:200px;
    height:80px;
    margin-top: -70px;
    background-color:whitesmoke;
    border-radius: 4px;
    margin-left: 360px;
    opacity: 0.5;
    z-index:-3;
}
.p_exact_time {
    color:darkblue;
    margin-top: 35px;
    display: inline-block;
    margin-left: 10px;
    margin-right:30px;
    position: absolute;
}
.small_time_div_first {
    background-color: rgb(226, 186, 226);
    width:60px;
    height:70px;
    margin-left: 80px;
    margin-top: 15px;
    margin-right:0px;
    display: inline-block;
    color:darkblue;
    border-radius: 2px;
    text-align: center;
    font-size: x-large;
}
.small_time_div {
    background-color: rgb(226, 186, 226);
    width:60px;
    height:70px;
    margin-left: 30px;
    margin-top: 15px;
    margin-right:0px;
    display: inline-block;
    color:darkblue;
    border-radius: 2px;
    text-align: center;
    font-size: x-large;
}
.small_time_div_am_pm{
    width:60px;
    height:70px;
    margin-left: 20px;
    margin-top: 15px;
    margin-right:0px;
    display: inline-block;
    color:white;
    background-color: rgb(233, 122, 233);
    border-radius: 2px;
    text-align: center;
    font-size: x-large;
    position: fixed;
}
.lunch_image_style{
    width:590px;
    height:350px;
    border-radius: 3px;
    margin-left: 250px;
    position: relative;
    
}
.img_style {
    width:420px;
    height:350px;
    margin-left: 0px;
    border-radius: 3px;
    margin-top:100px;
}
.top-left {
    position: absolute;
    left: 16px;
    color: rgb(102, 44, 240);
    margin-top: 120px;
    display: inline-block;
    font-size: x-large;
  }

.lunch_h4_style{
    color:purple;
    display: inline-block;
    margin-top:10px;
}
.clock{
    width:270px;
    margin-left: 70px;
    margin-top: 80px;
    position: relative;
}
img{
    width:60px;
    height:60px;
    display: inline-block;
    color: purple;
}
h3{
    color:white;
    display: inline;
    margin-left: 20px;
    margin-top: 15px;
    font-size: xx-large;
    position: absolute;

}
.body_style {
    background-color: darkblue;
    display: flex;
}
.t_p {
    margin-left: 10px;
    margin-top: 20px;
}
.time {
    background-color: white;
    width:430px;
    height:240px;
    margin-left: 80px;
    margin-top: 20px;
    border-radius: 6px;
    display: inline-block;
    flex-direction: column;
    position: relative;
}
.afternoon_style {
    width:430px;
    height:80px;
    margin-left: 80px;
    margin-top: 20px;
    border-radius: 6px;
    color:white;
    background-color: rgb(126, 19, 226);
}

p{
    color:darkblue;
    padding:0;
    margin-left:30px;
    font-size: large;
    margin-top: -30px;
    margin-right:30px;
   display: inline-block;
  
}
.party_style {
    width:200px;
    height:40px;
    margin-left: 80px;
    margin-top: 20px;
    border-radius: 3px;
    color:white;
    background-image: linear-gradient(to right, blue, purple);
}
.party_style :hover {
   background-image: linear-gradient(to right, purple, blue);
}
.p_party_style{
    background-image: linear-gradient(to right, blue, purple);
  margin-left: 80px;
  margin-top:10px;
}
.lunch_style {
    color:darkblue;
    padding:0;
    margin-left:30px;
    font-size: large;
    margin-top: -30px;
    margin-right:50px;
   display: inline-block;
}
.sleep_style {
    color:darkblue;
    padding:0;
    margin-left:30px;
    font-size: large;
    margin-top: -30px;
    margin-right:65px;
   display: inline-block;
}
.small_icons{
    width:30px;
    height:40px;
    display: inline-block;
    margin-top:15px;
    margin-left:20px;
}

.select_style {
    color:darkblue;
    border:1px solid lightgrey;
    margin-left: 30px; 
    width:140px;
    padding:4px;
}
@media screen and (min-width:768px) and (max-width:1025px) { 
    .clock{
        width:270px;
        margin-left: 5px;
        margin-top: 40px;
        position: relative;
    }
    .time {
        background-color: white;
        width:370px;
        height:240px;
        margin-left: 5px;
        display: inline-block;
        flex-direction: column;
        position: relative;
    }
    p{
        margin-left:10px;
        font-size: large;
        margin-top: -30px;
        margin-right:0px;
       display: inline-block;
      
    }
    .trans_box_1{
        display: none;
    }
    .trans_box_2{
        display: none;
    }
    .lunch_style {
       padding:0;
        margin-left:10px;
        font-size: large;
        margin-top: -30px;
        margin-right:20px;
       display: inline-block;
    }
    .sleep_style {
        margin-left:10px;
        font-size: large;
        margin-top: -30px;
        margin-right:30px;
       display: inline-block;
    }
    .afternoon_style{
        margin-left: 5px;
        width:370px;
        height:80px;
    }
    .party_style {
        width:180px;
        height:40px;
        margin-left: 5px;
        
    }
    .exact_time {
        width:380px;
        height:100px;
        margin-left: 100px;
        margin-top: 10px;
        border-radius: 3px;
        background-color: white;
        position: relative;
    }
    .p_exact_time {
        margin-left: 5px;
        margin-right:5px;
        position: absolute;
    }
    .small_time_div_first {
        background-color: rgb(226, 186, 226);
        width:60px;
        height:70px;
        margin-left: 60px;
        margin-top: 15px;
        margin-right:0px;
        display: inline-block;
        color:darkblue;
        border-radius: 2px;
        text-align: center;
        font-size: x-large;
    }
    .small_time_div {
        background-color: rgb(226, 186, 226);
        width:60px;
        height:70px;
        margin-left: 20px;
        margin-top: 15px;
        margin-right:0px;
        display: inline-block;
        color:darkblue;
        border-radius: 2px;
        text-align: center;
        font-size: x-large;
    }
    .small_time_div_am_pm{
        width:60px;
        height:70px;
        margin-left: 20px;
        margin-top: 15px;
        margin-right:0px;
        display: inline-block;
        color:white;
        background-color: rgb(233, 122, 233);
        border-radius: 2px;
        text-align: center;
        font-size: x-large;
        position: fixed;
    }
    .lunch_image_style{
        width:450px;
        height:350px;
        border-radius: 3px;
        margin-left: 200px;
        position: relative;
        
    }
    .img_style {
        width:280px;
        height:350px;
        margin-left: 0px;
        border-radius: 3px;
        margin-top:50px;
        border:5px solid black;
    }   
    .top-left {
        position: absolute;
        left: 8px;
        color: rgb(102, 44, 240);
        margin-top: 60px;
        display: inline-block;
        font-size: large;
      }
     
}