html{
    height:100%;
    width: 100%;
}
body{
    height:100%;
    width:100%;
    margin:0px;

    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400, 600, 700;
    font-style: normal;
    font-variation-settings: "slnt" 0;
}

.container{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height:100%;
    width:100%;
    background-color: hsl(0, 0%, 8%);
}

.panel{
    width: 400px;
    height: 630px;;
    background-color: hsl(0, 0%, 12%); 
    border-radius: 15px;
}

.content{
    display: flex;
    flex-direction: column;
    align-items: center;
    height:85%;
    margin:50px;
}

#pro_pic{
    border-radius: 50%;
    height:auto;
    width:40%;
}

h1{
    margin:0px;
    margin-top: 25px;
    margin-bottom:10px;
    color: hsl(0, 0%, 100%);
    font-size: 24px;

    
}
h3{
    margin:0px;
    color: hsl(75, 94%, 57%);
    font-size: 14px;
}

p{
    font-size:12px;
    color: hsl(0, 0%, 100%);
    margin-top:25px;
    margin-bottom: 25px;
}

.links{
    height:100%;
    width:100%;
    
    max-height: inherit;
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
    overflow-y: auto;
    align-items: center;
}

.button_link{
    background-color: hsl(0, 0%, 20%);
    height: 13%;
    width:100%;
    border-radius: 10px;   
    display: flex;
    justify-content: center;
    align-items: center;
}

a{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400, 600, 700;
    font-style: normal;
    font-variation-settings: "slnt" 0;
    text-decoration: none;
    color: hsl(0, 0%, 100%);
    font-size: 12px;
    height:100%;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

a:hover{
    background-color: hsl(75, 94%, 57%);
    color: hsl(0, 0%, 8%);
    border-radius: 10px; 
}