body{
  font-family: 'Roboto', sans-serif;
}
.navbar{
  display: flex;
  width: 100%;
  background-color: #21252B;
  justify-content: center;
  height: 60px;
  position: fixed;
  margin-top: -100px;
  z-index: 100;
}
.subsitecontainerwrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
}
.subsitecontainer{
  display: flex;
  width: 600px;
  height: 450px;
  border-style: solid;
  border-width: 1px;
  border-color: #3C6B86;
  border-radius: 32px;
  transition: transform 0.5s;
}
.subsitecontainer:hover{
  transform: scale(1.1);
  cursor: pointer;
}
@media (max-width: 700px){
  .subsitecontainer{
    width: 500px;
    height: 375px;
  }
}
@media (max-width: 580px){
  .subsitecontainer{
    width: 450px;
    height: 338px;
  }
}
@media (max-width: 500px){
  .subsitecontainer{
    width: 300px;
    height: 225px;
  }
}