.work_popup .popup .popup_element p {
    position:relative;
    width:100%;
    color:white;
    height:auto;
    display:block;
}

.work_popup .popup .popup_element iframe {
    position:relative;
    width:100%;
    height:auto;
    min-height:500px;
    display:block;
}

.work_popup .popup .popup_element img {
    position:relative;
    width:100%;
    height:auto;
    display:block;
}

.work_popup .popup .popup_element {
    position:relative;
    width:100%;
    height:auto;
    margin-bottom:100px;
    display: block;
}

.work_popup .popup {
    width:50%;
    height:auto;
    margin:0 auto;
    display:block;
    padding-bottom:200px;

}

.work_popup {
    position:fixed;
    width:101%;
    height: 101%;
    left:-1%;
    overflow-y: auto;
    top:-1%;
    padding-top:10%;
    z-index:100;
    background-color: rgba(0, 0, 0, 0.521);
}

.resource-content {
    text-indent:1rem;
}

.resource-container span {
    margin-bottom:10px;
    display:block;
}

.resource-container {
    position:relative;
    text-decoration: underline;
    font-size:12px;
    padding:10px;
    
}

/* article_base */
hr {
    background: lightgray;
    height: 1px;
    border: none;
    margin-left:8px;
    margin-right:8px;
}


.root#article {
    margin-left: 6rem;
    margin-top:calc(0.5rem + 85px);
    border-left: 1px solid #D3D3D3;
    z-index: 5!important;
}

.article-controls {
    display:flex;
    justify-content:space-between;
    cursor:pointer;
    padding-left:0.5rem;
    z-index:5!important;
}

.article-controls .year {
    text-decoration: underline;
    width:75%;
}

.search {
    position:relative;
    right:16px;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    }
 .search input {
    font-family: 'Times New Roman';
    position:absolute;
    right:16px;

}


.articles-container {
    display: grid;
    gap:1rem;
    grid-auto-flow:row;
    grid-template-columns:repeat(1,minmax(0,1fr));
    padding-left:1rem;
    overflow:auto;
    display:none;
}

.articles-container.is-opening {
    animation: opening 150ms ease-in-out;
}

.articles-container .article {
    display:flex;
}

.articles-container .article .image {
    height:213.75px;
    object-fit: fill;
    cursor:pointer;
    width:380px;
}

.articles-container .article .details time {
    font-size:1vmax;

}

.articles-container .article .details h1 {
    font-size: 1.1vmax;
    margin-top:0.6rem;
    margin-bottom:0.5rem;
}

.articles-container .article .details a {
    color:black;
    text-decoration: none;
    font-size: 0.8vmax;
    margin-top:0;
    cursor:pointer;
}


@keyframes opening {
    0% {
        transform: scaleY(0);
    }

    100% {
        transform: scaleY(1);
    }
}

/* base */

@font-face {
    font-family: 'Braille Normal';
    src: url('../font/BRAILLE1.ttf');
}

.nav.nav#contact {
    background-image:url(../images/yncolors.png);
    background-repeat: no-repeat;
    justify-content: end;
    background-size: cover;
    z-index: -1;
} 

nav.nav {
    display: flex;
    z-index: 0!important;
    flex-direction: column;
}
nav.nav.bottom-left {
    position: fixed;
    padding: calc(8px * 3);
    bottom: 0;
    left: 0;
    font-size:12px;
    z-index:1!important;
    max-width:3rem;
}

nav.nav > * {
    color: black;
    max-width:100px;
}

nav.nav > *:not(:last-child) {
    margin-bottom: 8px;
}

#ascii {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.70vmax;
    margin-left:45%;
    transform: translateX(-45%);
    min-height:650px;
}

#ascii.page {
    font-size: 0.15vmax;
    margin: 0; 
    transform:translateX(-35px);
    min-height:85px;
    position:fixed;
    top:5px;
    left:0;

}

.root#contact {
    position:relative;
    display:block;
    margin-left: 4rem;
    padding-top: 4rem;
    border-left:none;
}

.root#page {
    margin-left: 8rem;
    margin-top: 85px;
    border-left:none;
}

a.younite-top {
    color: black;
    position: absolute;
    top: calc(8px *3);
    right: calc(8px * 3);
}

.details {
    padding:20px;
}

details > summary {
    list-style:none;
}

/* gradient     background: linear-gradient(
        to right bottom,
        colors.$gradient_start,
        colors.$gradient_end
    ); 
    
    
    $gradient_start: #FC4A05;
$gradient_end: #AA026A;*/

/* about */


/* contact */


p#random-chars {
    text-align: right;
    padding-right: 4rem;
}

.right-hand {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.right-hand .vertical-braille {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 2.5vmax;
    font-family: 'Braille Normal';
}

nav.nav {
    width: 1220px;
    height: 250px;

    justify-content: end;
}

/* resources */

p.underline:not(:first-of-type) {
    text-indent:15px;
}

p.underline {
    margin-bottom:0;
    text-decoration: underline;
}

ul.dot2bar {
    list-style:none;
    margin-left:1em;
    margin-top:4px;
} 
ul.dot2bar li {
    border-left:1px solid #000;
    display:inline;
    padding-left:4px;
}

body#page {
    padding:0;
}


/* index */
body {
    padding: 3rem 5rem;
    font-size:12px!important;
}
body::-webkit-scrollbar {
    width:0!important;
}


.front {
    padding-top:0;
    text-align: right!important;
    padding-right:0;
}

section#intro {
    padding-top:20rem;
    text-align: right;
    padding-right:7rem;
}

section h1 {
    font-size: 2vmax;
    margin-bottom: 0;
    font-family: 'Braille Normal';
}

section p#random-chars {
    font-size: 1vmax;
    margin-top: 0.25rem;

}



@media (min-width:1024px) {
    .articles-container {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media (max-width:750px) {

    .popup_element img {
        height:200px!important;
    }
    .work_popup .popup {
        width:80%;
    }

    .root#page {
        position:relative;
        top:4rem;
    }

    .search {
        margin-bottom:1rem;
        margin-left:0.5rem;
    }

    .search input {
        position:relative!important;
        left:16px;

    }
    
    .root#article {
        margin-top:4rem;
    }
    .intro2 {
        left:-3.5rem!important;
        margin-left:1.5rem!important;
        position:absolute;
        margin-top:2rem;
        transform: translateX(0)!important;
    }

    #ascii:not(.intro2) {
        left:-1.5rem!important;
        margin-left:1.5rem!important;
        position:absolute;
        margin-top:2rem;
        transform: translateX(0)!important;
    }


    
    #ascii.page {
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
        font-size:0.205vmax!important;
        right:25px;
    }

    .articles-container {
        display:block;
    }

    .article-controls {
        display:block;
    }

    .random-chars {
        position:absolute;
        top:45%;
        font-size:3vmax!important;
        left:65%;
        transform: translate(-50%,-50%);
    }
    section#intro {
        padding-top:2rem;
        text-align: right;
        padding-right:7rem;
        transform:rotate(90);
        padding-bottom:5rem;
    }        
    .articles-container .article .image {
        height:6rem;
        object-fit: cover;
        width:60%;
    }
    .articles-container .article {
        margin-bottom:0.5rem;
    }

    .articles-container .article .details time {
        margin-left:0.5rem;
        font-size:1vmax;
    
    }
    
    .articles-container .article .details h1 {
        font-size: 1.1vmax;
        margin-left:0.5rem;
        margin-top:0.3rem;
        margin-bottom:0;
    }
    
    .articles-container .article .details a {
        color:black;
        text-decoration: none;
        font-size: 0.8vmax;
        margin-left:0.5rem;
        margin-top:0;
    }}