body{
    background-color: #ffffff;
    line-height: 1.8rem;
}


.btn-outline-primary{
    margin-top:2rem;
    }


    h2{
        font-size:1.8rem;
    }

h4{
    color:#707070;
    padding-top:1rem;
}

p{
    padding-top:0rem;
}

.img-fluid :hover{
    opacity: 50%;
}
.container {
    position: absolute;
    width: 30vw;
    height: 40vh;
    top: 16vh;
    right: 5vw;
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateY(-45deg);
  }
  .box {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: rotation 45s linear infinite ;
  }
  .box span {
    position: absolute;
    display: block;
    width: 10%;
    height: 100%;
    border-radius: 0.5rem;
  }
  .box span:nth-child(1) {
    background: linear-gradient(#4e48b5 50%, #4f3587 50%);
    transform: rotateX(0deg);
    opacity:90%;
  }
  .box span:nth-child(2) {
    background: linear-gradient(#181354 50%, #3c386b 50%);
    transform: rotateX(90deg);
    opacity:90%;
  }
  
  @keyframes rotation {
    0% {
      transform: rotateX(0deg);
    }
    100% {
      transform: rotateX(359deg);
    }
  }

  #zoomA {
    cursor: pointer;
	transition: transform ease-in-out 0.3s;
  }
   
  #zoomA:hover { transform: scale(0.95); }

#solution{
text-align: center;
margin:0;
padding:0;
}

#map-img{
  width: 70rem;
  height: auto;
  margin:0;
  padding:0;
}


#logos{
    width:15rem;
    height:fit-content;
    margin:0rem;
    padding:0rem;
    padding-left: 3rem;

}

#description-img{
    display:flex;
    padding-top:1.5rem;
}

#map-main{
    width: 50rem;
    height: auto;
    margin-top:4rem;
    padding:0;
}

.head-sect{
    font-size:1.1rem;
}

#mid-header{
    padding-top:2rem;
}

ol{
    list-style:none;
}

#map-sketch{
    width:25rem;
}

#lol{
  padding:2rem;
  margin:0;
  background-color: rgb(230, 246, 255);
  border-radius:0.2rem;
}

.comparison-image{
  padding:0;
  margin:0;
  width:30rem;
  cursor: pointer;
  transition: transform ease-in-out 0.3s;
  box-shadow:none;
}
 
.comparison-image:hover { 
-moz-box-shadow: 0 0 0.5rem #c7b5fc;
-webkit-box-shadow: 0 0 0.5rem #c7b5fc;
box-shadow: 0 0 0.5rem #c7b5fc;
  transform: scale(1.35); }



.center{
  text-align:center;
}

.conclusion-image{
  text-align: center;
  width:60rem;
}
#choices{
  background-color: rgb(230, 246, 255);
}

#foot{
  text-align:center;
  color:black;
}

a:hover,a:visited { color:#000; }