body {
    background: #7e78a6;
    font-family: "VT323", monospace;
    font-size: 18px;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    background: #88c0d6;
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background: #4d859b;
    border-radius: 10px;
}

h1 {
    text-align: center;
}

a, a:visited {
    color: #3f3678
}

a:hover {
    color: #afa9d8;
}

#content {
    width: 90%;
    margin: auto;
    margin-top: 25px;
    display: flex;
}

#left {
    width: 40%;
    margin: 20px;
}

#left img {
    max-width: 100%;
}

#currently {
    background: #afa9d8;
    border: 2px solid #3f3678;
    border-radius: 10px;
    margin-top: 10px;
    padding: 5px;
}

#currently ul {
    margin: 0;
    padding: 0;
}

#currently li {
    list-style-type: none;
    background: #7e78a6;
    margin: 7px;
    padding: 3px;
    border-radius: 10px;
}

#right {
    width: 70%;
}

#desc {
    background: #afa9d8;
    border: 2px solid #3f3678;
    border-radius: 10px;
    padding: 10px;
    height: 300px;
    overflow: auto;
}

#desc p {
    margin-top: 0;
}

#boxes {
    display: flex;
    margin-top: 10px;
}

#interests, #links {
    background: #afa9d8;
    border: 2px solid #3f3678;
    border-radius: 10px;
    padding: 5px;
    width: 50%;
    height: 200px;
    overflow: auto;
}

#interests {
    margin-right: 10px;
}

#interests ul {
    padding-left: 15px;
    margin: 0;
}

#links a:hover {
    color: #7e78a6;
}

@media (max-width: 800px) {
    #content, #boxes {
        display: block;
    }

    #left, #right, #boxes, #interests, #links {
        width: 100%;
    }

    #desc, #interests {
        margin-bottom: 20px;
    }
}