@media screen and (max-width:825px) {

.expandable {
    --xy-padding: 14px;
    --border-radius: 6px

    
    max-width: 500px;
    font-size: 2em;
    font-family: 'Inter',sans-serif;

    
    text-shadow: -1px -1px 0 purple, 1px -1px 0 purple, -1px 1px 0 purple, 1px 1px 0 purple;
    
}


.expandable--open .expandable__content-wrapper{
    grid-template-rows: 1fr;
}


.expandable__title-bar
{
    justify-content: center;
    display: flex;
    align-items: center;
    user-select: none;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    cursor: pointer; 
    background-color: rgb(22, 0, 21);
    width:100vw;
    height: 10vh;
}
.expandable__title-bar:hover
{
    color:green
}

.expandable__content
{
    padding: 0 0;
    line-height: 1.4;
    color: black;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    overflow: hidden;
    list-style: none;
    z-index: 1; 
    background-color: rgb(23, 23, 23);
    
}


.expandable__content-wrapper
{
    display: grid;
    
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
    background-color: rgb(22, 0, 21);
}

.internal-expandable {
    --xy-padding: 14px;
    --border-radius: 6px

    max-width: 500px;
    font-family: 'Inter',sans-serif;
    
}

.internal-expandable--open .internal-expandable__content-wrapper{
    grid-template-rows: 1fr;
}

.internal-expandable--open .internal__icon {
    transform: rotate(-90deg);
}

.internal-expandable__title-bar
{
    display: flex;
    align-items: center;
    user-select: none;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    color: white;
    cursor: pointer; 
}
.internal-expandable__title-bar:hover
{
    color:green;
    border-bottom: 5px solid;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(255, 132, 132) rgba(0, 0, 0, 0);
}

.internal-expandable__content
{
    padding: 0 0;
    line-height: 1.4;
    color: black;
    border-radius: 0 0  var(--border-radius) var(--border-radius);
    overflow: hidden;
    list-style: none;
    z-index: 1; 
    padding-left: 40px;
}

.internal-expandable__content-wrapper
{
    display: grid;
    
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
}

.list
{
    display: flex;
    padding: 5px 5px;
    justify-content: space-between;
    padding-right: 10%;    
}

.list-items a
{
    color: white;
    font-family: sans-serif;
    transition: 0.4s;

}

.list-items a:hover
{
    color:green;
    border-bottom: 5px solid;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) purple rgba(0, 0, 0, 0);
}

}

@media screen and (min-width:825px) {

    .expandable {
        --xy-padding: 14px;
        --border-radius: 6px
        height: 100px;
        margin-left: auto;
        margin-right: auto;
        max-width: 800px;
        font-size: 1.25em;
        font-family: 'Inter',sans-serif;
        text-shadow: -1px -1px 0 purple, 1px -1px 0 purple, -1px 1px 0 purple, 1px 1px 0 purple;
    }
    
    .expandable__content-wrapper
    {
        height: 100px;
    }

    .expandable--open .expandable__content-wrapper{
        grid-template-rows: 1fr;
    }
    
    .expandable--open .expandable__icon {
        transform: rotate(-90deg);
        
    }
    
    .expandable__title-bar
    {
        margin-top:-20px;
        display: flex;
        align-items: center;
        user-select: none;
        border-radius: var(--border-radius) var(--border-radius) 0 0;
        color: white;
        cursor: pointer; 
    }
    .expandable__title-bar:hover
    {
        color:green
    }

    .expandable__icon
    {
        display: none;
    }
    
    .expandable__content
    {
        height: 100px;
        display: flex;
        margin-left: 5%;
        margin-right: 5%;
        padding: 2.5%;
        justify-content: space-between;
        align-items: center;
    }
    
    .internal-expandable {
        --xy-padding: 14px;
        --border-radius: 6px

        max-width: 500px;

        padding: 0 10px;
        /*font-size: 1.25em;*/
        font-family: 'Inter',sans-serif;
        transition-property: border;
        transition-duration: .3s;
        transform: translate3d(0px, 3px, 0px);
    }

    .internal-expandable--open{
        transform: translate3d(0px, 166.75px, 0px);
    }
    
    
    .internal-expandable--open .internal-expandable__content-wrapper{
        grid-template-rows: 1fr;
        align-items: center;
    }
    
    .internal-expandable--open .internal__icon {
        transform: rotate(-90deg);
    }
    
    .internal-expandable__title-bar
    {
        display: flex;
        align-items: center;
        user-select: none;
        border-radius: var(--border-radius) var(--border-radius) 0 0;
        color: white;
        cursor: pointer; 
        border-bottom: 5px solid;
        border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);

        padding: 10px 10px;
    }
    .internal-expandable__title-bar:hover
    {
        text-decoration: underline;
        text-shadow: 0px 0px 0 purple;
        color:purple;
        border-bottom: 5px solid;
        border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) purple rgba(0, 0, 0, 0);
    }
    
    .internal-expandable__content
    {
        padding: 0 0;
        line-height: 2.5;
        font-size: 0.9em;
        color: black;
        border-radius: 0 0  var(--border-radius) var(--border-radius);
        overflow: hidden;
        list-style: none;
        z-index: 1; 
        
    }
    
    .internal-expandable__content-wrapper
    {
        display: grid;
        
        grid-template-rows: 0fr;
        /*transition: grid-template-rows 0.3s ease-in;*/
    }

    
    .list
    {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .list-items a
    {
    color: white;
    font-family: sans-serif;
    transition: 0.4s;
    display: flex;
    align-items: center;
    padding: 10px 10px;
    cursor: pointer; 
    transition-property: border;
    transition-duration: .3s;
    border-bottom: 0px solid;
    }

    .list-items a:hover
    {
        text-decoration: underline;
        text-shadow: 0px 0px 0 purple;
        color:purple;
        border-bottom: 5px solid;
        border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) purple rgba(0, 0, 0, 0);
    }
}

.portfolio_list{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.portfolio_list-items a{
color: white;
font-family: sans-serif;
font-size: 0.9em;
transition: 0.4s;
display: flex;
align-items: center;
padding: 10px 10px;
background-color: rgb(23, 23, 23);
border-bottom: 5px solid;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) purple rgba(0, 0, 0, 0);
}

.portfolio_list-items a:hover{
    text-decoration: underline;
    text-shadow: 0px 0px 0 purple;
    color:purple;
}