/* ===================================== */
/* ============== GENERAL ============== */
/* ===================================== */

:root {
    --background: #1d1d1d;
    --second-background: #060709;
    --button: #222222;
    --text-light: #ffffff;
    --text-contrast: #ffb400;
}

html {
    background-color: var(--second-background);
}

body {
    font-family: system-ui, sans-serif;
    margin: .50rem 25% 3rem 25%;
    background-color: var(--background);
    /* box-shadow: 0px 1px 5px #8B807C; */
    border-radius: .25rem;
}

#body {
    display: flex;
}



/* ============================= */
/* == HEADER - PICTURE - NAME == */
/* ============================= */

#top-banner {
    background-color: var(--second-background);
    height: 4rem;
    display: flex;
    padding-left: 20rem;
    padding-right: 3rem;
}

.button {
    padding: 0 1.5rem 0 1.5rem;
}

a {
    font-size: 1.2rem;
    font-weight: 300;
    text-decoration: none;
    /* text-shadow: 1px 1px 5px #4B4549; */
    color: var(--text-light);
    transition: 0.3s;
}

a:hover {
    color: #8B807C;
    opacity: 75%;
}

.header {
    display: flex;
}

#picture-container {
    width: 33%;
}

#picture {
    width: 50%;
    border-radius: 50%;
    padding: 2rem 2rem;
    margin-left: 2.75rem;
}

#name-area {
    width: 67%;
}

#name {
    margin-top: 4rem;
    margin-bottom: 0;
    font-size: 3rem;
    color: var(--text-light);
}

#occupation {
    margin-top: 0;
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--text-contrast);
}

#horizontal-line {
    background-color: var(--text-light);
    width: 90%;
    border-style: solid;
    border-width: 1px;
}



/* ===================================== */
/* == CONTACT - EDUCATION - LANGUAGES == */
/* ===================================== */

#left {
    width: 33%;
}

#contact-details {
    list-style-type: none;
}

.contact {
    font-size: 1rem;
}

.material-symbols-outlined {
    position: relative;
    padding-right: 1rem;
    padding-bottom: 1rem;
    top: .4rem;
}

#education-area {
    padding: 5rem 0 0 3rem;
}

#languages-area {
    padding: 1rem 0 0 3rem;
}



/* ==================================== */
/* === ABOUT ME - CERTS - KNOWLEDGE === */
/* ==================================== */

#right {
    width: 60%;
}

.area-title {
    color: var(--text-contrast);
    font-size: 1.5rem;
}

.area-subtitle {
    color: var(--text-light);
    font-size: 1rem;
}

h5.area-subtitle {
    margin: 0 0;
}

.area-h4 {
    color: var(--text-light);
    font-size: .75rem;
    margin-bottom: 0;
}

p {
    color: var(--text-light);
    font-size: .75rem;
}

.p-settings {
    font-size: 1rem;
}

#aboutme-area {
    text-align: justify;
    padding-bottom: 1.75rem;
}

#aboutme-area > p {
    font-size: 1rem;
    font-weight: 400;
}

#cert-area {
    padding-bottom: 1.75rem;
}

#knowledge-area {
    padding-bottom: 10rem;
}

b {
    font-size: larger;
    color: var(--text-contrast);
}

li {
    font-size: .75rem;
    color: var(--text-light);
    text-align: justify;
}

footer {
    font-size: .85rem;
    text-align: right;
    opacity: 0.25;
    color:var(--text-light);
    padding-bottom: 1rem;
    padding-right: 2rem;
}

@media only screen and (max-width: 1000px) { 
    
    body {
        margin: .50rem 2.5% 2rem 2.5%;
    }

    #knowledge-area {
        padding-bottom: 5rem;
    }

    #top-banner {
        padding-left: 14rem;
    }

    a {
        transition: none;
    }
    
    a:hover {
        opacity: 100%;
    }

}

@media only screen and (max-width: 600px) { 
    
    body {
        margin: .50rem 2.5% 2rem 2.5%;
    }

    #body {
        display: inline-block;
        margin-bottom: 3rem;
    }

    .header {
        display: inline-block;
    }

    #top-banner {
        padding-left: 2.25rem;
    }

    a {
        transition: none;
    }
    
    a:hover {
        opacity: 100%;
    }

    img {
        text-align: center;
    }

    #picture {
        margin-left: 15%;
    }

    #name {
        margin-top: 0;
        text-align: center;
    }

    #occupation {
        text-align: center;
    }

    #horizontal-line {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }

    .contact {
        text-align: center;
        margin-right: 2rem;
    }

    .material-symbols-outlined {
        padding: 0 .125rem .125rem .125rem;
    }

    #education-area {
        padding: 3rem 0 0 3rem;
    }

    #aboutme-area {
        padding: 3rem 0 0 3rem;
        margin-right: 3rem;
    }

    #cert-area {
        padding: 3rem 0 0 3rem;
        margin-right: 3rem;
    }

    #knowledge-area {
        padding: 3rem 0 0 3rem;
        margin-right: 3rem;
    }

    ul {
        padding-inline-start: 0;
    }

}