/*test css file*/

* {
    box-sizing: border-box;
  }
hr {
    width: 80%;
    text-align: center;
    color: yellowgreen;
    margin-top: 6px;
}
.accent{
    color: rgb(100, 100, 100);
  }
.title {
    color:white;
    font-size:6vw;
    text-shadow: 2px 2px gray;
    text-align: center;
    margin: auto;
  }
  .subtitle {
    color:yellowgreen;
    font-size:2vw;
    font-style: italic;
    text-shadow: 2px 2px gray;
    text-align: center;
  }
.header {
    background-color: #f1f1f1;
    padding: 20px;
    text-align: center;
  }  

h1  {
    color:white;
    font-size:6vw;
    text-shadow: 2px 2px gray;
    text-align: center;
    }

h2  {
    color: yellowgreen;
    text-align: right;
    padding: 50px 50px;
    }

h3  {
    color: gray;
    text-align: center;
    padding: 10px 50px;
    background-color: rgba(255, 255, 255, 0.5);
    }

a   {
    color:  rgb(100, 100, 100);

    }
a:hover   {
        color:  white;
    
        }
body {
    background-image: url("/ArtApp/art/Water-Lillies-Monet.jpg");
    background-repeat:repeat-x;
    background-position: left top;
    background-attachment:fixed;
    
    /*background-position: center top;
    background-size: 100% auto;*/
    }


input[type=button], input[type=submit], input[type=reset] {
    background-color: #04AA6D;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    }

input[type=text] {
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding-left: 40px;
    }

input[type=text]:focus {
    border: 3px solid #555;
    }

select {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: #f1f1f1;
    }
    

.inline {
        display: inline;
}
.shadowdark {
    box-shadow: 10px 10px 5px rgba(180, 180, 180, 0.5);
    mix-blend-mode: multiply;
}

.portrait {
    position: relative;
    border: 2px;
    border-color: indianred;
}
.portraitimg:hover{
    width: 300px;
    height: auto;

}  
.portraitimg{
    width: 50px;
    height: auto;
}

.portraitshadow {
    position: absolute;
    left: 20px;
    width: 50px;
    height: auto;
}
.portraitshadow2:hover {
    
    left: 20px;
    width: 300px;
    height: auto;
}
  
.fullimg {
    width: 100%;
    height: auto;
  }    
.center {text-align: center;}
.right  {text-align:right;}
.left {text-align:left;}
.blue   {color: blue;}     
.red    {color:red;}
.green  {color:green;}
.white  {color:white;}
.yellowgreen  {color:yellowgreen;}
.turquoise {color:turquoise;}
.bluegray {color:lightblue;}
.brightgreen {color:#04AA6D;}
.gray {color:lightgray;}

.flex {display: flex; }
.flexcolumn {flex-direction: column; }
.flexrow {flex-direction: row; }
.flexright {justify-content: flex-end; align-items:flex-end;}
.flexleft {justify-content: flex-start; align-items: flex-start;}
.flexcenter {justify-content: center; align-items:center;}
.flexaround {justify-content: space-around;}
.flexbetween {justify-content: space-between;align-items:last baseline;}
.flexevenly {justify-content: space-evenly;}
.flexbottom {align-content: flex-end; align-items:last baseline;}
.width20 {width: 20%;}
.width40 {width: 40%;}
.width50 {width: 50%;}
.width60 {width: auto;}
.widthauto {width: auto;}
.pad30 { padding:16px; margin: auto; margin-left: 20px;}
.font18 {font-size: 18px;}
.font16 {font-size: 16px;}
.fullheight{height:100%;}

.topright{justify-content: flex-start;align-items:flex-end; }

.topleft{justify-content: flex-start;align-items:flex-start; }
.topcenter{justify-content: flex-start;align-items:center; }
.centerright{justify-content: center;align-items:flex-end; }
.centerleft{justify-content: center;align-items:flex-start;}
.centercenter{justify-content: center;align-items:center;}
.bottomright{justify-content: flex-end;align-items:flex-end; }
.bottomleft{justify-content:flex-end;align-items:flex-start;  }
.bottomcenter{justify-content: flex-end;align-items:center; }

.margin10{margin:10px;}
.margin20{margin:20px;}
.margin30{margin:30px;}
.margin40{margin:40px;}
.marginlr10{margin: 0px 10px;}
.marginlr20{margin: 0px 20px;}
.marginlr30{margin: 0px 30px;}
.marginlr40{margin: 0px 40px;}

.hidden{display:none;}
.show{display: flex;}

.whiteonblack50{
    background-color:rgba(0, 0, 0, 0.5) ;
    color: white;
    padding: 10px;
    border-radius: 5px;
    margin-bottom:20px;
    margin-right:20px;
}

.blackonwhite50{
    background-color:rgba(255, 255, 255, 0.5) ;
    color: black;
    padding: 10px;
    border-radius: 5px;
    margin-bottom:20px;
    margin-right:20px;
}

.margin{margin:20px;}

.size{font-size:14px;}

.heading1 {
    font-size:2vw;
    
}

.filter {
    width:auto; 
    padding: 0px; 
    margin: 0px 0px;
    font-size: 16px;
    }

.filterbar {
    width:80%; 
    background-color:rgba(255, 255, 255, 0.5) ;
    padding:14px 20px;
    display: inline-flex;
    }
.presentbox {
    width: 40%;
    font-size: 16px;
    background-color:rgba(255, 255, 255, 0.5) ;

}
.filterbutton {

    background-color: #04AA6D;
    color: white;
    padding: 0px 0px;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    width:auto;
    margin: 0px;
    float:none;
    display: inline-flex;
    font-size: 16px;

  }

.homebutton {

        background-color: #04AA6D;
        color: white;
        padding: 22px 40px;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        display:block;
        width:100%;
    
    
      }

/* Add a black background color to the top navigation */
.topnav {
    background-color: rgba(255, 255, 255, 0.0);
    overflow: hidden;
    display: flex; 
    margin-left: auto;
    margin-right: 0;
    justify-content: flex-end
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 5px 8px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Add a color to the active/current link */
  .topnav a.active {
    background-color: #04AA6D;
    color: white;
  }

  .wrapper{
    width:200px;
    padding:20px;
    height: 150px;
    }