.container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    margin: 0;
}

h1{
    font-family: 'Sigmar One', cursive;
    display: block;
    text-align: center;
    width: 100%;
}

.descriptor{
    font-size: 10px;
    color: #87817E;
}
input{
   margin: 2px 0 15px 0;
   width: 70px;
   height: 20px;
   text-align: right;
   font-family: 'Poppins', sans-serif;
}

.zip-error{
    display: none;
    color: red;
    font-family: 'Poppins', sans-serif;
    margin-top: -16px;
    font-size: 9px;
}

input:focus {
    background-color: #F1E2DA;

}
form{
    display: flex;
    width: 80%;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
}

.radius-text-holder{
    display: block;
    height: 20px;
}

#radiusText{
    position: relative;
    font-size: 9px;
}

select{
    height: 30px;
    margin: 2px 0 15px 0;
    border-radius: 5%;
    font-family: 'Poppins', sans-serif;
}

button{
    padding: 0;
    margin: 0;
}

.slidecontainer{
    text-align: center;
    width: 15%;
    min-width: 150px;
    font-family: 'Poppins', sans-serif;
    font-size: .8em;
}

/*-https://www.w3schools.com/howto/howto_js_rangeslider.asp*/
.slider{
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 10px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 20px; /* Set a specific slider handle width */
    height: 20px; /* Slider handle height */
    background: rgb(121, 192, 124); /* Green background */
    cursor: pointer; /* Cursor on hover */
    border-radius: 30%;
  }

  .slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
  }

  .slider::-webkit-slider-thumb:hover{

  }

#go{
    width: 75px;
    height: 75px;
    border-radius: 50%;
    margin: 10px 0;
    background: radial-gradient(#3DDD9B , rgb(142, 104, 131)); 
    color: #111245;
    font-size: 30px;
    border: 2px solid #D9C0B5;
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

#go:hover{
    background: radial-gradient(#E1541C, #4F3429);
    color: #932707;
    font-size: 32px;
}


.background{
    width: 100%;
    height: 100%;
    background: url("images/bars.png");
    background-position: top;
    background-repeat: no-repeat;
    background-size:50%;
    height: -webkit-fill-available;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.footer {
    background: url("images/duck.jpeg");
}

.search-results{
    /* dynamic page size formatting */
    font-size: 1vw;
    margin-top: 7%;
    width: 15%;
    height: 16vw;
    padding-bottom: 2%;
    /* */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; 
    display: flex;
    flex-direction: row;

}

.resultsText{
    width: 100%;
    margin: 3px 0;
    border-bottom: solid 2px;
    border-image: linear-gradient(to left, transparent 0%, #6d8079 50%, transparent 100%);
    border-image-slice: 1;
    flex-shrink: 0;
    scroll-snap-align: start;
    text-align: center;
    padding: .05em .4em .05em 0;
    font-family: 'Poppins', sans-serif;
}

/*results scroll bar*/
/* width */
.search-results::-webkit-scrollbar {
    width: .5vw;
    height: 1.5vw;
    cursor: pointer;
  }
  
  
  /* Track */
  .search-results::-webkit-scrollbar-track {
    background: #696969;
    cursor: pointer;
  }
  
  /* Handle */
  .search-results::-webkit-scrollbar-thumb {
    background: rgb(88, 156, 114);
    border-radius: 50%;
    cursor: pointer;
  }
  
  /* Handle on hover */
  .search-results::-webkit-scrollbar-thumb:hover {
    background: rgb(155, 96, 20);
    cursor: pointer;
  }

  .triangle-left {
    float: left;
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid #555;
    border-bottom: 25px solid transparent;
    background: transparent;
    border-left: transparent;
    position: relative;
    padding: 0;
    margin: 0;
    bottom: -27vw;
    left: -12vw;

  }

  .top-triangle-left {
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-right: 35px solid white;
    border-bottom: 15px solid transparent;
    background: transparent;
    border-left: transparent;
    position: absolute;
    padding: 0;
    margin: 0;
    top: 78%;
    left: 42.9%;
  }

.triangle-right {
    float: left;
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-left: 50px solid #555;
    border-bottom: 25px solid transparent;
    background: transparent;
    border-right: transparent;
    position: relative;
    padding: 0;
    margin: 0;
    bottom: -27vw;
    left: 13vw;
}

.top-triangle-right {
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-left: 35px solid white;
    border-bottom: 15px solid transparent;
    background: transparent;
    border-right: transparent;
    position: absolute;
    padding: 0;
    margin: 0;
    top: 78%;
    right: 42.9%;
}
.triangle-left:hover {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid rgb(155, 43, 43);
    border-bottom: 25px solid transparent;

}

.top-triangle-left:hover {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-right: solid rgb(155, 43, 43);
    border-bottom: 25px solid transparent;
    content: "spooky"
}

.triangle-right:hover {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-left: 50px solid rgb(155, 43, 43);
	border-bottom: 25px solid transparent;
}


/*-formatting for mobile-*/
@media only screen 
    and (max-width: 500px) {

    .background{
        width: 100%;
        height: 600px;
        background: url("images/justGPS.png");
        background-position: top;
        background-repeat: no-repeat;
        background-size:50%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .search-results{
        margin-top: 14%;
        width: 31%;
        height: 34vw;
        padding-bottom: 5%;   
    }

    .resultsText{
        font-size: 2vw;
    }
    .triangle-left {
       bottom: -55vw;
       left: -25vw;
    }

    .triangle-right {
        bottom: -55vw;
        left: 25vw;
    }
      

}

/*-formatting for mobile in landscape mode -*/
@media only screen 
    and (max-device-width: 667px) 
    and (orientation: landscape) {

        .background{
            width: 100%;
            height: 600px;
            background: url("images/justGPS.png");
            background-position: top;
            background-repeat: no-repeat;
            background-size:50%;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }
    
        .search-results{
            margin-top: 14%;
            width: 31%;
            height: 34vw;
            padding-bottom: 5%;    
        }
    
        .resultsText{
            font-size: 2vw;
        }
        .triangle-left {
            bottom: -50vw;
            left: -25vw
        }
    
        .triangle-right {
            bottom: -50vw;
            left: 25vw
        }





}