.portfolio-card {
    border: 1.5px solid rgba(199, 199, 199, 0.5);
    border-top: none;
    border-right: none;
    border-radius: 25px;
    background-image: linear-gradient(to top, rgba(24, 24, 24, 100%) 25%, rgba(145, 145, 145, 0.1) 100%);
    backdrop-filter: blur(8px);

    min-height: 26vw;
    max-height: 26vw;
    min-width: 21vw;
    max-width: 21vw;
    
    display: inline-block;
    margin-bottom: 15px;
    margin-top: 15px;
    text-align: center;

    padding: 15px;

    transition: transform 0.15s ease-out;
}
.portfolio-card:hover {transform: scale(1.025);}
.portfolio-card img {border-radius: 25px; overflow-x: scroll;}
.square {width: 100%;}
.landscape {height: 100%;}
.portrait {height: 97%;}
_::-webkit-full-page-media, _:future, :root .landscape {
    height: 97%;
}
.pf-image-container {
    width: 100%;
    height: 83%;
    border-radius: 25px;

    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-color: rgba(133, 133, 133, 0.5) transparent;
}
.portfolio-paragraph {
    padding: 1%;
    background-color: rgba(199, 199, 199, 0.15);
    backdrop-filter: blur(8px);
    max-height: 15%;

    overflow-y: scroll;
    scrollbar-width: none;

    border: 1.5px solid rgba(199, 199, 199, 0.5);
    border-top: none;
    border-right: none;
    border-radius: 25px;
}
.portfolio-paragraph p {
    font-size: 16px;
    font-weight: lighter;
}
.pf-audio-card {
    border: 1.5px solid rgba(199, 199, 199, 0.5);
    border-top: none;
    border-right: none;
    border-radius: 25px;
    background-image: linear-gradient(to top, rgba(24, 24, 24, 100%) 25%, rgba(145, 145, 145, 0.1) 100%);
    backdrop-filter: blur(8px);

    min-height: 13vw;
    max-height: 13vw;
    min-width: 21vw;
    max-width: 21vw;
    
    display: inline-block;
    margin-bottom: 15px;
    margin-top: 15px;
    text-align: center;

    padding: 15px;

    transition: transform 0.15s ease-out;
}
.pf-audio-para {
    padding: 1%;
    background-color: rgba(199, 199, 199, 0.15);
    backdrop-filter: blur(8px);
    max-height: 30%;
    min-height: 30%;
    margin-top: 5%;

    overflow-y: scroll;
    scrollbar-width: none;

    border: 1.5px solid rgba(199, 199, 199, 0.5);
    border-top: none;
    border-right: none;
    border-radius: 25px;
}
.pf-audio-para p {
    font-size: 16px;
    font-weight: lighter;
}
.pf-audio-card audio {
    margin-top: 10px;
    width: 92%;
}
.audio-icon {
    position: absolute;
    top: 5%;
    left: 2.5%;
}

.portfolio-box {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: auto auto auto auto;

    max-height: 750px;
    
    overflow-y: scroll;
    scrollbar-color: rgba(133, 133, 133, 0.5) transparent;
}

.censored {filter: blur(32px); transition: filter 0.15s ease-in-out;}
.censored:hover {filter: none;}

.censored-icon {
    position: relative;
    font-size: 60px;
    top: -50%;

    z-index: 3;
    transition: opacity 0.15s ease-in-out;
    color: whitesmoke;
}

.censored:hover + .censored-icon {opacity: 0; pointer-events: none;}

.toc {
    max-width: 0px;
    border-left: 10px solid gray;
    border-right: 5px solid gray;
    border-radius: 10px;
    overflow-x: hidden;
    background-color: rgba(133, 133, 133, 0.5);
    backdrop-filter: blur(8px);

    transition: all 0.35s ease-in-out;
    white-space: nowrap;
    
    position: fixed;
    z-index: 20;
    top: 195px;

    opacity: 0.5;
}

.toc:hover {
    max-width: 150px;
    padding-left: 15px;
    padding-right: 25px;
    border-right: 5px solid whitesmoke;
    letter-spacing: 4px;
    opacity: 1;
}

.toc p {font-size: 24px;}
.toc a {color: whitesmoke;}
.toc i {font-size: 18px;}

.main-box {
    width: 97%;
    margin-right: -10px;
}