@import url(https://fonts.googleapis.com/css?family=Droid+Sans);
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');


 ::-moz-selection{
    background:lightgreen;
}
 ::selection{
    background:lightgreen;
}

 .pipfront{
    width:450px;
    height:400px;
    background:#8b7867;
    background: linear-gradient(#8b7867,#726350);
    left:45px;
    position:absolute;
    top:-60px;
    padding-top:30px;
    border-radius:100px;
    border-top-right-radius:70px;
    border-bottom-right-radius:60px;
    border-bottom-left-radius:30px;
    position:relative;
    z-index:0;
    border-top:4px solid #c3bfb4;
    box-shadow:0px 0px 5px #3f2d21;
}
 .pipfront:after{
    content:"";
    display:block;
    width:310px;
    height:55px;
    background: linear-gradient(#776754,#726350);
    margin-top:0px;
    margin-left:87px;
    border-bottom-left-radius:13px;
    border-bottom-right-radius:13px;
    box-shadow:0px 2px 4px #4e4037;
}
 .stat:before{
    content:"Stat";
}
.inv:before{
    content:"Inv";
}
.data:before{
    content:"Data";
}
.map:before{
    content:"Map";
}
.radio:before{
    content:"Radio"
}
.status:before{
    content:"Status";
}
.special:before{
    content:"Special";
}
 .screen-border{
    background:#272b2a;
    width:370px;
    height:290px;
    margin:auto;
    border-radius:50px;
    padding-top:5%;
    border-top:10px solid #5a5f5b;
    border-bottom:5px solid #3a3e41;
    position:relative;
    z-index:-5;
}
 .screen{
    top: 5%;
    left: 4%;
    width:300px;
    height:235px;
    position:absolute;
    margin-left:26px;
    border-radius:20px;
    background:#000;
    border:5px solid #333;
    padding:5px 5px 5px 0;
    ;
    overflow:hidden;
}
 .screen-reflection{
    width:285px;
    height:185px;
    background:linear-gradient(150deg,#fff,rgba(0,0,0,0));
    position:relative;
    z-index:99;
    opacity:0.07;
    margin:9px 10px 10px 10px;
    border-radius:10px;
}
 .scan{
    width:305px;
    height:80px;
    background:linear-gradient(rgba(0,0,0,0),#7ff12a);
    position:absolute;
    animation:scan;
    animation-duration:4s;
    animation-iteration-count: infinite;
    top:-85px;
    z-index:99;
    opacity:0.25;
}
 nav{
    height:25px;
    width:90%;
    position:absolute;
    top:0;
    left:0;
    border-bottom:1px solid #8df776;
    padding-left:10%;
    border-top-right-radius:20px;
    z-index:95;
    border-top-left-radius:20px;
}
 nav span{
    color:#8df776;
    line-height:31px;
    font-size:9pt;
    letter-spacing:0.3px;
    margin-left:14px;
    font-weight:300;
}
 nav .active{
    background:#000;
    border-right:1px solid #8df776;
    border-left:1px solid #8df776;
    border-bottom:1px solid #000;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    padding:3px 6px 3px 6px;
}
 nav p{
    margin:-10px 0 0 0;
    height:25px;
}
 nav .off{
    color:#172f18;
    position:relative;
    left:-5px;
}
 .vaultboy{
    background:url('/img/coral.gif');
    background-size:77px;
    background-position:2px;
    width:80px;
    height:100px;
    position:absolute;
    left:110px;
    top:56px;
    background-repeat: no-repeat;
}
 .bar1,.bar2,.bar3,.bar4,.bar5,.bar6{
    width:15px;
    height:3.5px;
    background:#64d515;
    position:absolute;
}
 .bar1{
    left:32px;
    top:-8px;
}
 .bar2{
    left:32px;
    bottom:-8px;
    background:none;
    border:1px solid #64d515;
    height:1.5px;
}
.bar2:after{
    content:"";
    display:block;
    height:1.5px;
    width:7.6px;
    background:#64d515;
}
 .bar3{
    left:-20px;
    top:32px;
}
 .bar4{
    right:-20px;
    top:32px;
}
 .bar5{
    left:-20px;
    top:82px;
}
 .bar6{
    right:-20px;
    top:82px;
}
 .supplies{
    height:16px;
    position:absolute;
    bottom:22px;
    left:13px;
    background:#000;
}
 .supplies span{
    margin-right:5px;
    background:#78e461;
    padding:2px 3px 2px 3px;
    color:#000;
    font-weight:700;
}
 .hud-bar{
    height:12px;
    position:absolute;
    width:290px;
    bottom:9px;
    left:15px;
    background:#000;
    color:#8df776;
    z-index:96;
}
 .info-bar{
    width:170px;
    height:20px;
    bottom:50px;
    left:86px;
    position:absolute;
    z-index:97;
}
 .info-bar span{
    background:rgba(0,255,0,0.0.2);
    padding:3px;
    height:15px;
    display:inline-block;
    vertical-align:top;
    font-size:7px;
    color:#8df776;
    text-align:center;
    position:relative;
}
 .info-bar span i{
    position:absolute;
    top:0;
    left:5px;
}
 .info-bar span p{
    margin-top:8px;
}
 .hp{
    display:inline-block;
}
.hp:before{
    content:"HP 365/365";
}
 .exp{
    display:inline-block;
    margin-left:20px;
}
.exp:before{
    content:"Level 48";
}
 .exp:after{
    content:"";
    display:inline-block;
    width:99px;
    height:4px;
    border:1px solid lightgreen;
    margin-left:2px;
}
 .ap{
    display:inline-block;
    margin-left:20px;
}
.ap:before{
    content:"AP 110/110";
}
 .weapon{
    background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/pipboy-gun2.png') no-repeat;
    width:23px;
    height:auto;
}
 .aim{
    background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/pipboy-aim2.png')
}
 .shield{
    background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/pipboy-shield2.png')
}
 .voltage{
    background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/pipboy-voltage2.png');
}
 .nuclear{
    background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/pipboy-nuclear2.png')
}
 .helmet{
    background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/pipboy-helmet2.png');
}
 .aim,.shield,.voltage,.nuclear{
    width:10px;
    background-size:10px 10px;
    height:auto;
    background-repeat:no-repeat;
    background-position:3px 0px;
}
 .weapon,.helmet{
    background-size:27px;
    height:auto;
    width:23px;
    background-repeat:no-repeat;
}
 @keyframes flicker{
     0%{
        box-shadow:0px 0px 5px 0px red;
    }
     5%{
        box-shadow:0px 0px 30px 2px red;
    }
     60%{
        box-shadow:0px 0px 30px 2px red;
    }
     80%{
        box-shadow:0px 0px 10px 0px orange;
    }
     90%{
        box-shadow:0px 0px 30px 2px red;
    }
     100%{
        box-shadow:0px 0px 0px 0px red;
    }
}
 @keyframes meter{
     0{
        transform:rotate(30deg);
    }
     50%{
        transform:rotate(20deg);
    }
}
 @keyframes scan{
     0{
        top:-80px;
    }
     70%{
        top:300px;
    }
     100%{
        top:300px;
    }
}

.coral-info {
    font-size: 16px;
    color: #555;
}

.environment-info {
    font-size: 16px;
    color: #333;
    margin-top: 10px;
}

.coral-animation {
    text-align: center;
    background-color: azure;
    height: 60%;
    border-top-left-radius: 20px; /* Apply radius to the top-left corner */
    border-top-right-radius: 20px; /* Apply radius to the top-right corner */
}

.content2 {
    color: white;
    height: 100%;
}

.coral-container {
   height: 95%;
   overflow-y: scroll;
}

.coral-actions {
    display: flex;
    flex-wrap: wrap;
    margin-left: -5px;
    margin-top: 15px;
    width: 100%;
    align-items: center;
}

.coral-button {
    height: 50px;
    width: 50px;
    text-align: center;
    margin: 5px; /* Adds space around each button */
}


.coral-profile {
    height: 90px;
    width: 90px;
    background-color: #282828;
    margin-top: -30px;
    margin-bottom: 20px;
    border-radius: 100%;
}

.coral-content {
   padding-left: 20px;
   padding-right: 20px;
}

.action-button {
    border: none;
}

.coral-title {
   position: absolute;
   bottom: 220px;
   left: 130px;
   font-size: xx-large;
}

.coral-display {
   position: absolute;
   top: 20px;
}

::-webkit-scrollbar {
    display: none;
}