/* keyframes */
@keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}
/* media */
@media only screen and (max-width: 768px) {
    :root {
        --avatar: 11rem;
        --big-size: 2rem;
        --line-height: 1.4rem;
        --margin: 1rem;
        --size: 1rem;
    }
    #interests {
        float: left;
        margin-bottom: var(--big-size);
    }
    #techs {
        float: left;
    }
}
@media only screen and (min-width: 768px) {
    :root {
        --avatar: 15rem;
        --big-size: 2rem;
        --line-height: 2.2rem;
        --margin: 5rem;
        --size: 1rem;
    }
    #interests {
        float: left;
        margin-bottom: var(--big-size);
    }
    #techs {
        float: left;
    }
}
@media only screen and (min-width: 992px) {
    :root {
        --avatar: 18rem;
        --big-size: 3rem;
        --line-height: 2.4rem;
        --margin: 9rem;
        --size: 1.3rem;
    }
    #interests {
        float: left;
        width: 50%;
    }
    #techs {
        float: right;
        width: 50%;
    }
}
/* other */
html[data-mode="dark"] {
    --background: #000000;
    --image-background: var(--text-color);
    --link: #fda2a2e0;
    --text-color: #fcfcfc;
}
html[data-mode="light"] {
    --background: #f5f5f5;
    --image-background: var(--background);
    --link: #56449cf1;
    --text-color: #000000;
}
a {
    animation: fadein 3s ease;
    color: var(--link);
}
body {
    background: var(--background);
    color: var(--text-color);
    font-family: monospace, monospace;
    margin: 0;
}
h1 {
    font-size: var(--big-size);
}
img {
    animation: fadein 3s ease;
    background-color: var(--image-background);
    border: 0.3rem solid var(--image-background);
    border-radius: 50%;
    height: var(--avatar);
    width: var(--avatar);
}
p {
    font-size: var(--size);
    line-height: var(--line-height);
}
ul {
    display: inline-block;
    font-size: var(--size);
    margin: 0;
    text-align: left;
}
#content, #footer {
    background: var(--background);
    border-radius: 1rem;
    box-shadow: 0 0 0.3rem #969696;
    left: 0;
    margin: var(--margin);
    padding: var(--big-size);
    position: relative;
    text-align: center;
}
#infos {
    display: table;
    width: 100%;
}
#projects {
    margin-top: var(--line-height);
}
.clickable {
    cursor: pointer;
    text-decoration: none;
    text-shadow: 0.3rem 0.3rem 0.3rem var(--link);
    transition: text-shadow 0.5s ease-out;
}
.clickable:hover {
    text-shadow: 0 0 2rem var(--link);
}
.common-list {
    margin-left: var(--margin);
    margin-right: var(--margin);
    padding: 0;
}
.common-list li {
    margin: var(--size);
}
.logo, .qr {
    height: calc(var(--big-size)*1.7);
    width: calc(var(--big-size)*1.7);
}
.qr {
    border-radius: 0% !important;
}