@charset "utf-8";

@font-face {font-family: 'braeside';
src: url('../fonts/braeside/braeside.woff2') format('woff2'),
url('../fonts/braeside/braeside.woff') format('woff'),
url('../fonts/braeside/braeside.ttf') format('truetype');
font-weight: normal;
font-style: normal;}

html, body, #cursor {margin: 0; padding: 0; overflow: hidden; height: 100%; width: 100%;}
html {background: url(https://i.imgur.com/iJ2eRsH.png) 0 0 / auto repeat #044a1b; cursor: url(http://cannonfodder.net/images/cfmouse.cur), url(http://cannonfodder.net/images/cfmouse.cur), auto;}

body {background: none;}

#cursor {position: absolute; z-index: 2;}
#cursor:hover > #cfpatch {opacity: 0; visibility: hidden; z-index: 0;}
#cursor:hover > #marble {opacity: 1;}

#poppyhelm {position: relative; 
margin: auto;
height: 288px; width: 154px;
background: url(https://i.imgur.com/xnpzxFt.png) center / auto no-repeat;
filter: drop-shadow(1px 1px 0 #000) drop-shadow(-1px -1px 0 #000) drop-shadow(1px -1px 0 #000) drop-shadow(-1px 1px 0 #000);}

#troopers {position: absolute;
width: 100%;
height: 100%;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
visibility: visible;
background: url(https://i.imgur.com/JpFvx35.png) center / 344px 400px repeat rgba(0,0,0,0.6); background-blend-mode: multiply;
opacity: 0;
z-index: 3;
-webkit-animation: troopers 3s 1.5s linear; animation: troopers 3s 1.5s linear;
filter: drop-shadow(1px 1px 0 #000);}

@keyframes troopers {0%, 100% {opacity: 0} 20%, 90% {opacity: 1;}}
@-webkit-keyframes troopers {0%, 100% {opacity: 0} 20%, 90% {opacity: 1;}}

#outline {position: absolute;
width: 100%;
height: 100%;
background: url(https://i.imgur.com/KUxQeNH.png) center / 344px 400px repeat rgba(0,0,0,0.2); background-blend-mode: multiply;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
opacity: 0; visibility: visible;
z-index: 2;
-webkit-animation: fadein 0.2s 2.5s linear forwards; animation: fadein 0.2s 2.5s linear forwards;}

#cfpatch {position: absolute; 
margin: auto;
height: 300px; width: 301px;
top: 0; left: 0; right: 0; bottom: 0;
border: dashed 3px #fff;
z-index: 2;
opacity: 0;
border-radius: 100%; -webkit-border-radius: 100%;
transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear;
background: url(https://i.imgur.com/fMudxOH.png) center / auto no-repeat #000;
animation: fadein 0.2s 6.5s linear forwards; -webkit-animation: fadein 0.2s 6.5s linear forwards;}

.poppys {position: absolute;
width: 100%;
height: 32px;
background: url(https://i.imgur.com/sTtx2jV.png) center / contain repeat-x #000;
background-position: -5px 0;
bottom: 0; left: 0;
z-index: 1;
-webkit-box-shadow: 0 0 30px 30px #000; box-shadow: 0 0 30px 30px #000; -moz-box-shadow: 0 0 0 4px transparent, 14px 14px 0 0 rgba(0,0,0,0.5);}

#poppy-top {top: 0; left: 0;
background-position: -20px 0;}

#flags {opacity: 0;
width: 100%;
height: 100%;
position: absolute;
visibility: visible;
left: 0; right: 0; bottom: 0; top: 0;}

.pacifist-flag
{background: url(http://cannonfodder.net/images/paciflag.svg) #009900;
background-size: cover;
position: absolute;
z-index: 1;
width: 100%; height: 100%;
background-position: center;
left: 0; right: 0; bottom: 0; top: 0;

-webkit-clip-path: polygon(0 0, 55% 0, 45% 100%, 0 100%);
clip-path: polygon(0 0, 55% 0, 45% 100%, 0 100%);}

.presid-flag
{background: url(http://cannonfodder.net/images/presiflag.svg) #000;
background-size: cover;
position: absolute;
z-index: 0;
width: auto; height: auto;
background-position: center;
left: 0; right: 0; bottom: 0; top: 0;}

.transition {transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;}

#marble {width: 420px; height: 60px;
padding: 0 10px;
border: solid 2px;
border-color: #555 #222 #222 #555; 
position: absolute; 
left: 0; right: 0; bottom: 0; top: 0; 
margin: auto;
cursor: pointer;
text-align: center;
z-index: 2;
opacity: 0;
text-decoration: none;
background: url(https://i.imgur.com/grN68GV.png) #333 0 0 / auto repeat;
-webkit-box-shadow: 0 0 0 4px transparent, 14px 14px 0 0 rgba(0,0,0,0.5); box-shadow: 0 0 0 4px transparent, 14px 14px 0 0 rgba(0,0,0,0.5); -moz-box-shadow: 0 0 0 4px transparent, 14px 14px 0 0 rgba(0,0,0,0.5);}

.gold, .gold:after {font-family: braeside, impact, tahoma;
font-size: 48px; 
position: relative;
text-align: center;
background: -moz-linear-gradient(top, #ffd152 0%, #814e1f 11%, #ffd152 52%, #814e1f 64%, #f1c44e 85%, #ffe75e 98%);
background: -webkit-linear-gradient(top, #ffd152 0%,#814e1f 11%,#ffd152 52%,#814e1f 64%,#f1c44e 85%,#ffe75e 98%);
background: linear-gradient(to bottom, #ffd152 0%,#814e1f 11%,#ffd152 52%,#814e1f 64%,#f1c44e 85%,#ffe75e 98%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd152', endColorstr='#ffe75e',GradientType=0 );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color:#ffd152;}

.gold:after {
position: absolute;
margin: auto;
left: 0; top: 0;
z-index: -1;
color: transparent;
text-shadow: 
-2px -2px 0 #000,  
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
content: attr(data-text);}

div[id^="cross-spin"], #crosshairmarble, #crosshairgreen{position: absolute;
margin: auto;
-webkit-border-radius: 100%; border-radius: 100%;
transition: all 0.1s linear; -webkit-transition: all 0.1s linear;
background: url(https://i.imgur.com/jLtGVku.png) center / contain no-repeat;}

div[id^="cross-spin"] {height: 100%;
width: 100%;
z-index: 3;
top: 0; left: 0; bottom: 0; right: 0;
visibility: visible;}

#crosshairmarble, #crosshairgreen {height: 250px;
width: 250px;
z-index: -2;
top: 0; left: 0; bottom: 0; right: 0;
opacity: 0;
visibility: hidden;
animation: spin 4s 0s linear infinite; -webkit-animation: spin 4s 0s linear infinite;}

#crosshairgreen {background: url(https://i.imgur.com/deTnuX2.png) center / contain no-repeat;}

#cross-spin1 {-webkit-animation: spin 12s 0s linear infinite; animation: spin 12s 0s linear infinite;}
#cross-spin2 {-webkit-animation: spin 5s 0s linear infinite; animation: spin 5s 0s linear infinite;}
#cross-spin3 {-webkit-animation: spin 3s 0s linear infinite; animation: spin 3s 0s linear infinite;}
#cross-spin4 {-webkit-animation: spin 10s 0s linear infinite; animation: spin 10s 0s linear infinite;}
#cross-spin5 {-webkit-animation: spin 27s 0s linear infinite; animation: spin 27s 0s linear infinite;}
#cross-spin6 {-webkit-animation: spin 16s 0s linear infinite; animation: spin 16s 0s linear infinite;}
#cross-spin7 {-webkit-animation: spin 23s 0s linear infinite; animation: spin 23s 0s linear infinite;}
#cross-spin8 {-webkit-animation: spin 1s 0s linear infinite; animation: spin 1s 0s linear infinite;}
#cross-spin9 {-webkit-animation: spin 8s 0s linear infinite; animation: spin 8s 0s linear infinite;}
#cross-spinA {-webkit-animation: spin 6s 0s linear infinite; animation: spin 6s 0s linear infinite;}

#cursor:hover > #flags {opacity: 1;}

#marble:hover {-webkit-animation: hover 1s linear infinite; animation: hover 1s linear infinite;}

#marble:hover > #crosshairmarble {opacity: 1; visibility: visible;}
#marble:hover > #crosshairgreen {opacity: 1; visibility: visible;}

#marble:hover > .gold {-webkit-animation: redbg 1s linear infinite; animation: redbg 1s linear infinite;}
#marble:active > .gold {-webkit-animation: greenbg 0.1ms linear infinite; animation: greenbg 0.1ms linear infinite;}

#marble:active > #crosshairmarble {opacity: 0; visibility: hidden; transition: all 0s; -webkit-transition: all 0s;}
#marble:active > #crosshairgreen {opacity: 1; visibility: visible; transition: all 0s; -webkit-transition: all 0s;}
#marble:active {-webkit-animation: active 0.1ms linear infinite; animation: active 0.1ms linear infinite;}

@keyframes spin {100% {transform: rotate(360deg); -webkit-transform: rotate(360deg);}}
@-webkit-keyframes spin {100% {transform: rotate(360deg); -webkit-transform: rotate(360deg);}}

@keyframes redbg {50% {background: rgba(255,0,0,1); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}}
@-webkit-keyframes redbg {50% {background: rgba(255,0,0,1) -webkit-background-clip: text; -webkit-text-fill-color: transparent;}}

@keyframes greenbg {0%, 100% {background: #0f0; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}}
@-webkit-keyframes greenbg {0%, 100% {background: #0f0; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}}

@keyframes hover {50% {-webkit-box-shadow: 0 0 0 4px #f00, 14px 14px 0 0 rgba(0,0,0,0.5); box-shadow: 0 0 0 4px #f00, 14px 14px 0 0 rgba(0,0,0,0.5); -moz-box-shadow: 0 0 0 4px #f00, 14px 14px 0 0 rgba(0,0,0,0.5);}}
@-webkit-keyframes hover {50% {-webkit-box-shadow: 0 0 0 4px #f00, 14px 14px 0 0 rgba(0,0,0,0.5); box-shadow: 0 0 0 4px #f00, 14px 14px 0 0 rgba(0,0,0,0.5); -moz-box-shadow: 0 0 0 4px #f00, 14px 14px 0 0 rgba(0,0,0,0.5);}}

@keyframes active {0%, 100% {-webkit-box-shadow: 0 0 0 4px #0f0, 14px 14px 0 0 rgba(0,0,0,0.5); box-shadow: 0 0 0 4px #0f0, 14px 14px 0 0 rgba(0,0,0,0.5); -moz-box-shadow: 0 0 0 4px #0f0, 14px 14px 0 0 rgba(0,0,0,0.5);}}
@-webkit-keyframes active {0%, 100% {-webkit-box-shadow: 0 0 0 4px #0f0, 14px 14px 0 0 rgba(0,0,0,0.5); box-shadow: 0 0 0 4px #0f0, 14px 14px 0 0 rgba(0,0,0,0.5); -moz-box-shadow: 0 0 0 4px #0f0, 14px 14px 0 0 rgba(0,0,0,0.5);}}

div[id^="target"]{z-index: 1;
position: absolute;
margin: auto;
border-radius: 100%; -webkit-border-radius: 100%;}

@keyframes move {10% {left: -200px;} 100% {left: 110%;}}
@-webkit-keyframes move {10% {left: -200px;} 100% {left: 110%;}}

#target1 {width: 150px; height: 150px; top: 100px; left: -200px; animation: move 35s 0s linear infinite;}
#target2 {width: 80px; height: 80px; top: 300px; left: -200px; animation: move 40s 2s linear infinite;}
#target3 {width: 110px; height: 110px; bottom: 150px; left: -200px; animation: move 20s 2s linear infinite;}
#target4 {width: 190px; height: 190px; bottom: 50px; left: -200px; animation: move 46s 7s linear infinite;}
#target5 {width: 190px; height: 190px; top: 170px; left: -200px; animation: move 37s 12s linear infinite;}
#target6 {width: 160px; height: 160px; top: 300px; left: -200px; animation: move 24s 1s linear infinite;}
#target7 {width: 200px; height: 200px; top: 0px; left: -200px; bottom: 0; animation: move 25s 17s linear infinite;}
#target8 {width: 50px; height: 50px; bottom: 270px; left: -200px; animation: move 18s 0s linear infinite;}
#target9 {width: 150px; height: 150px; top: 120px; left: -200px; animation: move 30s 10s linear infinite;}
#target10 {width: 90px; height: 90px; bottom: 80px; left: -200px; animation: move 36s 3s linear infinite;}

div[id^="pic"] {position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
z-index: 2;
margin: auto;
border-radius: 100%; -webkit-border-radius: 100%;}

#pic1 {height: 100px; width: 100px; background: url(https://i.imgur.com/GrQgwtB.png) -20px center / cover no-repeat;}
#pic2 {height: 50px; width: 50px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAiCAYAAABBY8kOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAqpJREFUeNrMll9IU1Ecx++qB90sAnfvkoJS1oa5UQ9tJjGnkNFjLAcFQQk9VAwK3Cowy0EPhQYFpj1G9AeFXvtf6yUKX0xxyHS6Bq15N+mh0hiD3eD3Pcc44oL1cG/n5Xt/557D/X3u95zfOSZN06RKmt1upwnJZNJUybx1kk5tQ6UkgUDgn8j+HyKeucfjofjSaTNpItFUEZluRKZyq45n6vV6KR4Io5+PX16Mk4aH6knjccTlyIwjcjgc1OFqclE8eKWKND/7jvTsLRDcOZcile1+0s7QZ4zL59ck05+Ik7hdbopvhOaR4VSONDICklwesWyVMS4IkvrW1r+S6UfESRRFoY7h8BzpwieVtO9li0ByL7REenLQsiaZ0lhLeiJqEcj0I/L5fEQ0FElif3zBt7sfwRNVBdnTu8jQXLsLmc7ESIM9NQLZ5faPpFtcNtKrj/caVOui9/cLBLmcKgwcezJFeijSSToZG2VvQKSy8ddi+0hLb0sglY2q3hc7PpCm4shsJHMYmU9OkDYHUSme9feRthyBV9LrXyQ2BZ6cco+hVjqwiruG9V51fB/ZbMjo5nFUhOo6/OO5V4uo3uPNqN4lsTae3w2CnW1W0u8Z9F8Y3W7QPvL7/ZRi9OB76uh9jkoQ3oP90HAAmVZvsjEiPhUPS9+QceINyG9P4CTuacP8Mw+36bzqstks/iVK2YpH3Q+wH7Rx0ZPVHknSRnbyopJcD6aYR172/qvORIVCgR6sisZIGkj7j4LMshVeVDGPJG0FTfDoZ8bESEDW226UR/wht4CMBo7NC9W7nDd/7ho1Qj/3aHZ6vcG3IKfTif3UAaIdjfDEzCqEebMseMSBlplHP5hHM9OIoy/qSNPptMkYotX3Ot4UWSnjjdj4eVQsFgUS3T36LcAA4+0fGmqYZc4AAAAASUVORK5CYII=) center / auto no-repeat #000;}
#pic3 {height: 80px; width: 80px; 
background: url(data:image/png;base64,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) 
center / auto no-repeat #000;}
#pic4 {height: 140px; width: 140px; background: url(https://i.imgur.com/3mq9lcO.png) center / contain no-repeat;}
#pic5 {height: 140px; width: 140px; background: url(https://i.imgur.com/xN9IxZd.png) center / contain no-repeat;}
#pic6 {height: 100px; width: 100px; background: url(https://i.imgur.com/We0Bydo.png) center / auto no-repeat #000;}
#pic7 {height: 140px; width: 140px; background: url(https://i.imgur.com/BsD46HQ.png) right center / cover no-repeat;}
#pic8 {height: 26px; width: 26px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHtJREFUeNpi/P//PwM9ABMDnQALIQW/fv7C62V9PVswff3mScZB4SNGYuMI3WfE+mTg4wjmcjZ2NkZSDILpw+XTgU91hFLbxUuHiVJHdx8NP4twxhF6qiOUjwjF1cD5iNT8g64P6MPRVEfn0nvI1UejFg2DVDfkfAQQYABc1UQOnUC/yQAAAABJRU5ErkJggg==) center / auto no-repeat #000;}
#pic9 {height: 100px; width: 100px; background: url(https://i.imgur.com/dmD9Unq.png) center / contain no-repeat #000;}
#pic10 {height: 50px; width: 50px; 
background: url(data:image/png;base64,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) 
center / auto no-repeat #000;}

#logofade {position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
background: #000; 
-webkit-animation: fade 1.5s 6.5s forwards; animation: fade 1.5s 6.5s forwards;
z-index: 2;}

@keyframes fade {from {opacity: 1;} to {opacity: 0; z-index: -10;}}
@-webkit-keyframes fade {from {opacity: 1;} to {opacity: 0; z-index: -10;}}

@keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-webkit-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}

@keyframes fadeinpatch {from {opacity: 0;} to {opacity: 1;}}
@-webkit-keyframes fadeinpatch {from {opacity: 0;} to {opacity: 1;}}					

.title, #poppyhelm {opacity: 0; -webkit-animation: fadein 1s 3s forwards; animation: fadein 1s 3s forwards; z-index: 4;}

.title {position: relative;
height: 75px; width: 100%;
color: #FFF;
background: url(https://i.imgur.com/grN68GV.png) 0 0 / auto repeat;
font: 70px stencil, verdana, sans-serif;
text-align: center;
letter-spacing: 32px;
text-shadow: 1px 0 0 #777, 2px 0 0 #777, 3px 0 0 #777, 4px 0 0 #777;}

#title-top {margin-top: 0;}
#title-bottom {margin-bottom: 0;}

.flex {display: -webkit-flex;  display: flex; 
-webkit-flex-wrap: wrap;  flex-wrap: wrap;
-webkit-justify-content: center; justify-content: center; 
-webkit-align-items: center; align-items: center;}

.flex3 {display: -webkit-flex; display: flex;
-webkit-flex-direction: column; flex-direction: column;
-webkit-flex-wrap: nowrap; flex-wrap: nowrap;
-webkit-justify-content: space-around; justify-content: space-around; 
-webkit-align-content: center; align-content: center; 
-webkit-align-items: center; align-items: center;}

#discordwidget {z-index: 10;
position: absolute;
height: 600px;
width: 220px;
cursor: pointer;
bottom: -530px; right: 50px;
transition: opacity 0.1s linear, bottom 0.5s linear; -webkit-transition: opacity 0.1s linear, bottom 0.5s linear;}

#discordwidget:hover {cursor: pointer;
bottom: 0;}