body {

background: linear-gradient(270deg, #2a23d3, #02090a, #262ff1);
 background-size: 600% 600%;
-webkit-animation: navbar 17s ease infinite;

animation: navbar 17s ease infinite;
}
@-webkit-keyframes navbar {
     0%{background-position:0% 50%}
     50%{background-position:100% 50%}
     100%{background-position:0% 50%}
 }

@keyframes navbar { 
     0%{background-position:0% 50%}
     50%{background-position:100% 50%}
     100%{background-position:0% 50%}
 }

#border {
    width: 1170px;
    height: 440px;
    border-radius:10px;
    position:absolute;left:175px;top:105px;
    background-color: #00cc33;
    -webkit-animation-name: outer;
    -webkit-animation-duration: 45s;
    -webkit-animation-direction: alternate;
    animation-name: outer;
    animation-duration: 45s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay:5s;
    z-index:-1;
}
@-webkit-keyframes outer {
    0%   {background-color: #00cc33;}
    25%  {background-color: #ff33ff;}
    50%  {background-color: #003399;}
    100% {background-color: #CD3700;}

}
@keyframes outer {
    0%   {background-color: #00cc33;}
    25%  {background-color: #ff33ff;}
    50%  {background-color: #003399;}
    100% {background-color: #CD3700;}

}
 
 
#box1 {
    width: 1150px;
    height: 420px;
    position:absolute;left:185px;top:115px;
    background-color: #006600;
    -webkit-animation-name: inner;
    -webkit-animation-duration: 45s;
    -webkit-animation-direction: alternate;   
    animation-name: inner;
    animation-duration: 45s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay:5s;
    z-index:-1;
    border-radius:10px;

   
}
@-webkit-keyframes inner {
    0%   {background-color: #006600;}
    25%  {background-color: #ff00cc;}
    50%  {background-color: #ADD8e6;}
    100% {background-color: #FF3300;}
}
@keyframes inner {
    0%   {background-color: #006600;}
    25%  {background-color: #ff00cc;}
    50%  {background-color: #ADD8e6;}
    100% {background-color: #FF3300;}

}

a {
  
}
.sidenav {
    background-image:url(a/sq-blu-lt.jpg);
    width: 0;
    position:absolute;
    z-index: 1;
    top: 105;
    bottom: 75;
    left: 0;
    background-color:#ADD8E6;
    overflow: hidden;
    transition: 0.5s;

    border-radius:10px;
}

.sidenav a {
    text-decoration: none;
    font-size: 25px;
    color: #000080;
    display:block;
    padding:6px;
    transition: 0.3s;
}

.sidenav a:hover {
    background-color: #6495ED;
    color:#ffffff;
    border-radius:30px;

}

.sidenav .closebtn {
    position: absolute;z-index:3;
    top: 0;
    left:86px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left 30.5s;
    padding: 16px;

}
#photo-left{
    position:absolute;top:230px;left:250px;

    transition: margin-left 10.5s;
}

#photo-right {
   position:absolute;top:120px;left:500px;
    transition: margin-left 10.5s;
    width:500;
}


.openbtn {
    position: absolute;
    top: 80;
    left:-40;
    font-size: 66px;
    margin-left: 0px;
}
.flashit{
	-webkit-animation: flash linear 1s infinite;
	animation: flash linear 1s infinite;
}
@-webkit-keyframes flash {
	0% { opacity: 1; } 
	50% { opacity: .1; } 
	100% { opacity: 1; }
}
@keyframes flash {
	0% { opacity: 1; } 
	50% { opacity: .1; } 
	100% { opacity: 1; }
}
@media screen and (max-width: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

#line-l {
     position:absolute;top:120px;left:195px;z-index:2;
    transition: margin-left 30.5s;
}

#line-r {
     position:absolute;top:120px;left:1320px;
}


#line-t {
     position:absolute;top:120px;left:195px;z-index:2;
}
#line-t-2 {
     position:absolute;top:120px;left:595px;z-index:2;
}
#line-t-3 {
     position:absolute;top:120px;left:995px;z-index:2;
}

#line-b {
     position:absolute;top:520px;left:195px;z-index:2;
}
#line-b-2 {
     position:absolute;top:520px;left:595px;z-index:2;
}
#line-b-3 {
     position:absolute;top:520px;left:995px;z-index:2;
}
a.tip {
    color:#ff0000;
    text-decoration: none;

}
a.tip:hover {
    font-size:30px;
    cursor: pointer;
    position: absolute;

}
a.tip span {
    display: none;
    border-radius:20px;
}
a.tip:hover span {

    padding: 5px 20px 5px 50px;
    display: block;
    z-index: 10;
    background: url(a/sq-blu-lt.jpg);
    left: 0px;
    margin: 10px;
    width: 100px;
    position: absolute;
    top: 20px;
    text-decoration: none
}