:root {
    --accent-color: #9A62FD;
    --accent-dark-color: #572AD9;
    --accent-dark-lighter-color: #6935F7;
    --accent-dark-foreground: #f0f0f0;
}

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

a:hover {
    text-decoration: underline;
}

body {
    background-color: black;
    color:#c8c8c8;
    font-family: sans-serif;
    margin:0;
}

#navbar {
    width:100%;
    background-color: #383848;
    position: fixed;
    z-index: 100;
}

#content-navbar-margin {
    height: var(--navbar-height)
}

#navbar-left {
    float: left;
}

#navbar-right {
    float: right;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#logo-navbar {
    overflow: hidden;
}
#logo-navbar::before {
    content: '\00a0';
    background-image: url(assets/logo_transparent.png);
    background-size: cover;
    width: 0;
    height: var(--navbar-height);
    position: relative;
    display: inline-block;
    z-index:2;
}
#logo-navbar::after {
    content: 'Daniel Cepeda';
    color:#bbbbbb;
    height: 100%;
    display: inline-block;
    line-height: var(--navbar-height);
    position: relative;
    vertical-align: top;
    font-size:2.5em;
    text-align: left;
    transition:left 0.2s;
    left: 0;
    z-index:1;
}
body[data-section-index="0"] #logo-navbar::after {
    left: -300px;
}

.navbar-button {
    display: inline-block;
    position: relative;
    height: var(--navbar-height);
    font-size: 1.2em;
    padding: 0 1em 0 1em;
    line-height: var(--navbar-height);
    cursor: pointer;
    box-sizing: border-box;
}
.navbar-button::before {
    content: '\00a0';
    position: absolute;
    display:block;
    box-sizing:border-box;
    left:0;
    bottom:0;
    width: 100%;
    height: 0;
    background-color:rgb(240,240,255,0.1);
    transition: height 0.1s, border-bottom-width 0.1s;
    border-bottom: 0 solid var(--accent-color);
}

.navbar-button:hover::before {
    height: 100%;
}

body[data-section-index="0"] .navbar-button:nth-child(1)::before {
    height: 100%;
    border-bottom-width: 4px;
}
body[data-section-index="1"] .navbar-button:nth-child(2)::before {
    height: 100%;
    border-bottom-width: 4px;
}
body[data-section-index="2"] .navbar-button:nth-child(3)::before {
    height: 100%;
    border-bottom-width: 4px;
}
body[data-section-index="3"] .navbar-button:nth-child(4)::before {
    height: 100%;
    border-bottom-width: 4px;
}
body[data-section-index="4"] .navbar-button:nth-child(5)::before {
    height: 100%;
    border-bottom-width: 4px;
}
body[data-section-index="5"] .navbar-button:nth-child(6)::before {
    height: 100%;
    border-bottom-width: 4px;
}

.unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.section {
    position:relative;
}

#home.section .section-background {
    background-image: url(assets/banner.png);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    position: absolute;
    width: 100%;
    height: 100%;
}

.floating-section-block {
    margin: 100px 0 100px 0;
    padding: 5%;
    background-color: #2d2e40;
    position: relative;
    display: inline-block;
    text-align:center;
}

.block-title {
    font-size:4em;
    font-weight:bold;
    color:white;
}
.block-subtitle {
    font-size:1.25em;
    display: inline-block;
}
.block-credit {
    margin-top:5px;
    font-size:1.5em;
    display: inline-block;
}

.title-board {
    align-items: center;
}

.logo-large {
    background-image: url(assets/avatar.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    display: inline-block;
    border-radius:100%;
    margin-bottom:16px;
    border:4px solid var(--accent-color);
}

.quick-actions {
    margin-top: 40px;
}

button {
    padding: 15px 25px;
    font-size: 2em;
    -webkit-appearance: none;
    margin: 0 50px;
    border: none;
    background: #4a4c5f;
    color: #bbbbbb;
    cursor: pointer;
}

button.small {
    font-size:1.25em;
}

button:hover {
    background: #4f5062;
}

button.accent {
    background: var(--accent-dark-color);
    color: var(--accent-dark-foreground);
}

button.accent:hover {
    background: var(--accent-dark-lighter-color);
}

.section {
    background-color:#303040;
    padding-bottom:50px;
}

.section:nth-child(2), .section:nth-child(4), .section:nth-child(6) {
    background-color:#272836;
}

.section {
    border-bottom:4px solid var(--accent-color);
}

.section-title {
    font-size:3.5em;
    font-weight:bold;
    color:white;
    margin-top: 45px;
    position: relative;
    display: inline-block;
}
.section-subtitle {
    font-size:2em;
    font-weight:bold;
    color:white;
    position: relative;
    display: inline-block;
    margin-top:40px;
}
.section-text {
    font-size:2em;
}
.section-paragraph {
    font-size:1.5em;
    max-width: 800px;
    display: inline-block;
}

.section-content {
    text-align: center;
}

a.other-link {
    margin: 50px;
    text-align: center;
    display: inline-flex;
    flex-direction: column;
}
.other-link img {
    width: 200px;
    transition:opacity 0.2s;
    opacity:0.8;
}
a.other-link:hover img {
    opacity:1;
}
.other-link.rounded img {
    border-radius: 100%;
}
.other-link span {
    display: block;
}

img.expandable {
    cursor:pointer;
}
img.expandable:hover {
    -webkit-filter: brightness(1.2);
    -moz-filter: brightness(1.2);
    -ms-filter: brightness(1.2);
    filter: brightness(1.2);
}

@media screen and (min-width: 900px) {
    .horizontal-margin, .section-content {
        width: 70vw;
        margin-left: 15vw;
        height: 100%;
    }

    .feature {
        position: relative;
        width: 100%;
        display: inline-flex;
        align-items: center;
        margin: 50px 20px;
    }
    
    .feature-name {
        font-size:2.5em;
        font-weight: bold;
        padding-bottom: 3px;
        border-bottom: 3px solid var(--accent-color);
        margin-bottom: 15px;
    }
    .feature-year {
        font-size:0.5em;
        font-weight: normal;
    }
    .feature-desc {
        font-size:1.125em;
    }

    .feature > img {
        float:right;
        width:40%;
    }

    .feature-info {
        position: relative;
        width:calc(60% - 50px);
        height: 100%;
    }

    .feature > .feature-info {
        text-align:right;
        margin-right:50px;
    }
    .feature.alt > img {
        float:left;
        width:40%;
    }
    .feature.alt > .feature-info {
        margin-left: 50px;
        margin-right: 0;
        text-align:left;
    }

    .feature .img-before {
        display:none;
    }

    .section-content > img {
        width:70%;
    }

    a.other-link {
        display: inline-block;
    }

    :root {
        --navbar-height: 100px;
    }
}


@media screen and (max-width:1700px) {
    #navbar .horizontal-margin {
        width: 90vw;
        margin-left: 5vw;
        margin-right: 5vw;
    }

    .navbar-button {
        font-size: 1.25em;
        padding: 0 1em 0 1em;
    }

    :root {
        --navbar-height: 100px;
    }
}


@media screen and (max-width:1150px) {
    #navbar .horizontal-margin {
        width: 100vw;
        margin-left: 0;
    }

    .navbar-button {
        font-size: 1.125em;
        padding: 0 1em 0 1em;
    }

    :root {
        --navbar-height: 100px;
    }
}

@media screen and (max-width: 950px) {
    .horizontal-margin, #home > .section-content {
        width: 100vw;
        margin-left: 0;
        height: 100%;
    }

    .section-content {
        width: 90vw;
        margin-left: 5vw;
        margin-right: 5vw;
        height: 100%;
        text-align: center;
    }
    
    #navbar-left {
        position:relative;
        float:none;
        text-align:center;
    }
    #navbar-right {
        position:relative;
        float:none;
        text-align:center;
        display:block;
        justify-content: center;
    }

    #logo-navbar {
        overflow: hidden;
        display: inline-block;
    }

    .navbar-button {
        display: block;
        position: relative;
        height: 70px;
        font-size: 2em;
        padding: 0 1em 0 1em;
        line-height: 70px;
        cursor: pointer;
        box-sizing: border-box;
    }
    #navbar-right {
        overflow: hidden;
        height:0;
        transition: height 0.4s;
    }
    body[data-navbar-expanded='true'] #navbar-right {
        overflow: hidden;
        height: 490px;
    }

    body[data-navbar-expanded='true'] #navbar-hamburger-button::before {
        content:'\2715'
    }
    body[data-navbar-expanded='false'] #navbar-hamburger-button::before {
        content:'\2261'
    }

    #navbar-hamburger-button {
        position: absolute;
        top: 0;
        right: 0;
        width: var(--navbar-height);
        height: var(--navbar-height);
        text-align: center;
        line-height: var(--navbar-height);
        font-size: 1.5em;
    }
    body[data-navbar-expanded='false'] #navbar-hamburger-button {
        font-size: 2em;
    }

    .floating-section-block {
        width: 90%;
        margin: 100px 0 100px 0;
        padding: 5%;
    }


    .logo-large {
        width: 30vw;
        height: 30vw;
        margin-bottom:8px;
    }
    .block-title {
        font-size: 1.5em;
    }
    .block-subtitle {
        font-size: 1em;
        width: 40vw;
    }
    .block-credit {
        font-size: 1em;
    }

    button {
        font-size: 1.5em;
        margin-top: 20px;
    }

    button.small {
        font-size:1em;
    }

    .quick-actions {
        margin-top: 0;
        margin-bottom: 20px;
    }


    .section-title {
        font-size:2.5em;
        margin-top: 30px;
    }
    .section-subtitle {
        font-size:1.5em;
    }
    .section-text {
        font-size:1.5em;
    }


    .feature {
        position: relative;
        width: 100%;
        display: block;
        align-items: center;
        margin: 50px 0;
        text-align:center;
        padding-bottom: 30px;
        border-bottom: 1px solid #bbbbbb;
    }
    
    .feature-name {
        font-size:2em;
        font-weight: bold;
        margin-top:15px;
        margin-bottom:15px;
    }
    .feature-year {
        font-size:0.5em;
        font-weight: normal;
    }
    .feature-desc {
        font-size:1.1em;
    }


    .feature > img {
        position:relative;
        display:block;
        width:100%;
    }

    .feature-info {
        position: relative;
        width: 100%;
    }
    
    .feature .img-after {
        display:none;
    }

    .section-content > img {
        width:100%;
    }
    
    :root {
        --navbar-height: 60px;
    }
    
    #logo-navbar::after {
        font-size:1.5em;
    }
}






#image-viewer-dim {
    position:fixed;
    width:100vw;
    height:100vh;
    background-color:rgba(0,0,0,.7);
    z-index: 1000;
    top:0;
    display: flex;
    align-items: center;
}

#image-viewer-dim.hidden {
    display: none;
}

#image-viewer-img {
    max-width: 90vw;
    display: inline;
    position: relative;
}
#image-viewer-img-wrapper {
    display: inline-block;
    text-align: center;
    width:100%;
}


.image-credit {
    position:absolute;
    right:0;
    bottom:0;
    margin:4px 8px;
    font-size:1em;
    text-shadow: 1px 1px 2px black;
    text-align: right;
}

.skill-list-container {
    display:inline-block;
    margin:0px 64px;
    vertical-align:top;
    list-style-position: inside;
}
    
.skill-list-container ul {
    padding: 0;
}