#portfolio hr{
    margin: 0;
}
#portfolio{
    color: #95ff21;
    text-shadow: 0 0 10px #95ff21;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 16pt; 
    font-weight: 400;

    overflow: hidden;
    padding-bottom: 64px;
}

#portfolio h1{
    font-weight: 400;
    font-size: 30pt; 
    text-indent: 13%;
    margin: 26pt 0 10pt 0;
}
#portfolio h2{
    font-size: 20pt; 
}

#portfolio h1::before{
    content:"→";
    padding-right: 20px;
}


.image_list{
    text-shadow: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    list-style-type: none;
    
    background:linear-gradient(to left, #2f2c4f50, #2f2c4f12);
    
    outline: 5px solid #2f2c4f50;
    outline-offset: -5px;
}
.image_list li{
    /*overflow: hidden;*/
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    background-color: #1b1a28;
}
.image_list li>div{
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

#portfolio .preview{
    object-fit: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    user-select: none;
}





#portfolio .tech_icon
{
    object-fit: contain;
    position: absolute;
    user-select: none;
    border-radius: 8.5pt;
    width: 13%;
    height: 13%;
    top: 2%;
    right: 2%;
    /*box-shadow: #00000090 0px 1pt 6pt;*/
}
#portfolio .portfolio_description:hover .tech_icon
{
    width: 13%;
    height: 13%;
    transition: all 0.2s;
}
#portfolio .portfolio_description:hover .tech_icon
{
    width: 17%;
    height: 17%;
    transition: all 0.2s;
}
#portfolio .project>.tech_icon
{
    z-index: 95;
    width: 13%;
    height: 13%;
    opacity: 0.5;
    /*box-shadow: #00000090 0px 1pt 6pt;*/
}
#portfolio .portfolio_description>.tech_icon
{
    z-index: 130;
}

#portfolio .stars_bar::after{
    content: ' ';
    display: inline-block;
    width: 16pt;
    height: 16pt;
    background-image: url("../svgs/GitHubStar.svg");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle; 
    margin-left: 2px;
    margin-bottom: 5px;
}

#portfolio .stars_bar
{
    display: block;
    object-fit: contain;
    position: absolute;
    user-select: none;
    font-size: 16pt;
    top: 17%;
    right: 2%;
    left: auto;
    min-width: 13%;
    text-align: right;

    color: gold;
    font-weight: 700;
    text-shadow:
        0 2px 1px #945104,
        2px 0 1px #945104,
        0 -2px 1px #945104,
        -2px 0 1px #945104;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
#portfolio .project>.stars_bar
{
    z-index: 95;
}
#portfolio .portfolio_description>.stars_bar
{
    z-index: 130;
}



/*.image_list li>div>img,
.portfolio_description>img
{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}*/

.image_list li video{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

#portfolio .image_list .open_button
{
    border-radius: 8px;
    width: 32px;
    height: 32px;
    position: absolute;
    bottom: 5px;
    right: 3px;
    display: block;
    padding: 3px;
    box-shadow: #2d4094  0px 3px;

    background-color: #528ac5;
    background-image: url("../images/OpenWith.png");
    background-position: center;
    background-size: 32px;
    background-repeat: no-repeat;
}

.portfolio_description{
    z-index: 100;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 35px #4aaeff80;
    background-color: #1b1a28;
    contain:none;

    width: 100%;
    height: 100%;
    transition: all 0.2s;
}
.portfolio_description:hover{
    width: 103%;
    height: 103%;
    transition: all 0.2s;
}
.portfolio_description p{
    text-align: center;
    text-shadow: none;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
.portfolio_description .text,
.portfolio_description .title{
    left: 50%;
    transform: translate(-50%, 0);
    position: absolute;
    width: min(250px, calc(100% - 30px));
}
.portfolio_description .text{
    bottom: 5%;
    font-size: 14pt;
    font-weight: 700;
    text-shadow:inherit;
}
.portfolio_description .title{
    top: 5%;
    font-size: 20pt;
    font-weight: bold;
    text-shadow:inherit;
}

.pixelated{
    image-rendering: pixelated;
}



#catanim{
    position: relative;
    z-index: 10;
    top: -46px;
    left: 10%;
}
#catanim.hidden{
    display: none;
}
#portfolio .catanim{
    position: relative;
    transform: scale(4);
    top: -13px;
    left: 10%;
}
#portfolio .catanim_base{
    position: absolute;
    z-index: 10;
    width: 100%;
}


.portfolio_description.hidden .links_block{
    top: 0%;
    transition: top 0.25s;
}
.portfolio_description .links_block{
    z-index: -1;
    height: auto;
    position: absolute;
    left: 50%;
    background-color: #1b1a28;
    transform: translate(-50%, 0%);

    top: 100%;
    transition: top 0.25s;

    width: calc(100% - 30px);
    padding: 10px;
    border-radius: 0 0 15px 15px;
}
.portfolio_description .links_block a,
.portfolio_description .links_block a:visited{
    color: #528ac5 !important;
    display: block;
    line-height: 38px;
    height: 38px;
}
.portfolio_description .links_block a>p,
.portfolio_description .links_block a:visited>p{
    display: inline-block;
    transform: translate(0%, -50%);
    top: 25%;
    position: relative;
    white-space:nowrap;
    text-decoration:underline;
}
.portfolio_description .links_block img{
    height: 32px;
    display: inline-block;
    margin-right: 8px;
}
.portfolio_description .links_block>div{
    text-align: center;
}


.image_list li .default,
.image_list li .default a:visited{
    color: #528ac5;
    text-shadow: none;
}
.image_list li .project,
.image_list li .project a:visited{
    color: white;
    text-shadow: 
        0 0 6px black,
        0 0 6px black,
        1px -1px 1px #2f2c4f,
        1px 1px 1px #2f2c4f,
        -1px 1px 1px #2f2c4f,
        -1px -1px 1px #2f2c4f;
}
.image_list li .showcase_project{
    z-index: 1;
}
.image_list li .showcase_project::before,
.image_list li .showcase_project::after,
.image_list li .showcase_project .portfolio_description::before,
.image_list li .showcase_project .portfolio_description::after{
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 2px;
    box-sizing: border-box;
    pointer-events: none;
    -webkit-mask: 
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 1;
    transition: inset 0.2s, padding 0.2s, filter 0.2s;
}
.image_list li .showcase_project::before,
.image_list li .showcase_project .portfolio_description::before{
    background: rgba(74, 69, 116, 0.55);
}
.image_list li .showcase_project::after,
.image_list li .showcase_project .portfolio_description::after{
    background: linear-gradient(25deg, #efd678 0%, #efd678 12%, rgba(232, 154, 105, 0.48) 26%, rgba(224, 105, 96, 0) 40%, rgba(224, 105, 96, 0) 60%, rgba(232, 154, 105, 0.48) 74%, #efd678 88%, #efd678 100%);
}
.image_list li .showcase_project::before{
    z-index: 89;
}
.image_list li .showcase_project::after{
    z-index: 90;
}
.image_list li .showcase_project .portfolio_description{
    box-shadow: 0 0 35px #4aaeff80;
    transition: width 0.2s, height 0.2s, box-shadow 0.2s;
}
.image_list li .showcase_project .portfolio_description::after{
    z-index: 115;
}
.image_list li .showcase_project .portfolio_description::before{
    z-index: 114;
}
.image_list li .showcase_project:hover::before,
.image_list li .showcase_project:hover::after,
.image_list li .showcase_project .portfolio_description:hover::before,
.image_list li .showcase_project .portfolio_description:hover::after{
    inset: 0;
    padding: 3px;
    filter: brightness(1.08);
}
.image_list li .dark,
.image_list li .dark a:visited{
    color: #000d !important;
    text-shadow: none;
}


.image_list li .dark .portfolio_description .links_block a,
.image_list li .dark .portfolio_description .links_block a:visited,
.dark a,
.dark a:visited,
.image_list li .dark .portfolio_description a,
.image_list li .dark .portfolio_description a:visited{
    text-shadow: none;
    color: #000d !important;
}

@media (max-width: 760px)
{
    #portfolio{
        font-size: 13pt;
    }
    #portfolio h1{
        font-size: 24pt;
        text-indent: 18px;
    }
    #portfolio h1::before{
        padding-right: 10px;
    }
    .image_list{
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }
    .portfolio_description .title{
        font-size: 16pt;
    }
    .portfolio_description .text{
        font-size: 11.5pt;
    }
    .portfolio_description .links_block{
        width: calc(100% - 18px);
        padding: 8px;
    }
    .portfolio_description .links_block a,
    .portfolio_description .links_block a:visited{
        line-height: 32px;
        height: 32px;
    }
    .portfolio_description .links_block img{
        height: 26px;
    }
}

@media (max-width: 430px)
{
    .image_list{
        grid-template-columns: 1fr;
    }
}

@media (orientation: portrait)
{
    .image_list{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .portfolio_description .title,
    .portfolio_description .text{
        width: calc(100% - 10px);
    }
    .portfolio_description .title{
        font-size: clamp(8pt, 3.4vw, 16pt);
        top: 7%;
    }
    .portfolio_description .text{
        font-size: clamp(7pt, 2.5vw, 11.5pt);
        bottom: 6%;
    }
    #portfolio .stars_bar{
        font-size: clamp(8pt, 3vw, 14pt);
    }
    #portfolio .stars_bar::after{
        width: clamp(10pt, 3vw, 14pt);
        height: clamp(10pt, 3vw, 14pt);
        margin-bottom: 2px;
    }
    .portfolio_description .links_block{
        width: calc(100% - 10px);
        padding: 5px;
    }
    .portfolio_description .links_block a,
    .portfolio_description .links_block a:visited{
        height: 26px;
        line-height: 26px;
    }
    .portfolio_description .links_block img{
        height: 20px;
        margin-right: 4px;
    }
    .portfolio_description .links_block a>p,
    .portfolio_description .links_block a:visited>p{
        font-size: clamp(7pt, 2.5vw, 11pt);
    }
    #portfolio .image_list .open_button{
        width: 24px;
        height: 24px;
        background-size: 24px;
    }
}