@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css");
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');

body, input {
    font-family: 'Rubik', Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    color: white;
    background: transparent;
}

body {
    max-width: 750px;
    max-height: 400px;
}

#card {
    background-color: rgb(40, 35, 45);
    background: linear-gradient(45deg, rgb(30, 25, 35), rgb(50, 45, 55));
    padding: 15px;
    border: 2px darkgray solid;
    border-radius: 15px;
    max-width: 750px;
    margin: auto;
}

.pfp {
    border-radius: 15px;
    border: darkgray 4px solid;
    width: 60%;
    transform: scale(0.9);
    border-radius: 50%;
    max-width: 135px;
    margin: 15px;
    transition: all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.pfp:hover {
    transform: scale(1);
    border-color: rgb(255, 200, 255);
    object-fit: cover;
}