#header1{
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}




#footer1{
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
   padding:8px 4px 2px 4px;
   
}

.nbut  {
	
	margin: 1px;
	border:1px black solid;
	padding:1px;
    wwidth:90%;
}
.column {
	padding:1px 1px;margin:2px 1px;
	width:42px;
	overflow:hidden;
}

img, nbut {
	background-color:#FFFFFFBB;
}

.outer {
    display: flex;
    width: 200px;
    height: 200px;
}

.inner {
    width: 100px;
    margin: auto;
}

body {
 	display: flex;
    flex-direction: column;
    height: 100%;
    
    }
    
    /* Портретная ориентация шаблона */
@media screen and (orientation:portrait) {
    /* Стили для портретной ориентации шаблона */
    body {
		background:url('img/bakportret.jpg')
	}

}
/* Ландшафтная ориентация шаблона*/
@media screen and (orientation:landscape) {
    /* Стили для ландшафтной ориентации шаблона */
    body {
	background:url('img/bakland.jpg');
	}
}

img {
  opacity: 0;
  animation :   img-animation 0.5s linear;
  animation-fill-mode:forwards; 
  
}

@keyframes img-animation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#bcolor {
  animation :   color-animation 16s linear 0s infinite alternate;
  
}
@keyframes color-animation1 {
    0% {
        background-color: red;
    }
    17% {
        background-color: orange;
    }
    34% {
        background-color: yellow;
    }
    51% {
        background-color: green;
    }
    68% {
        background-color: aqua;
    }
    85% {
        background-color: blue;
    }
    100% {
        background-color:violet;
    }
}
@keyframes color-animation {
    0% {
        background-color: black;
    }
     25% {
        background-color: blueviolet;
    }

   50% {
        background-color: green;
    }
    75% {
        background-color: red;
    }

    100% {
        background-color:blue;
    }
}

#content {
border-image: url('') 20px;
border-style: solid;
border-color:blueviolet;
}