/*Fonts*/
 @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Patua+One&display=swap');

 /*Colours*/
 :root {
   --darcula-black: hsl(0, 0%, 10%);
 }

 * {
   box-sizing: border-box;
 }

 body{
  font-family:'lato';
 }

 .red-square {
   background-color: red;
   border: 3px solid darkred;
 }

 .amber-square {
   background-color: orange;
   border: 3px solid darkorange;
   position: relative;
   z-index: 1;
 }

 .green-square {
   background-color: green;
   border: 3px solid darkgreen;
 }

 /****************Autocomplete*************************/
 .form{
  
   display: inline-block;
 }

 .form-control input {
  position: relative;
   border: 2px solid transparent;
   background-color: #f1f1f1;
   padding: 10px;
   font-family: inherit;
   color: black;
   filter: drop-shadow(0px 10px 8px #000);
   background-color: #f1f1f1;
   width: 200px;
 }

 .form-control button {
   cursor: pointer;
   border:none;
   filter: drop-shadow(0px 10px 8px #000);
   font-weight: 600;
   background-color: black;
   padding: 5px;
   height:45px;
   width: 90px;
   font-family: inherit;
   color: #fff;
 }

 .form-control small{
  visibility: hidden;
  font-family: inherit;
  position: absolute;
  top: 60px;
  right: 140px;
 }

 .form-control.error input{
  border: 3px solid #C80815;
 }

 .form-control.error small{
  visibility: visible;
  color:#C80815;
 }




 .autocomplete-items {
   width: 200px;
   position: relative;
   border: none;
   z-index: 99;
   left: 76px;

 }

 .autocomplete-items div {

  color: #ffffff;
   padding: 10px;
   cursor: pointer;
   background-color: #303030;
   border: 1px solid #1e1e1e;
    

 }

 .autocomplete-items div:hover {
   background-color: #212121;
 }

 .autocomplete-active {
   background-color:  #212121 !important;
   
 }

 body {
   display: flex;
   flex-direction: column;
   background-color: var(--darcula-black);
 }

 h1,
 h2,
 h3 {
   color: #e9e9e9;
   font-family: 'Patua One';
   font-weight: 500;
 }

 p {
   font-size: 1.5em;
   font-family: 'lato';
 }

 main {
  max-width: 450px;
   margin: 0 auto;
 }

 .app-body {
   display: flex;
   flex-direction: column;
   text-align: center;
   margin: 40px auto;
 }

 #app-subtitle {
   margin: 30px auto;
 }

 .app-title {
  margin-top: 80px;
   text-align: center;
   font-size: 3em;
   font-weight: 500;
 }


 .results-container-header {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   grid-template-rows: auto;
   justify-items: center;
   margin: 100px auto 0;
 }

 .results-container {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   grid-template-rows: auto;
   justify-items: center;
   margin: auto;
 }

 .square {
   width: 4em;
   height: 4em;
   margin: 10px 6px;
   border-radius: 8px;
   word-break: break-all;
   text-align: center;
 }

 .square>p {
   font-size: 18px;
   text-align: center;
   color: white;
   -webkit-text-stroke: 4px black;
   paint-order: stroke fill;
   position: relative;
   bottom: 9px;
   z-index: 3;
 }

 .up-arrow {
   position: absolute;
   right: -3px;
   bottom: -3px;
   z-index: 2;
   transform: rotate(-0.50turn);
   width: 4em;
   height: 4em;

 }

 .down-arrow {
   position: absolute;
   right: -3px;
   bottom: -3px;
   z-index: 2;
   transform: rotate(1turn);
   width: 4em;
   height: 4em;
 }






 @media only screen and (max-width: 480px) {
   .results-container {
     overflow-x: auto;
   }

 }