/*
    Protect your host's body
    Copyright (C) 2024  Nuaym Syed

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/

.panel{
    position: relative;
    background-color: black;
    color: white;
    margin-top: 15vh;
    height: 75vh;
    border-radius: 25px; 
    width: 70vw;
    left: 15vw;
    background: rgba(9, 9, 121, 0.781);
    background: radial-gradient(circle, rgb(1, 1, 107) 40%, rgb(2, 0, 36) 100%);
}
.panel-title{
    text-align: center;
    background: rgba(9, 9, 121, 0.459);
    background: radial-gradient(circle, rgb(9, 9, 121) 1%, rgb(2, 0, 36) 50%);
    border-bottom: 1px;
    border-style: double;
    border-color: white;
    border-radius: 25px 25px 0 0; 
    padding: 1%;

}
.panel h1{
    display: inline-block;
}
.panel-close{
    float: right;
    background-color: rgb(0, 0, 0);
    outline: 2px inset white;
    border-radius: 10px;
    color:white;
    width:fit-content;
    padding-left: 3%;
    padding-right: 3%;
}

.panel-close:hover{
    animation-name: expand;
    animation-duration: 0.1s;
    animation-iteration-count: 1;
    outline-width: 5px;
    background-color: rgb(51, 51, 51);
}

@keyframes expand{
    from {outline-width:2px;}
    to  {outline-width: 5px;}
}


.panel-text{
    position: relative;
    overflow-wrap:normal;
    height: 50vh;
    font-family: "Monaco", "Courier New", monospace;
    padding: 5px;
    overflow: scroll;
    overflow-x: hidden;
}
#info-text{
    width: 40vw;
}


#info-card{
    position: fixed !important;
    background-color: gray;
    width:25vw;
    height: 60vh;
    border-radius: 20px;
    top:28vh;
    left: 60vw;
}

#info-card h1{
    width: inherit;
    border-top-right-radius: inherit;
    border-top-left-radius: inherit;
    margin: 0;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.664);
    font-family: "Monaco", "Courier New", monospace;
}
#info-card h2{
    width: inherit;
    border-radius: inherit;
    margin: 0;
    margin-top: 5px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.664);
    font-family: "Monaco", "Courier New", monospace;
}

#info-card p1{
    text-align: center;
    width: inherit;
}

#info-card img{
    width:25vw;
    margin-left: auto;
    margin-right: auto;
}

#lifeline button{
    background-color: black;
    color: white;
}

.right{
    float:right;
    width:20vw;
}

.left{
    float:left;
    width:20vw;
}