@import url("base/index.css");

#bio {
    margin-top: 3rem;
    border: 0.25rem solid whitesmoke;
}

#avatar {
    aspect-ratio: 3 / 4;
    image-rendering: pixelated;
    margin-left: 4vw;
    margin-right: 2vw;
    margin-bottom: 1rem;
}

#content {
    display: grid;
}

#title {
    color: whitesmoke;
    padding: 0.25rem 0 0.25rem;
}

#description {
    color: whitesmoke;
    text-align: left;
    padding: 1rem;
    width: fit-content;
}

#description > a {
    color: whitesmoke;
    text-decoration: underline;
}

.badge {
    margin: 0 0.5rem 0;
    border: 0.15rem solid white;
}

@media (orientation:portrait) {
    #bio,  #content, #title, #badges{
        width: calc((19 / 4) * 10vh);
    }
    #avatar {
        height: 40vh;
    }
    #content {
        grid-template-columns: 1fr;
    }
}

@media (orientation:landscape) {
    #bio, #content, #title, #badges {
        width: 60vw;
    }
    #avatar {
        width: 20vw;
    }
    #content {
        grid-template-columns: min-content 1fr;
    }
}