.wr-page {
  width: 50%;
  border: 2px dotted #4fbbd1;
  background-color: #165369;
  height: 940px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-left: 25%;
  margin-right: 25%;
}

.footer {
  margin-left: 25%;
  margin-right: 25%;
}
body {
  background: url("../img/web/city_bg.png") bottom left no-repeat fixed, url("../img/web/bg2.png");
}

@keyframes animate-bg {
  100% {
    background-position: 768px 768px;
  }
}

.web-box {
  border: 2px dotted #1c7487;
  border-bottom: none;
  width: 98%;
  height: fit-content;
  margin-bottom: 8px;
  text-align: center;
}

#wr-idk {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  overflow: scroll;
  padding: 6px;
}

@media (min-width: 200px) and (max-width: 1080px) {
.wr-page {
  height: fit-content;
    width: 100%;
    height: 900px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-left: 0%;
    margin-right: 0%;
  }

.footer {
  margin-left: 0%;
  margin-right: 0%;
}

#wr-idk {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  overflow: scroll;
  padding: 6px;
}
}

/* Dotted border */
.dotted {
  border-top: 3px dotted #b8fffb81;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* Style the tab */
.tab {
  overflow: hidden;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: #ffffff00;
  color: #43b1ca;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Style the tab content */
.tabcontent {
  display: none;
  border-top: 2px dotted #1c7487;
  padding: 6px 12px;
  height: 680px;
}

.speech-bubble {
  position: relative;
  background: #00394d;
  border-radius: .4em;
  color: #b8e7ff;
}

.speech-bubble:after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-right-color: #00394d;
  border-left: 0;
  border-top: 0;
  margin-top: -8px;
  margin-left: -16px;
}

td {
  border: 2px dotted #468c9b;
  background: #7bbecc;
  width: 300px;
}

.boxed {
  background: #7bbecc;
  border: 2px dotted #468c9b;
  width: 95%;
  margin-left: 2%;
  margin-right: 3%;
  padding: 10px;
}

.windows {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 10px 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "window-1 window-2 window-3"
    "window-4 window-5 window-6"
    "window-7 window-8 window-9";
  width: 100%;
  height: 450px;
}

.window-1 { grid-area: window-1; background-color: #1c7487; }

.window-2 { grid-area: window-2; background-color: #1c7487; }

.window-3 { grid-area: window-3; background-color: #1c7487; }

.window-4 { grid-area: window-4; background-color: #1c7487; }

.window-5 { grid-area: window-5; background-color: #1c7487; }

.window-6 { grid-area: window-6; background-color: #1c7487; }

.window-7 { grid-area: window-7; background-color: #1c7487; }

.window-8 { grid-area: window-8; background-color: #1c7487; }

.window-9 { grid-area: window-9; background-color: #1c7487; }