:root {
    /* Darker background so the hands drawing stands out */
    --bg: #060503;
    --accent: #0b57d0;
    --text: #f5f5f5;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(16px, 2.5vw, 20px);
    font-weight: 400;
    background: var(--bg) url('hands.png') no-repeat fixed left top;
    background-size: 1024px auto;
    margin: 0;
    color: var(--text);
}

@media (max-width: 1024px) {
    body {        
        background-size: 100% auto;
    }
}

.title {
    font-size: 1.2em;
}

.float {
    float: left;
    margin-right: 4em;
}

#content, #back_content {
    position: absolute;
    top: 150px;
    left: 250px;
    right: 2em;
    padding: 1em;
}

#content {
    z-index: 5;
    line-height: 1.5;
}

#back_content {
    bottom: -35em;
    border-radius: 8px;
    z-index: 1;
    background-color: var(--bg);
    opacity: 0.6;
}

a img {
    border-width: 0;
}

a {
    border-bottom: dotted 1px var(--text);
}

a:link,
a:visited {
    color: var(--text);
    text-decoration: none;
}

a:hover {
    font-weight: bold;
    color: var(--accent);
}

#technologiesContent,
#contactContent {
    display: none;
}

#menu {
    position: absolute;
    top: 1em;
    right: 3em;
}

#menu ul li {
    display: inline;
    transition: all 0.5s ease-in-out;
    padding: 0px 3px;
}

#menu ul {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--accent);
    border-bottom: 1px solid var(--accent);
}

#menu li.active {
    display: none;
}

#menu li:hover {
    background: var(--accent);
    color: black;
}

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

#technologiesList li {
    list-style-type: none;
    display: inline-block;
    margin: 1em;
    border-color: var(--accent);
    border-radius: 10px;
    border-width: 3px;
    border-style: outset;
    padding: 1em;
}

#languages {
    position: fixed;
    bottom: 1em;
    left: 1em;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

#languages a {
    border-width: 0;
    display: block;
}

#signature {
    text-align: right;
    font-family: 'Dawning of a New Day', cursive;
    font-size: 72px;
    margin-top: 0.5em;
    margin-right: 1em;
    line-height: 1em;
}

#signature img {
    margin: 0em 4em 2em 2em;
}

@media only screen and (max-width: 640px) {
    #content,
    #back_content {
        left: 20%;
        right: 0em;
    }

    #menu {
        background-color: var(--bg);
        right: 1em;
    }
}

@media only screen and (max-width: 370px) {
    #content,
    #back_content {
        left: 2em;
    }

    #languages {
        display: none;
    }
}