@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Roboto+Slab:wght@600&family=Source+Serif+4&display=swap');

body {
   background-attachment: fixed;
   background-size: cover;
   background: linear-gradient(to top,gray,black);
}
#wrapper {
    background-color:white;
    width:900px;
    margin:30px auto; 
}
#two {
    background-image: url(images/military.jpg);
}
#two1 {
    background-image: url(images/camouflagebule.jpg);
}
#two3{
  background-image: url(images/backgurond.jpg);
}
#two2{
  background-image: url(images/german.jpg);
}
#three1{
  background-image: url(images/wallpaperbalcknight.jpg);
}
#three2{
  background-image: url(images/wallpapergraynight.jpg);
}
#three3{
  background-image: url(images/wallpepersabaku.jpg);
}
header, nav, main, article, aside, footer{
    padding: 1px 30px;
}
header{
    background-color: rgb(19,44,111);
    width: auto;
}
#two header{
     background-color: rgb(94,117,97);
}
#two1 header{
  background-color: rgb(173,216,230);
}
#two2 header{
      background-color: rgb(60,77,95); 
}
#two3 header{
      background-color: rgb(89,109,48);
}
#three1 header{
background-color: #141414;
}
#three2 header{
  background-color: #001E00;
}
#three3 header{
  background-color: #df915e;
}
h1 a {
    color: white;
    text-decoration: none;
    font-family: 'Source Serif 4', sans-serif;
}
h2 {
    font-family: 'Black Ops One', cursive;
    font-size: 40pt;
    margin: 50px 0px;
    text-align: center;
}
h2 a {
   color: red;
   text-decoration: none;
}
.booner{
   margin-left: -30px;
   margin-bottom: -5px;
}
nav,footer{
    background-color:black;
}
#two nav, #two footer{
    background-color:rgb(184,170,129);
}
#two1 nav, #two1 footer{
    background-color: rgb(63,82,119);
}
#two2 nav, #two2 footer{
    background-color: rgb(87, 72, 57);
}
#two3 nav, #two3 footer{
  background-color: rgb(65,83,59);
}
#three2 nav, #three2 footer{
  background-color: rgb(51,66,49);
}
#three3 nav, #three3 footer{
  background-color: #d2b48c;
}
nav{
   height: 60px;
}

nav ul{
   padding: 0px;
   width: 730px;
   margin-top: 10px;
   margin-left: 50px;
}
nav ul li {
    width: 240px;
    list-style-type:none;
    border: 1px solid black;
    background-color: yellow;
    border-radius: 30px;
    height: 34px;
    position: relative;
}
nav ul li:hover {
    background-color: rgb(255,240,220);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
nav ul li a {
   display: inline-block;
   width: 240px;
   padding: 8px 0px 6px;
   text-align:center;
   text-decoration: none;
   color: black;
   font-family: 'Black Ops One', cursive;
}
nav ul li a:hover {
  color:black;
}
  .group{
   width: 242px;
   height: 36px;
   float: left;
  }
.group .drop{
   display: none;  
}
.group:hover .drop{
   display: block;
}
.rightly {
   float: right;
   clear: both;
   margin-top: 10px;
   margin-right: 0px;
   margin-bottom: 10px;
   margin-left: 25px;
}
h3 {
   font-family: 'Black Ops One', cursive;
   text-align: center;
   font-size: 16pt;
}
.warning{
   font-family: 'Black Ops One', cursive;
   text-align: center;
   font-size: 18pt;
   color: red;
   border: 10px solid black;
   background-color:yellow
}
main{
   padding:15px 50px;
}
#two2 #two3 #three2 #three3 main {
   padding: 0px;
}
td{
 vertical-align: top;
 padding:3px 0px;
}
tr:nth-child(2n-1){
 background-color: yellow;
}
td:first-child{
 text-align: right;
}
textarea{
 width: 270;
 height: 80px;
}
input[type=email] {
 width: 250px;
}
input[type=submit]{
 background: color; red;
 font-size: 18pt;
 
}
p {
   font-family: 'Source Serif 4', sans-serif;
   font-size: 14pt;
}
li{
   font-family: 'Roboto Slab', serif;
    font-size: 15pt;
}
article {
   width: 440px;
   float: left;
   padding: 20px;
}
aside {
   width:260px;
   float: right;
   padding: 30px;
}
.magic {
   clear: both;
}
.ryoukami {
   margin-bottom: -100px;
}
.quotations {
  font-size: 20px;
  text-align: center;
  font-family: 'Roboto Slab', serif;
}
.gallaery{
  border: 6px solid black;
}
.slider{
  width:190px;
  height: 490px;
  padding-top: 10px;
  overflpw-y: scroll;
  overflow-x:  hidden;
  border: 6px solid black;
}
.slider img{
  width: 175px;
  padding-left: 10px; 
}
#imgdisplay{
 width: 550px;
 height: 390px;
 position: absolute;
 top: 900px;
 right: 500px;
 border: 6px solid black;
 background-size: 600px 400px;
}
.photo main{
   position: relative;
}
.default{
background-image:url(images/ryoukami1.jpg);
}
.pic01{
 background-image: url(images/ryoukami2.jpg);
}
.pic02{
 background-image: url(images/ryoukami3.jpg); 
}
.pic03{
 background-image: url(images/ryoukami4.jpg);
}
footer{
   background-color: black;
   color: yellow;
}