:root {
    --dark: #293241;
    --darker: #181818;
    --darkest: #0e0e0e;

    --dark-blue: ;

    --lighter-gray: #E0FBFC;
    --blue-gray: #3D5A80;
}

::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

.container {
    width: 85%;
    margin: 0 auto;
}

.mobile, .mobile * {
    display: none;
}




.nav {
    width: 100%;
    background-color: var(--darker);
    

    position: absolute;
    z-index: 1;
}

.nav > ul {
    width: 50%;
    min-width: 400px;
    max-width: 500px;
    margin: 0 0 0 calc(max(20%, 200px) + 1em);
    padding: 0;

    list-style: none;

    display: flex;
    /* justify-content: space-between; */
}

.nav > ul > li:hover, .nav > ul > li.active {
    color: var(--blue-gray);
    transition: .1s;
    cursor: pointer;

    border-bottom: 5px solid var(--blue-gray);
    margin-bottom: 0;
}

.nav > ul > li {
    padding: 0 .5em;

    display: flex;
    align-items: center;

    margin-bottom: 5px;
    line-height: 5rem;

    font-size: 1.5em;
}




.content {
    width: 80%;
    margin: calc(6rem + 5px) 0 0 20%;
}




.side-menu {
    background-color: var(--darker);
    min-width: 200px;
    width: 20%;
    float: left;
    height: calc(100vh - 5rem - 5px);
    margin-top: calc(5rem + 5px);
    position: absolute;
}

.side-menu > ul > li > a {
    display: flex;
    width: 100%;
    height: 100%;
}

.side-menu li {
    line-height: 5rem;
    margin-right: 5px;
}

.side-menu li.side-active {
    transition: .1s ease-in-out;
    margin-right: 0;
    border-right: 5px solid var(--blue-gray);
}




/* .title {
    margin-top: 10%;
} */




.image-animated {
    box-shadow: -10px 7px black;
    transition: 1s;
}

.image-animated:hover {
    transform: translateY(-10px) translateX(10px);
    box-shadow: -20px 17px black;
    transition: 1s;
}




.div-animated {
    z-index: 0;
    padding: 2ch;
    margin-top: 10%;
    border-radius: 20px;
    transition: .5s;
    background-color: var(--dark);
}
.div-animated:first-child {
    margin-top: 15%;
}

.div-animated:hover {
    transform: scale(1.1);
    transition: .5s;
    background-color: #1e2530;
}

.div-animated.no-margin {
    margin-top: 0;
}





.image-block {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: space-between;
}

.image-block > div.image {
    width: 40%;
}

.image-block > div.text {
    width: 55%;
}




.socials {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.socials * {
    transition: .5s;
}

.socials *:hover {
    transition: .5s;
    transform: scale(1.1);
}

.socials > a {
    height: 50px;
    margin: 10px;
}

.socials > a > img {
    height: 100%;
    color: white;
}




.nav-links {
    height: 100%;
}

.nav-links > ul {
    list-style: none;
    padding: 0;
}

.nav-links > ul > li {
    transition: .5s;
    margin: 10px 0;
}

.nav-links > ul > li:hover {
    color: var(--blue-gray);
    transform: scale(1.1);
    transition: .5s;
}




.icon-block {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
}

.icon-block > img {
    padding-right: 10px;
    height: 80%;
}




/* contact.html */

.div-form {
    width: 40%;
    margin: 0 auto;
    /* border: 1px solid white; */

    text-align: center;

    font-size: 1.2rem;
}

.div-form > form > input, textarea, button {
    font-size: 1.1rem;
}

.div-form > form > button {
    padding: 1ch 3ch;
    background-color: green;
    border: none;
}

.div-form > form > input, .div-form > form > textarea {
    width: 100%;
}

.div-form > form > #message {
    width: 100%;
    resize: vertical;
}




/* portfolio.html */

.cards > .card {
    width: 30%;
    padding: 30px;
    margin: 10px;

    border-radius: 20px;
}

.card {
    cursor: pointer;
    min-width: 300px;
}

.card:hover {
    background-color: #23282F;
}




.panel.collapsed {
    transition: .5s;
    max-height: 50vh;
    overflow-y: hidden;
}
.panel.collapsed::after {
    content  : "";
    position : absolute;
    z-index  : 1;
    bottom   : 0;
    left     : 0;
    pointer-events   : none;
    background-image : linear-gradient(to bottom, 
                      rgba(255,255,255, 0), 
                      rgba(41, 50, 65, 1) 90%);
    width    : 100%;
    height   : 8em;
}

.panel.expanded {
    transition: .5s;
    max-height: unset;
}
.panel.expanded::after {
    background-image: none;
}