body {
   background-image: url('/traditional_art_portfolio/32x32bg.png');
   background-attachment: fixed;
   
   }
   
  * {
         box-sizing: border-box;
     }
         
      .container {
          display: flex;
          flex-direction: column;
          width: 75%;
          background-color: #dcc9a3;
            border-top: solid 2px #947538;
            border-left: solid 2px #947538;
            box-shadow: 3px 3px 2px #fefefe inset;
            box-shadow: 3px 3px 2px;
          margin: auto;
      }
      
      .head {
            background-color: #b99346;
            color: white;
            font-family: Verdana;
            font-size: 12px;
            height: 25px;
                
            }
            
        .here {
          background-color: rgb(218,218,218);
          box-shadow: 2px 2px 2px inset;
            border-bottom: solid 2px white;
            border-right: solid 2px white;
        }
        
        .intro {
          display: flex;
          flex-direction: column;
        }
        
        #comment {
          width: 60%;
          border-top:solid 2px #848482;
          border-left: solid 2px #848482;
          border-right: solid 2px #fefefe;
          border-bottom: solid 2px #fefefe;
          font-family: courier;
          font-size: 16px;
        }
        
        span.none {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-top: -19px;
            margin-right: 5px;
        }
        
        span.none > div {
            color: black;
            background-color: #c3c3c3;
            width: 18px;
            font-size: 12px;
            box-shadow: 2px 2px black;
            top: 0;
            text-align: center;
            border-top: solid 2px white;
            border-left: solid 2px white;
            border-bottom: solid 2px #848482;
            border-right: solid 2px #848482;
        }
        
        span.none > div:hover {
            background-color: #DD7F38;
            cursor: not-allowed;
        }
        
        .nav {
            white-space: pre;
            height: 15px;
            padding-bottom:25px;
            top: 0;
            border-bottom: solid 1px #848482;
            z-index: 90;
            
        }
      
      .secondary {
          border-top: solid 1px white;
          padding-top: 15px;
          padding-left: 20px;
          padding-bottom: 15px;
          z-index: 100;
      }
        
        h4 {
            margin-top: 5px;
        }
        
        p {
            margin-top: -32px;
            margin-left: 14px;
            font-size: 17px;
            }
      .one {
            width: 99%;
            height: 33px;
            display: flex;
            flex-direction: column;
            margin: 4px;
            }
      
     .grid {
       display: grid;
       grid-template-columns: repeat(3, 30%);
       justify-content: center;
       align-content: center;
       grid-gap: 10px;
       margin-left: 100px;
       margin-right: 100px;
     }
      
      .grid img {
          border-top: solid 2px black;
          border-left: solid 2px black;
          border-right: solid 2px white;
          border-bottom: solid 2px white;
      }
     
      .grid:after {
       content: "";
       display: table;
       clear: both;
     }
     
     .grid img:hover {
       opacity: 0.8;
       cursor: pointer;}
     
      a {
            color: black;
            text-decoration: none;
            font-family: verdana;
            font-size: 12px;
                   }
        a:hover {
            background-color: #dbdbdb;
            box-shadow: 2px 2px 2px inset;
            border-bottom: solid 2px #fefefe;
            border-right: solid 2px #fefefe;
            padding: 3px;
            
        }
         a:visited {
                color: black;
                text-decoration: none;
            }
      
     .modal {
       display: none;
       position: fixed;
       z-index: 110;
       padding-top: 100px;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       overflow: auto;
       background-color: rgba(255,255,255,0.9);
     }
     
     .modal-content {
       position: relative;
       margin: auto;
      padding: 0;
      max-width: 500px;}
     
     .close {
       color: black;
       width: 30px;
       height: 30px;
       position: absolute;
       text-align: center;
       justify-content: center;
       top: 10px;
       right: 25px;
       font-size: 35px;
       font-weight: bold;
         background-color: #c3c3c3;
         border-top: solid 2px white;
         border-left: solid 2px white;
         border-bottom: solid 2px black;
         border-right: solid 2px black;
         vertical-align: text-top;
     }
            
      
     
     .close:hover, .close:focus {
       background-color: #f3f3f3;
       text-decoration: none;
       cursor: pointer;
     }
     
    .mySlides {
      display: none;
      }
    
    .cursor {
  cursor: pointer;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 12px;
  margin-top: -50px;
  color: black;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: #c3c3c3;
  border-top: solid 2px white;
    border-left: solid 2px white;
    border-right: solid 2px black;
    border-bottom: solid 2px black;
  -webkit-user-select: none;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


.prev:hover,
.next:hover {
    background-color: #f3f3f3;
    border-radius: 0 3px 3px 0;
    padding: 12px;
}

@media screen and (max-width: 800px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    margin-left: 10px;
    margin-right: 10px}
  .container {
          display: flex;
          flex-direction: column;
          width: 98;}
}

@media screen and (max-width: 1200px) {
  .container {
          display: flex;
          flex-direction: column;
          width: 98%;}
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    margin-left: 15px;
    margin-right: 15px;}
}

img {
  margin-bottom: -4px;}
  
  .caption-container {
    text-align: center;
    font-family: verdana;
    background-color: rgba(0,0,0,0);
    padding: 2px 16px;
    margin-top: 35px;
    color: black;
    font-size: 12px;}
    
    .active {opacity: 1;}
        
  
      .two {
        display: flex;
        flex-direction: row;
          width: 100%;
      }

    #featured {
    margin-top: 60px;
      text-align: center;
      padding-bottom: 15px;
        }
      
      #featured img {
          border-top: solid 2px black;
      border-left: solid 2px black;
        border-right: solid 2px white;
        border-bottom: solid 2px white;
      }