*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    transition: .2s all linear;
    opacity: 1;
}
::selection{
    background-color: rgba(255, 255, 255, 0.274);
}
body{
    width: 100vw;
    overflow-x: hidden;
    background-color: #2c2c2c;
    display: grid;
    position: relative;
}
#searchArea{
    margin-top: 15vh;
    width: 100vw;
    height: 5vh;
    display: grid;
    align-items: center;
    justify-content: center;
}
#title{
    font-size: calc(1vw + 3vh);
    width: 100vw;
    height: 10vh;
    background-color: black;
    display: flex;
    color: white;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
}
#title h3{
    cursor: pointer;
}
#title h3:hover{
    color: rgb(160, 160, 160);
}
#search{
    width: calc(27vh + 30vw);
    height: calc(1vw + 3vh);
    font-size: calc(1.4vh + .7vw);
    border: 0;
    padding: 0 1vw;
    margin-top: -4vh;
    color: rgb(255, 255, 255);
    background-color: rgb(63, 63, 63)
}
input[type=text]:focus{
    outline: 0;
}
.elements{
    width: calc(27vh + 30vw);
    height: 4vh;
    transition: .2s all linear;
    background-color: #1D1D1D;
    transform: scale(0);
    outline: .1vw #2C2C2C solid;
    display: flex;
    color:rgb(240, 240, 240);
    align-items: center;
    position: relative;
    font-family: 'Lora', serif;
    cursor: pointer;
    font-size: calc(.8vh + .5vw);
}
.rank{
    position: absolute;
    left: 0;
    width: calc(2.5vw + 1vh);
    margin-left: .2vh;
    display: flex;
    justify-content: center;
}
.pic{
    width: 4vh;
    height: 4vh;
    margin-left: calc(2.5vw + 1.7vh);
    position: absolute;
}
.name{
    display: flex;
    align-items: center;
    height: 100%;
    width: calc(10vw + 5vh);
    margin-left: calc(3.7vw + 6.2vh);
    position: absolute;
}
.work{
    display: flex;
    align-items: center;
    height: 100%;
    width: 10vw;
    margin-left: calc(1vw + 14vh);
    position: absolute;
    left: 10vw;
}
.money{
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 10vw;
    position: absolute;
    right: 2vw;
}
.country{
    display: flex;
    align-items: center;
    height: 100%;
    right: calc(8vw + 2vh);
    position: absolute;
}
#main{
    position: absolute;
    width: 65vw;
    left: 17.5vw;
    outline: calc(1vh + 1vw) solid #1c1c1c;
    margin-top: 5vh;
}
#details{
    width: 65vw;
    height: 25vh;
    display: flex;
    background-color: #1D1D1D;
    color: white;
    font-size: calc(1.4vw + 1.3vh);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding: 0 calc(1vw + 1vh);
}
#bios{
    width: 65vw;
    height: 32vh;
    background-color: #1D1D1D;
    color: white;
    padding: calc(1vw + 1vh);
    font-size: calc(1.4vh + .7vw);
    line-height: calc(1.5vh + .6vw);
    font-weight: lighter;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#pic{
    width: 25vh;
    height: 25vh;
}
#secondary{
    display: grid;
    width: 40vw;
    height: 18vh;
}
#important{
    width: 40vw;
    height: 5vh;
    display: flex;
    align-items: center;
    background-color: #1d1d1d;
}
#name{
    width: 80%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 1vw;
    font-weight: bold;
}
#rank{
    width: 20%;
    height: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}
#work,#main_source,#country,#money{
    width: 100%;
    height: 4.5vh;
    background-color: #1D1D1D;
    color: rgb(192, 192, 192);
    font-size: calc(1.3vw + .8vh);
    font-weight: bold;
    padding: 0 1vw;
    display: flex;
    align-items: center;
    transition: .2s all linear;
}
#work,#country{
    background-color: #181818;
}
@media only screen and (max-width: 700px) {
    #work,#main_source,#country,#money,#rank{
        font-size: calc(1.2vw + 1.456vh);
        margin-right: -2vh;
        width: 55vw;
    }
    #main{
        margin-top: 1vh;
        width: 90vw;
        left: 5vw;
        height: 65vh;
    }
    #details{
        width: 90vw;
    }
    #pic{
        width: 19vh;
        height: 24vh;
    }
    #important{
        width: 100%;
        height: 7vh;
    }
    #secondary{
        display: grid;
        width: 100%;
        height: 18vh;
    }
    #details{
        height: 20vh;
    }
    #bios{
        width: 90vw;
        padding: calc(.51vw + .51vh);
        font-size: calc(1.62vh + .8vw);
        line-height: calc(1.6vh + 1vw);
        margin-top: 5vh;
    }
    #name{
        width: 80%;
        font-size: 2vh;
    }
    #rank{
        width: 5%;
    }
    #searchArea{
        margin-top: 15vh;
    }
    body{
        background-color: #1d1d1d;
    }
    .elements{
        height: 6vh;
        font-size: calc(1.7vh + .7vw);
    }
    #search{
        font-size: calc(1.7vh + .7vw);
    }
    .rank{
        position: absolute;
        left: 0;
        width: calc(2.5vw + 1vh);
        margin-left: 1.3vh;
        display: flex;
        justify-content: center;
    }
    .pic{
        width: 4vh;
        height: 4vh;
        margin-left: calc(2.5vw + 4.2vh);
        position: absolute;
    }
    .name{
        display: flex;
        align-items: center;
        height: 100%;
        width: calc(10vw + 25vh);
        margin-left: calc(3.7vw + 9vh);
        position: absolute;
    }
    .work{
        display: none;
    }
    .money{
        display: flex;
        align-items: center;
        height: 100%;
        margin-left: 10vw;
        position: absolute;
        right: 2vw;
    }
    .country{
        display: none;
    }
}

.elements:hover{
    background-color: rgb(75, 75, 75)
}
#animation{
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .5s all linear;
    transform: scale(1);
}
#content{
    transition: .5s all linear;
    display: none;
    opacity: 0;
}
#anim{
    animation: an 1.8s linear 1 forwards;
    opacity: 0;
    transition: 3s all linear;
    transform: rotateY(90deg);
    width: calc(20vh + 10vw);
    height: calc(20vh + 10vw);
    transition: .3s all linear;
    background: url("./dollar.png") no-repeat center center/cover;
}
@keyframes an {
    0%{
        opacity: 0;
        transform: rotateY(90deg)
    }
    100%{
        opacity: 1;
        transform: rotateY(1790deg)
    }
}
#searchB{
    position: absolute;
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
    width: 100vw;
    margin-top: 25vh;
    font-size: calc(1.7vh + 1.7vw);
}