.modalBackground {
  display: none;
  position: fixed;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto !important;
  background-color: rgba(0,0,0,0.4);
  backdrop-filter: blur(3px);
}

/*Content of the modal box */
.modalContent {
  background-color: rgb(235, 226, 226);
  margin: 3% auto;
  padding: 20px;
  border-radius: 2em;
  width: 80%;
  font-size: large;
}

/* The Close Button */
.closeButton {
  cursor: pointer;
  color: white;
  background-color: #2ea92e;;
  margin-left: 40%;
  font-size: 28px;
  font-weight: bold;
  width: 20%;
  padding: 10.5px;
  border-radius: 0.4em;
}

.closeButton:hover {
  cursor: pointer;
  color: white;
  background-color: green;
}

/*Modal Contents properties */
#techCol h1 {
  text-align: center;
}

.modalBackground hr {
  border: 1px solid rgb(0,0,0);
  margin-bottom: 1.75%;
}

.modalButtonClass {
  background-color: transparent;
  border: none;
}

#contentBlock {
  display: flex;
  flex-direction: row;
  margin: 5%;
}
#contentBlock ul {
  margin-left: 3%;
}

.modalImageSide {
  background-color: rgba(133, 133, 133, 0.251);
  padding: 2.5%;
  border-radius: 1.5em;
}

.modalTextSide {
  overflow-y: auto;
}

#pythonImageSide {
  width: 300px;
}

#pythonTextSide {
  height: 250px;
}

#javaImageSide{
  margin-left: 50px;
  height: 350px !important;
}

#javaTextSide {
  width: 800px;
  height: 350px;
}

#htmlImageSide, #CSSImageSide {
  height: 150px !important;
  margin-left: calc(100% / 4.5);
}

#htmlCSSTextSide {
  height: 250px;
}

#SQLImageSide {
  height: 250px;
  width: 275px;
}

#SQLTextSide {
  width: 850px;
  height: 250px;
}

@media (max-width: 700px) {

  #contentBlock {
    flex-direction: column;
  }
  
  .modalContent {
    height: auto;
    font-size: medium;
  }

  .closeButton {
    font-size: larger;
    padding: 5.5px;
  }

  #contentBlock ul {
    margin-left: 0px;
  }

  #javaImageSide {
    margin-left: calc(100%/4);
  }

  #pythonImageSide {
    width: 150px;
    margin-left: 25%;
  }

  #pythonTextSide {
    height: 400px;
  }

  #javaImageSide {
    height: 650px;
    margin-left: 25%;
  }

  #javaTextSide {
    width: auto;
    height: 340px;
  }

  #javaImageSide{
    height: 200px !important;
    margin-left: 30%;
  }

  #htmlImageSide, #CSSImageSide {
    margin-left: calc(100%/12);
    height: 105px !important;
  }

  #htmlCSSTextSide {
    height: 445px;
  }

  #SQLImageSide {
    margin-left: calc(100%/4);
    width: 150px;
  }

  #SQLTextSide {
    width: auto;
    height: 390px;
  }

}