/* HOLDING */
@keyframes borderT{
0% {top:0;left:0;}
24% {top:0;left:0;}
24.5% {top:-20px;left:20px;}
25% {top:0;left:0;}
49% {top:0;left:0;}
49.5% {top:20px;left:20px;}
50% {top:0;left:0;}
74% {top:0;left:0;}
74.5% {top:-20px;left:-20px;}
75% {top:0;left:0;}
99% {top:0;left:0;}
99.5% {top:20px;left:-20px;}
100% {top:0;left:0;}
}
@keyframes borderL{
0% {top:0;left:0;}
24% {top:0;left:0;}
24.5% {top:-20px;left:20px;}
25% {top:0;left:0;}
49% {top:0;left:0;}
49.5% {top:-20px;left:-20px;}
50% {top:0;left:0;}
74% {top:0;left:0;}
74.5% {top:20px;left:20px;}
75% {top:0;left:0;}
99% {top:0;left:0;}
99.5% {top:20px;left:-20px;}
100% {top:0;left:0;}
}
@keyframes borderB{
0% {top:0;left:0;}
24% {top:0;left:0;}
24.5% {top:20px;left:-20px;}
25% {top:0;left:0;}
49% {top:0;left:0;}
49.5% {top:-20px;left:-20px;}
50% {top:0;left:0;}
74% {top:0;left:0;}
74.5% {top:20px;left:20px;}
75% {top:0;left:0;}
99% {top:0;left:0;}
99.5% {top:-20px;left:20px;}
100% {top:0;left:0;}
}
@keyframes borderR{
0% {top:0;left:0;}
24% {top:0;left:0;}
24.5% {top:20px;left:-20px;}
25% {top:0;left:0;}
49% {top:0;left:0;}
49.5% {top:20px;left:20px;}
50% {top:0;left:0;}
74% {top:0;left:0;}
74.5% {top:-20px;left:-20px;}
75% {top:0;left:0;}
99% {top:0;left:0;}
99.5% {top:-20px;left:20px;}
100% {top:0;left:0;}
}

#holding{
text-transform:uppercase;
width:100%;
height:100%;
background-color:#ffffff;
background-image:
radial-gradient(at 35% 90%, hsla(193,74%,78%,1) 0px, transparent 50%),
radial-gradient(at 73% 25%, hsla(30,69%,72%,1) 0px, transparent 50%),
radial-gradient(at 3% 24%, hsla(228,90%,69%,1) 0px, transparent 50%),
radial-gradient(at 26% 26%, hsla(299,64%,68%,1) 0px, transparent 50%),
radial-gradient(at 15% 94%, hsla(148,64%,65%,1) 0px, transparent 50%),
radial-gradient(at 39% 9%, hsla(302,68%,75%,1) 0px, transparent 50%),
radial-gradient(at 61% 93%, hsla(290,71%,77%,1) 0px, transparent 50%);
background-size: 200%;
background-repeat: no-repeat;
animation:bg 20s ease-in-out infinite;
animation-direction: alternate;
display:flex;
flex-direction:column;
justify-content:center;
color:var(--black);
}
#box{
width: 300px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 auto;
/*border: 10px solid;*/
padding: 20px;
position:relative;
}
/*#box:before{
content:'';
display:block;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
mix-blend-mode:overlay;
z-index:2;
border:20px solid #2b2b2b;
box-sizing:border-box;
animation:borderB 10s ease-in-out infinite;
animation-direction: alternate;
border-top:20px solid transparent;
border-left:20px solid transparent;
}

#box:after{
content:'';
display:block;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
mix-blend-mode:overlay;
z-index:1;
border:20px solid #2b2b2b;
box-sizing:border-box;
animation:borderA 10s ease-in-out infinite;
animation-direction: alternate;
border-bottom:20px solid transparent;
border-right:20px solid transparent;
}*/
#border-tl{
position:absolute;
width:100%;
height:100%;
z-index:1;
top:0;
left:0;
mix-blend-mode:overlay;
}
#border-tl:before{
content:'';
display:block;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:2;
border:20px solid var(--black);
box-sizing:border-box;
animation:borderT 30s ease-in-out infinite;
border-bottom:20px solid transparent;
border-left:20px solid transparent;
border-right:20px solid transparent;
}
#border-tl:after{
content:'';
display:block;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:2;
border:20px solid var(--black);
box-sizing:border-box;
animation:borderL 30s ease-in-out infinite;
border-bottom:20px solid transparent;
border-top:20px solid transparent;
border-right:20px solid transparent;
}
#border-br{
position:absolute;
width:100%;
height:100%;
z-index:1;
top:0;
left:0;
mix-blend-mode:overlay;
}
#border-br:before{
content:'';
display:block;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:2;
border:20px solid var(--black);
box-sizing:border-box;
animation:borderB 30s ease-in-out infinite;
border-top:20px solid transparent;
border-left:20px solid transparent;
border-right:20px solid transparent;
}
#border-br:after{
content:'';
display:block;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:2;
border:20px solid var(--black);
box-sizing:border-box;
animation:borderR 30s ease-in-out infinite;
border-bottom:20px solid transparent;
border-top:20px solid transparent;
border-left:20px solid transparent;
}
#border-tl-2{
position:absolute;
width:100%;
height:100%;
z-index:1;
top:0;
left:0;
mix-blend-mode:overlay;
}
#border-tl-2:before{
content:'';
display:block;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:2;
border:10px solid #2b2b2b;
box-sizing:border-box;
animation:borderT 30s ease-in-out infinite;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
border-right:10px solid transparent;
}
#border-tl-2:after{
content:'';
display:block;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:2;
border:10px solid #2b2b2b;
box-sizing:border-box;
animation:borderL 30s ease-in-out infinite;
border-bottom:10px solid transparent;
border-top:10px solid transparent;
border-right:10px solid transparent;
}
#border-br-2{
position:absolute;
width:100%;
height:100%;
z-index:1;
top:0;
left:0;
mix-blend-mode:overlay;
}
#border-br-2:before{
content:'';
display:block;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:2;
border:10px solid #2b2b2b;
box-sizing:border-box;
animation:borderB 30s ease-in-out infinite;
border-top:10px solid transparent;
border-left:10px solid transparent;
border-right:10px solid transparent;
}
#border-br-2:after{
content:'';
display:block;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:2;
border:10px solid #2b2b2b;
box-sizing:border-box;
animation:borderR 30s ease-in-out infinite;
border-bottom:10px solid transparent;
border-top:10px solid transparent;
border-left:10px solid transparent;
}
#box-content{
width:min-content;
margin:0 auto;
position:relative;
z-index:3;
mix-blend-mode:overlay;
}
#box-content h1{
margin-bottom:0;
}
#box-content h1:before{
content:'James Carreon';
position:absolute;
mix-blend-mode:overlay;
color:#2b2b2b;
font-weight:500;
font-size: 32px;
top:0;
left:0;
animation:name 20s ease-in-out infinite;
animation-direction: alternate;
}
#box-content h1:after{
content:'James Carreon';
position:absolute;
mix-blend-mode:overlay;
color:#2b2b2b;
font-weight:500;
font-size: 32px;
top:0;
left:0;
}
#box-content p:before{
content:'Website Under Construction';
position:absolute;
mix-blend-mode:overlay;
color:#2b2b2b;
font-weight:300;
font-size: 18px;
top:0;
left:0;
animation:name 20s ease-in-out infinite;
animation-direction: alternate;
}
#box-content p:after{
content:'Website Under Construction';
position:absolute;
mix-blend-mode:overlay;
color:#2b2b2b;
font-weight:300;
font-size: 18px;
top:0;
left:0;
}