html {
  height: 100%;
  width: 100%;
}
body { 
  opacity: 0;
  transition: opacity .5s, background-color 1s;
}
.scene { 
  opacity: 0;
  transition: opacity .5s;
  display: flex;
  justify-content: center;
}
.divider {
  margin:100px ;
  transition: opacity .5s;
  opacity: 0;
}
.spacer {
  margin:5vw ;
}
.smallspacer {
  margin:2vw ;
}
.spacer2 {
  margin:1vw ;
}
.text {
  font-size: 3vw;
  margin:100px ;
  color: white
}
.text2 {
  font-size: 3vw;
  margin: 6.8vw;


}

@keyframes rotate360 {
  to { transform: rotate(360deg); }
}
.getrotatedidiot { 
  animation: 2s rotate360 infinite linear;
  background: #ffffff;
  height: 100px;
  width: 100px;
  position: relative;
  left: 0;
  top: 0;
}

.swal-text {
  line-height: 1.7;
  color: #242322;
  
}

.questmarkerbutton {
  left: 0;
  top:0;
  background-color: lightgray;
  width: 50px;
  height: 50px;
  border: 2px solid gray;
  text-align: center;
  font-size: 20px;
  position: absolute;
  z-index: 4;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.questmarkerbutton:hover {
  background-color: gray;
  border: 2px solid lightgray;
  color: white;
}
.questmarkertable {
  left: 0;
  top: 0;
  width: 480px;
  height: 30px;
  position: absolute;
  z-index: 3;
}

.playerstable {
  right: 0;
  top: 0;
  width: 205px;
  height: 30px;
  position: absolute;
  z-index: 3;
}

.groupstable {
  right: 0;
  top: 0;
  width: 165px;
  height: 30px;
  position: absolute;
  z-index: 3;
}
.groupsmove {
  background-color: lightgray;
  width: 50px;
  height: 30px;
  border: 2px solid gray;
  text-align: center;
  font-size: 85%;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0px;
  top: 0px;
  position: absolute;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.groupsmove:hover {
  background-color: gray;
  border: 2px solid lightgray;
  color: white;
}
.groupsid {
  background-color: lightgray;
  width: 80px;
  height: 30px;
  border: 2px solid gray;
  text-align: center;
  font-size: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 50px;
}

.groupsvisible {
  width: 30px;
  height: 30px;
  text-align: center;
  font-size: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 135px;
}
.groupsvisible:hover {
  cursor: pointer;
}

.groupsicon {
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 3;
  transition: transform ease 300ms, opacity ease 0.5s;
  filter: drop-shadow(5px 12px 10px black);
}
.groupsiconhover {
  filter: drop-shadow(5px 12px 10px black);
  cursor: pointer;
}
.groupsiconfake {
  position: absolute;
  width: 40px;
  height: 40px;
  opacity: 60%;
  z-index: 3;
}

.playersicon {
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 3;
  transition: transform ease 300ms, opacity ease 0.5s;
  filter: drop-shadow(5px 12px 10px black);
}
.playersiconhover {
  filter: drop-shadow(5px 12px 10px black);
  cursor: pointer;
}
.playersiconfake {
  position: absolute;
  width: 40px;
  height: 40px;
  opacity: 60%;
  z-index: 3;
}

.playersmove {
  background-color: lightgray;
  width: 50px;
  height: 30px;
  border: 2px solid gray;
  text-align: center;
  font-size: 85%;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0px;
  top: 0px;
  position: absolute;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.playersmove:hover {
  background-color: gray;
  border: 2px solid lightgray;
  color: white;
}
.playersgroup {
  right: 50px;
  
  background-color: lightgray;
  width: 40px;
  height: 30px;
  border: 2px solid gray;
  font-size: 70%;
  text-align: center;
  position: absolute;
  display: inline-block;
}
.playersgroup:hover {
  cursor: pointer;
}
.playersgroup:focus {
  outline: none;
}
.playersname {
  background-color: lightgray;
  width: 80px;
  height: 30px;
  border: 2px solid gray;
  text-align: center;
  font-size: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 90px;
}
.playersvisible {
  width: 30px;
  height: 30px;
  text-align: center;
  font-size: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 175px;
}
.playersvisible:hover {
  cursor: pointer;
}

.questmarkerid {
  background-color: lightgray;
  width: 30px;
  height: 30px;
  border: 2px solid gray;
  text-align: center;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.questmarkertitle {
  left: 30px;
  top: -30px;
  background-color: lightgray;
  width: 80px;
  height: 30px;
  border: 2px solid gray;
  font-size: 70%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative
}
.questmarkertitle:focus {
  outline: none;
}
.questmarkerdescrip {
  left: 110px;
  top: -60px;
  background-color: lightgray;
  width: 200px;
  height: 30px;
  border: 2px solid gray;
  font-size: 70%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  resize: none;
  z-index: 1;
  transition: z-index 0s, box-shadow 0.3s;
  overflow: hidden;
}
.questmarkerdescrip:focus {
  height: 100px;
  position: relative;
  filter: drop-shadow(0px 12px 10px black);
  outline: none;
  overflow: auto;
}
.questmarkercolor {
  left: 310px;
  top: -90px;
  background-color: lightgray;
  width: 80px;
  height: 30px;
  border: 2px solid gray;
  font-size: 70%;
  text-align: center;
  position: relative;
  display: inline-block;
}
.questmarkercolor:hover {
  cursor: pointer;
}
.questmarkercolor:focus {
  outline: none;
}

.questmarkermove {
  background-color: lightgray;
  width: 50px;
  height: 30px;
  border: 2px solid gray;
  text-align: center;
  font-size: 85%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  left: 390px;
  top: -120px;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.questmarkermove:hover {
  background-color: gray;
  border: 2px solid lightgray;
  color: white;
}

.questmarkerdelete {
  background-color: transparent;
  width: 30px;
  height: 30px;
  border: 4px solid gray;
  text-align: center;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: gray;
  left: 450px;
  top: -150px;
  font-weight: bold;
  border-radius: 100px;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.questmarkerdelete:hover {
  background-color: gray;
  border: 2px solid transparent;
  color: white;
}
.questimgmarker {
  position: absolute;
  width: 30px;
  height: 45px;
  opacity: 60%;
  z-index: 3;
}

.questimgmarkerperm {
  position: absolute;
  width: 30px;
  height: 45px;
  z-index: 3;
  transition: transform ease 300ms, opacity ease 0.5s;
  filter: drop-shadow(5px 12px 10px black);
}
.questimgmarkerpermhover {
  filter: drop-shadow(5px 12px 10px black);
  cursor: pointer;
}

.resize {
  font-size: 2vw;
}
.but {

  font-size: 1vw;
  background-color: white;
  height: 4vw;
  border: 3px solid #777777;
  color: black;
  width: 90%;

  border-radius: 12px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  transition: border 0.5s, height 0.5s, width 0.5s, opacity 1s;

}
.but2 {

  font-size: 1vw;
  background-color: white;
  height: 4vw;
  border: 3px solid #777777;
  color: black;
  width: 90%;

  border-radius: 12px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  transition: border 0.5s, height 0.5s, width 0.5s, opacity 1s;

}

.butdisp {
  font-family: Medio;
  font-size: 2.5vw;
  background-color: white;
  height: 28vw;
  width: 22vw;
  border: 3px solid #14488C;
  color: black;

  border-radius: 12px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  transition: border 0.5s, height 0.5s, width 0.5s, opacity 1s;

}


.butdisp:hover {
  font-family: Medio;
  font-size: 2.5vw;
  background-color: white;
  height: 29vw;
  width: 23vw;
  border: 3px solid #777777;
  color: black;

  border-radius: 12px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);


}
.butdisp3 {
  font-family: Medio;
  font-size: 2.5vw;
  background-color: white;
  height: 28vw;
  width: 22vw;
  border: 3px solid pink;
  color: black;

  border-radius: 12px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  transition: border 0.5s, height 0.5s, width 0.5s, opacity 1s;

}
.butdisp3:hover {
  font-family: Medio;
  font-size: 2.5vw;
  background-color: white;
  height: 29vw;
  width: 23vw;
  border: 3px solid pink;
  color: black;

  border-radius: 12px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);


}
.butdisp2 {
  font-family: Medio;
  font-size: 2.5vw;
  background-color: white;
  height: 28vw;
  width: 22vw;
  border: 3px solid #14488C;
  color: black;

  border-radius: 12px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  transition: border 0.5s, height 0.5s, width 0.5s, opacity 1s;

}
.butdisp2:hover {
  font-family: Medio;
  font-size: 2.5vw;
  background-color: white;
  height: 29vw;
  width: 23vw;
  border: 3px solid #777777;
  color: black;

  border-radius: 12px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);


}
.but:hover {
  background-color: #777777;
  color: white;
  border: 3px solid white;


}
.but2:hover {
  background-color: #777777;
  color: white;
  border: 3px solid white;


}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.arch{
  position: absolute;
  padding: 0;
  margin-left: 115px;
  margin-top: 70px;
  line-height: 100px;
}
.archload{
  opacity: 0;
  height: 10px;
  width: 10px;
}
.arch2{
  position: absolute;
  padding: 0;
  width: 950px;
  height: 950px;
  margin-left: 115px;
  margin-top: 70px;
  line-height: 100px;
  text-align: center;
  border-radius: 50%;
  color: white;
  background-image: conic-gradient(
      rgb(255, 0, 0,0.2) 45deg,
      rgba(255,255,255,0) 0
  );
  transform: rotate(50deg);
}
.circ{
  position: absolute;
  padding: 0;
  width: 570px;
  height: 570px;
  margin-left: 305px;
  margin-top: 268px;
  line-height: 100px;
  text-align: center;
  border-radius: 50%;
  color: white;
  background-color: rgb(255, 0, 0,0);
  
}
.loadtext {
  left: 35px;
  top: 130px;
  position: absolute;

}
.arch3{
  position: absolute;
  padding: 0;
  width: 950px;
  height: 950px;
  margin-left: 115px;
  margin-top: 70px;
  line-height: 100px;
  text-align: center;
  border-radius: 50%;
  color: white;
  background-image: conic-gradient(
      rgb(129, 86, 86,0.2) 60deg,
      rgba(255,255,255,0) 0
  );
  transform: rotate(115deg);
}

.img-container {
    display: inline-block;
    position: relative;
}
.positioning{
    position: absolute;
    right: 15px;
    bottom: 22px;
    background-color: red;
    color: white;
    padding: 4px;
    font-size: 17px;
    line-height: 18px;
}
.input {

  font-size: 1vw;
  background-color: white;
  height: 3vw;
  border: 2px solid #000000;
  color: black;
  width: 90%;

  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}
.loginpage {
  margin-left: 33%; 
  padding: 30px;
  background-color: #14488C;
  height:  auto;
  border: 0px solid #000000;

  width: 33%;
  border-radius: 12px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}

@media (max-width: 500px) {
  .butdisp {
    font-family: Medio;
    font-size: 25px;
    background-color: white;
    height: 280px;
    width: 220px;
    border: 3px solid #14488C;
    color: black;

    border-radius: 12px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    transition: border 0.5s, height 0.5s, width 0.5s, opacity 1s;

  }
}