@charset "utf-8";
/* CSS Document */

/*Import Orbitron Font*/
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');


        header {
          width: 100%;
          height: 38px;
          background-color: mediumvioletred;
          padding-top: 10px;
          padding-bottom: 10px;
          font-family: Orbitron; 
          font-style: normal; 
          font-variant: normal ;
          font-size: 20px;
        }
		.logo {
			color: #fff;
			font-weight: bold;
			text-align: undefined;
			width: 10%;
			float: left;
			margin-top: 15px;
			margin-left: 30px;
			letter-spacing: 4px;
		}
		
		nav {
			float: right;
			width: 75%;
			text-align: right;
			margin-right: 10px;
		}
		header nav ul {
			list-style: none;
			float: right;
		}
		nav ul li {
			float: left;
			color: #FFFFFF;
			font-size: 14px;
			text-align: left;
			margin-right: 25px;
			letter-spacing: 2px;
			font-weight: bold;
			transition: all 0.3s linear;
		}
		ul li a {
			color: #FFFFFF;
			text-decoration: none;
		}
		ul li:hover a {
			color:black;
		}

/*-----------------------------------------------------------------------------*/

		body{
          background: url(../img/bg.jpg) center repeat-y;
          background-size: 100% auto;
		}


		#option {
          width: auto;
          height: auto;
          padding-top: 5px;
          padding-bottom: 5px;
          padding-left: 5px;
          padding-right: 5px;
          text-align:left ;
          background-color: white;
          border: 1px solid #000000;
        }
 		.sort {
          float:left;
	    } 
		 .search {
           float: right;
        }
		.clear{
          clear:both;
		}

        #wrapper {
          margin:auto;
          width: fit-content;
          display: block;
		  min-height: 70vh;
        }
		#emty {
		  font-size: 25px;
          margin:auto;
          width:auto; 
		  text-align: center;
        }


		div.gallery {
       	  margin: 4px;
		  padding-bottom: 15px;
		  border: 1px solid black;
		  border-radius: 15px;
		  overflow:hidden;
		  float:left ;
		  width: 300px;
          background-color:mediumvioletred ;
		  font-family: Orbitron;  color: #000;       
        }
		div.gallery img {
		  width: 100%;
		  height: auto; 
		}
		div.gallery:hover {
		/*	border: inset azure;*/
		  border: 1px solid azure; 
          color: azure;
         }
		div.desc_t {
		  padding: 15px;
		  text-align: center;
		}
		div.desc_long {
		 /* padding: 5px;*/
			padding-left: 15px;
			padding-right: 15px;
		  	text-align: left;
         }

		div.form {
		  padding: 5px;
		  text-align: left   
		}

		fieldset {
          display: block;
          text-align: left;
		  padding:10px;
		  width:300px;
		  line-height:1.4;
          margin: auto;
          background-color:white;
        }

		.new{
			/*: left;*/
		}
		.login{
			/*float: right;*/
		}

		table.UserForm {
			width: 100%;
			
		}

		th.mid {
			/*width: 302px;*/
        }


		div.wrap{
          margin-left: auto;
          margin-right: auto;
          padding:2%;
		 /* width:96%;*/
          position:relative;
			
		}

		img{
           
		}

		.banner{
          margin-left: auto;
          margin-right: auto;
          padding:4%;
		  height: auto;
          width: 38%;
		  position:relative; 
			float: left;
        }
		.banner_and{
          margin-left: auto;
          margin-right: auto;
          padding-top :4%;
		  height: auto;
          width: 5%;
		  position:relative; 
			float: left;
        }

		.portrait{
          margin:4%;
          width: 16vw;

        }

/*-----------------------------------------------------------------------------*/


		footer {
          display: inline-block;
          width: 100%;
          padding-top: 20px;
          padding-bottom: 20px;
          background-color: mediumvioletred;
          font-family: Orbitron; font-style: normal; font-variant: normal;
          float: left;
          color: #FFFFFF;
          font-size: 14px;
          text-align: center;
          
		}

	.copyright {
		display: inline-block;
		width: 100%;
		text-align: center;
		padding-top: 20px;
		padding-bottom: 20px;
		background-color: #717070;
		color: #FFFFFF;
		text-transform: uppercase;

		font-weight: lighter;
		letter-spacing: 2px;
		border-top-width: 2px;
	}

/*Mobile Breakpoint*/
@media screen and (max-width:700px) {
		
		header {
          width: 100%;
          height: 60px;
		}
		nav {
			float: right;
			width: 60%;
			text-align: right;
			margin-right: 10px;
		}
	
		header nav ul {
			list-style: none;
			float: right;
		}
	
}