@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&display=swap');
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
    body {
      margin: 0;
     font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
      background-color: #f4f4f4;
    }
   h1{
        font-family: "Sora", -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; 
        font-weight: 800;
        font-size: 50px; line-height:46px;
        width: 250px;
        height: 60px;
        margin-top: -10px;
      }

    h2{
      font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
      font-size:28px;
      }
    header {
      background-color: #333;
      color: #fff;
      padding: 2px 0;
    }

    .container {
      max-width: 1024px;
      margin: 0 auto;
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

  .boxhead {
      flex: 0 0 calc(90% - 5px);
      margin-bottom: 20px;
      box-sizing: border-box;

    }

    .box {
      flex: 0 0 calc(30% - 5px);
      margin-bottom: 20px;
      border-radius: 8px;
      box-sizing: border-box;
    }

  .bnw {
      flex: 0 0 calc(30% - 5px);
      margin-bottom: 20px;
      border-radius: 8px;
      box-sizing: border-box;
    }

    .bnw a{
      flex: 0 0 calc(30% - 5px);
      margin-bottom: 20px;
      border-radius: 8px;
      box-sizing: border-box;
      filter: grayscale(100%);
    }

.nav a{
   font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
      font-size:14px; font-style: italic; color: #fff; text-decoration: none;
    }
    img {
      max-width: 100%;
      height: auto;
    }

    .item {
  position: relative;
  margin: 10px;
  overflow: hidden;
  border-radius: 8px;
}

.item img {
  max-width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.item:hover img {
  transform: scale(1.1);
}

.item:hover .overlay {
  opacity: 1;
}


button{
  background-color:#f4f4f4;
}
    .nav-buttons {
      position: fixed;
      top: 0;
      right: 0;
      padding: 10px;
       font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 240px;
    }

    .nav-buttons button {
   
      font-size: 14px;
      border: none;
      padding: 10px;
      cursor: pointer;
    }
    @media (max-width: 640px) {
      .box {
        flex: 0 0 calc(100% - 20px);
      }
    }