/*Jess start*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;900&display=swap');

/* original css*/
body {
    background-color: rgba(58,68,93);
}

/* #carouselExampleControls {
    margin: 10px
} */

/* original css */
#navbarNavAltMarkup {
    justify-content: center;
    margin-top: 30px;
}

/* original css */
.top-nav {
    text-align: center;
    justify-content: center;
    border-bottom: 1px solid white;
} 

nav {
    width: 60%;
    margin: 40px auto;
    border-radius: 5px;
}

/*foundation search bar*/

.searchbar {
    margin: 1rem;
    justify-content: center;
  }
  
  .search-field {
    width: 0;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 50px;
    border: none;
    transition: all 0.5s ease;
  }
  
  .expand-search {
    width: 80%;
    max-width: calc(80% - 3rem);
    padding: .5rem;
  }
  
  svg {
    width: 20px;
    height: 20px;
  }
  
  #search-icon {
    border-radius: 5px;
    background-color: #DE3C4B;
  }
  
  /*
  .input-group-button {
      margin-left: 70px;
  }*/

  #input-storage {
    height: auto;
    display: none;
    padding: 10px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.2);
    margin-right: 1%;
  }

  #weather-block{
      display: none;
  }

  .first-row {
    margin: 5%;
    justify-content: space-evenly;
    flex-direction: row-reverse;
    align-items: end;
  }

  .weather {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    margin-right: 1%;
    border-radius: 5px;
  }

  #current-weather {
    margin: 15px;
    border: solid 1px #ccc;
    border-radius: 5px;
    padding: 10px;
    letter-spacing: 1px;
}

  .list-group {
      margin-left: 0;
  }

  .gal-row {
    margin-top: 48px;
}
  

a {
    font-weight: 600;
}


.nav-link {
    color: black;
}


h1 {
    color: white;
    font-weight: 600;
    text-align: center;
} 

h1,
.nav-link {
    font-family: 'Noto Sans SC', sans-serif;
}


footer {
    height: 30px;
    margin: 0;
    width: 100%;
    background-color: #027BCE;
    
}


/*ivan start */
/* modifying buttons */
.btn-outline-warning {
    border-color: orange;
    background-color: cornflowerblue;
}

.navbar-light .navbar-nav .nav-link {
    color: black;
    font-weight: bold;
    margin-right: 10px;
}

button:hover {
    background-color: orange !important;
    border-color: cornflowerblue !important;
}


/* ivan stop
/*Mobile and tablet*/

@media only screen and (max-width: 1200px) and (min-width: 651px)  {

    #input-storage, #weather-block {
        margin-bottom: 20px;
    }

    .gal {
        padding: 0;
    }

}




@media only screen and (max-width: 650px) {

    nav  {
    width: 85%;

    }

    .searchbar {
    margin: 20px auto;

    }

    #input-storage {
        max-width: 100%;
        margin-bottom: 8px;
    }
  
    #carouselExampleControls {
        /*width: 90%;*/
        margin: 30px auto;
    }

    .input-group-button {
        margin-left: 0px;
    }

    /* .expand-search {
       width: 90%;
    } */

    .gal-row {
        margin-left: 0;
        margin-left: 0;
        margin-top: 10px;
    }

  }

  li:hover{
    color:red
  }



  /* malcolm
  css additions from anthony:
  height: 500;
  width: 500;
  background-position: center;
  background-size: contain; 
  background-repeat: no-repeat;
  use js to inject the style  */