/* Pokedex Top Div */

.pokedex-top {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 140px;
    margin-left: 25%; /* Centers the flexbox */
    margin-right: 25%; /* Centers the flexbox */
    width: 80%; /* Responsive width */
    max-width: 600px; /* Optional max width - maintains width across diff screen sizes */
}

.pokedex-top-div-one {
    background-color: red;
    width: 333px;
    border-bottom: 0px;
    border-style: solid;
    border-color: black;
    border-top-left-radius: 15px;
    border-top-right-radius: 5px;
    box-shadow: inset 0 0 15px 5px rgba(0, 0, 0, 0.20), inset 0 0 15px 5px rgba(0, 0, 0, 0.20); /* Light gray gradient shadow effect */
}

/* Pokedex Middle Div */

.pokedex-middle {
    background-color: red;
    width: 30px;
    border-radius: 1px;
    border-left: 0px;
    border-right: 0px;
    border-style: solid;
    border-color: black;
    align-content: center;
    justify-content: space-between;
}

.mid-div-one {
    background-color: red;
    height: 72px;
    background-image:linear-gradient(to right, rgba(146, 0, 0, 0.80), red, rgba(146, 0, 0, 0.80));
}

.mid-div-two {
    background-color: red;
    border-left: 0px;
    border-right: 0px;
    border-style: solid;
    border-color: black;
    height: 200px;
    box-shadow: inset 0 0 15px 5px rgba(0, 0, 0, 0.20), inset 0 0 15px 5px rgba(0, 0, 0, 0.20); /* Light gray gradient shadow effect */
}

.mid-div-three {
    background-color: red;
    height: 72px;
    background-image:linear-gradient(to right, rgba(146, 0, 0, 0.80), red, rgba(146, 0, 0, 0.80));
}


/* Pokedex Bottom Div */

.pokedex-bottom {
    display: flex;
    flex-direction: row;
    justify-content: center;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.85); /* Offset shadow */
    border-style:none;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    margin-left: 25%;
    margin-right: 25%;
    width: 80%; /* Responsive width */
    max-width: 600px; /* Optional max width - maintains width across diff screen sizes*/
    
}

.poxedex-bottom-left-div {
    width: 300px;
    border-style: solid;
    border-color: black;
    border-bottom-left-radius: 15px;
    background-color: red;
    box-shadow: inset 0 0 15px 5px rgba(0, 0, 0, 0.20), inset 0 0 15px 5px rgba(0, 0, 0, 0.20); /* Light gray gradient shadow effect */
}

.left-screen {
    background-color: rgb(0, 0, 0);
    height: 250px;
    text-align: center;
    align-content: center;
    border-style: solid;
    border-width: 7px;
    border-color:  rgb(231, 228, 228);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 15px;
    box-shadow: inset 0 0 5px 5px rgba(128, 128, 128, 0.5), inset 0 0 5px 5px rgba(192, 192, 192, 0.5); /* Light gray gradient shadow effect */
}


/*css attributes for drag and drop zone*/
#drop-zone { 
    text-align: center; 
    cursor: pointer; 
  } 
   
#drop-zone p { 
margin: 0; 

} 

#drop-zone.hover { 

    background-color: #f9f9f9d8; 
  } 



.left-buttons {
    background-color: lightpink;
    height: 50px;
    text-align: center;
    align-content: center;
    margin-top: 10px;
    margin-left: 60px;
    margin-right: 60px;
    margin-bottom: 10px;
}

.pokedex-bottom-right-div {
    background-color: red;
    width: 300px;
    border-radius: 1px;
    border-style: solid;
    border-color: black;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: inset 0 0 15px 5px rgba(0, 0, 0, 0.20), inset 0 0 15px 5px rgba(0, 0, 0, 0.20); /* Light gray gradient shadow effect */
}

/*Use this following css class when it comes to modifiying the right screen of the pokedex*/
.right-screen {
    background-color:rgb(3, 7, 230);;
    height: 250px;
    text-align: center;
    align-content: center;
    border-style: solid;
    border-color: black;
    border-width: 7px;
    border-color:  rgb(231, 228, 228);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 15px;
    box-shadow: inset 0 0 5px 5px rgba(128, 128, 128, 0.5), inset 0 0 5px 5px rgba(192, 192, 192, 0.5); /* Light gray gradient shadow effect */
}
/*Use this following css class to update how an uploaded image will appear on in the canva div*/
.preview-image {

    text-align: center;
    width: 200px;
    height: 75px;
    margin: 10px;
    border: 1px solid #ddd;
  }



.right-buttons {
    background-color: lightpink;
    height: 50px;
    text-align: center;
    align-content: center;
    margin-top: 10px;
    margin-left: 60px;
    margin-right: 60px;
    margin-bottom: 10px;
}