html,body{height:100vh}body{background-color:#000;background-repeat:no-repeat;background-position:center;background-size:cover;color:#fff;width:100%;margin-left:0;margin-top:0}.navbar{display:none;background-color:transparent;height:40px;border-bottom:1px solid rgb(189,30,30)}.navbar .content{max-width:1400px;margin:0 auto}.navbar .logo-wrapper{height:inherit;width:13px;padding:13px;height:13px}.navbar .logo{background-color:#de1111;height:13px;width:13px;border-radius:50%}.footer{background-color:#de1111;opacity:.8;color:#fff;text-align:center;padding:5px 0;position:fixed;bottom:0;width:100%}.footer .content .trademark{margin:0;font-size:19px;width:100px;color:#000;padding-left:90%}.underlay{animation:fadeIn 2s ease-in-out;position:absolute;inset:0;z-index:-10}.underlay img{height:100%;opacity:.91;position:absolute;left:50%;transform:translate(-70%)}.modal{position:absolute;z-index:3000000;top:50%;left:50%;padding:100px 150px;font-size:33px;transform:translate(-50%,-50%);background-color:#ff0000b8;color:#000}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn07{0%{opacity:0}to{opacity:.7}}.gui .main{display:flex;justify-content:space-between;width:90%;margin:0 auto}.gui .main .agent-card{animation:fadeIn 5s ease-in-out;width:250px;height:350px;margin-top:100px;text-align:center;border-bottom:1px solid white;color:#636363}.gui .main .agent-card h1{font-size:33px}.gui .main .agent-card img{width:100%;opacity:.81;border-radius:50%}.gui .main .agent-card hr{opacity:.5}.gui .main .agent-0 img{filter:brightness(5%) sepia(1000%) saturate(10000%)}.gui .main .agent-1 img{filter:invert(1) brightness(5%) sepia(100%) saturate(10000%)}.gui .main .react-p5{animation:fadeIn 6s ease-in-out;position:absolute;z-index:1000000;top:50%;left:50%;transform:translate(-50%,-50%);display:flex}.gui .main .react-p5 canvas{margin:0 auto}.gui .controls{position:absolute;top:80%;left:20%;display:flex;justify-content:space-between;width:60%;height:30px}.gui .controls .suggest-move-btn{display:flex}.gui .controls .suggest-move-btn h2{background-color:#c51e1edb;color:#000;margin:0;text-align:center;padding:0 10px}.gui .controls .suggest-move-btn h3{font-weight:300;margin:0;border-bottom:1px solid transparent;padding:3px 10px}.gui .controls .suggest-move-btn h3:hover{cursor:pointer;opacity:.8;border-bottom:1px solid #de1111}.gui .controls .pre-image-stage-control{display:flex;justify-content:space-around;max-width:350px}.gui .controls .pre-image-stage-control .entry{background-color:#000000ba;border:1px solid transparent;color:#fff;padding:10px 20px;opacity:.8;font-family:Times New Roman,Times,serif}.gui .controls .pre-image-stage-control .entry:hover{opacity:.8;cursor:pointer;background-color:#000000f2;border-bottom:1px solid #de1111}.gui .controls .pre-image-stage-control .active{background-color:#e32727f2;color:#000}.gui .controls .pre-image-stage-control .active:hover{color:#fff}.gui .wallet-actions{position:absolute;top:80%;left:50%;display:flex;justify-content:space-between;transform:translate(-50%);z-index:5000000}.gui .wallet-actions .autopilot-btn,.gui .wallet-actions .submit-move-btn{background-color:#000000ba;padding:10px 20px;border-bottom:1px solid transparent;z-index:5000000;margin:0 5px}.gui .wallet-actions .autopilot-btn:hover,.gui .wallet-actions .submit-move-btn:hover{cursor:pointer;border-bottom:1px solid #de1111}.gui .underlay img{transform:translate(-50%)}.future .inner{width:70%;margin:0 auto;max-width:1301px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.future .inner .container{height:200px;display:flex;justify-content:space-between;flex-direction:row}.future .inner .container .box{width:500px;background-color:#000000ba}.future .inner .container .box .title{padding-left:20px;width:95%;border-bottom:1px solid rgb(45,45,45);padding-bottom:13px;font-weight:300;font-size:21px;color:#de1111}.future .inner .container .box .description{padding-left:20px;color:#bcbcbc}.future .inner .container h1{text-align:center;width:100%;line-height:250px;margin:0;font-size:100px;color:#de1111;opacity:.69}.future .underlay{position:absolute}.future .underlay img{transform:translate(-50%)}.krv h1{animation:fadeIn07 3s ease-in;position:absolute;top:10%;left:15%;font-size:333px;opacity:.7;color:#000;background-color:#de1111;padding:50px 120px}.krv .underlay{position:absolute}.krv .underlay img{transform:translate(-5%)}.page{display:flex;justify-content:center}.home,.connect-screen{animation:fadeIn 6s ease-in-out}.home .info,.connect-screen .info{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#000000ba;width:600px;height:600px;border-left:3px solid #de1111;padding-left:20px}.home .info .header,.connect-screen .info .header{display:flex}.home .info .header .title,.connect-screen .info .header .title{margin:0;color:#de1111;font-size:50px;line-height:60px;align-self:flex-end;padding-right:13px}.home .info .header .subtitle,.connect-screen .info .header .subtitle{margin:0;line-height:60px;align-self:flex-end;color:#eeeeeece}.connect-btn{animation:fadeIn 9s ease-in-out;position:absolute;top:65%;left:50%;transform:translate(-50%,-50%);z-index:10;margin-top:200px;background-color:#000000ba;border:1px solid transparent;color:#fff;padding:20px 30px;opacity:.8;font-family:Times New Roman,Times,serif}.connect-btn:hover{cursor:pointer;background-color:#000000f2;border-bottom:1px solid #de1111}.connect-btn h1{font-size:33px;text-align:center;font-weight:300}.connect-btn img{height:33px}.disconnect-btn{position:absolute;top:0%;left:80%;line-height:40px;color:#656565}.disconnect-btn:hover{cursor:pointer;color:#fff}@media (max-width: 470px){.gui{width:90%}.gui .home{width:90%;background-color:red}.gui .home .info{width:90%}.gui .connect-btn{width:80%;position:absolute;margin-top:300px}.gui .connect-btn h1{font-size:21px;text-align:center;font-weight:300}.gui .main{display:flex;justify-content:space-between;width:90%;position:absolute;margin:0 auto}.gui .main .agent-card{animation:fadeIn 5s ease-in-out;scale:.33;width:250px;height:350px;margin-top:100px;text-align:center;border-bottom:1px solid white}.gui .main .agent-card h1{color:#454545;font-size:33px}.gui .main .agent-card img{width:100%;opacity:.81;border-radius:50%}.gui .main .agent-0 hr{border-color:#000;box-shadow:none}.gui .main .agent-0 img{filter:brightness(5%) sepia(1000%) saturate(10000%);background-color:red}.gui .main .agent-1 hr{border-color:red}.gui .main .agent-1 img{filter:invert(1) brightness(5%) sepia(100%) saturate(10000%)}.gui .main .react-p5{display:flex}.gui .main .react-p5 canvas{position:absolute;top:50%!important;left:50%!important;transform:rotate(270deg) translate(15%,-80%);height:350px!important;width:600px!important}.gui .underlay img{transform:translate(-50%);width:100%}}