@font-face {
    font-family: VGA;
    src: url(/res/Perfect\ DOS\ VGA\ 437.ttf);
}


/*
font-size: calc(2px + 0.8vw); !!!!!
**/
/* font-size: clamp(8px, 2px + 1vw, 18px); */
/* font-size: clamp(2px, 2px + 1vw, 18px); */
/* og     font-size: 1vw; */
html    {
    background-color: black;
    color: #A8A8A8;
    font-family: 'VGA', monospace;
    font-size: clamp(16px, 15px + 0.390625vw, 24px);


}
body    {
    margin: 0;
}
pre {
    font-family: 'VGA', monospace;
    width: fit-content;
    font-size: clamp(2px, 2px + 1vw, 18px);
    margin: auto;
    color: #FCFCFC;
}
a   {
    color: #FCFCFC;
}
b   {
    color: #FCFCFC;
}
img {
    max-width: 1440px;
    margin: 1.5rem auto 0.75rem;
    display: block;
    width: 100%;
    object-fit: contain;
    max-height: 70vh;
}
video   {
    max-width: 1440px;
    margin: 1.5rem auto 0.75rem;
    display: block;
    width: 100%;
    object-fit: contain;
    max-height: 70vh;
}
a p {
    text-decoration: none;
}
p   {
    margin: 0;
    line-height: 130%;
}
h1 {
    max-width: 1440px;
    line-height: 130%;
}
h2  {
    color: #FCFCFC;
    margin: 2rem auto 1rem auto;
    max-width: 40rem;
    width: 100%;
    line-height: 130%;
}
h3  {
    color: #FCFCFC;
    margin: 1.5rem auto 0.75rem auto;
    max-width: 40rem;
    width: 100%;
    line-height: 130%;
}
ol  {
    line-height: 130%;
    max-width: 40rem;
    margin: 0 auto 1rem;
    list-style-position: outside;
    padding-left: 4rem;
}
ul  {
    line-height: 130%;
    max-width: 38rem;
    margin: 0 auto 1rem;
    padding-left: 0;
    width: 100%;
}
li  {
    margin-bottom: 0.3rem;
}
p.text   {
    margin-top: 1.5rem;
}
.con    {
    margin: 0 clamp(1rem ,8px + 1.5625vw, 6.25rem);
    display: flex;
    flex-direction: column;
}
.nav    {
    text-align: center;
    margin: 3.125rem 0;
}
.headline   {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: center;
}
.h2 {
    font-size: clamp(2px, 2px + 0.85vw, 15px);
    margin: auto 1.25vw;
}
.p-info {
    max-width: 25rem;
    display: flex;
    margin: auto;
    margin-top: 24px;
    justify-content: center ;
}
.p-info-link    {
    margin-left: auto;
    display: inline-flex;
    min-width: max-content;
    margin: auto 0 auto 1.5rem;
}
.p-info-link a  {
    margin-left: 24px;
}
.project    {
    margin-bottom: 2rem;
}
a.project-thumb  {
    margin: 1.5rem auto 0.75rem;
    display: block;
    max-width: 1440px;
}


/* .info   {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 48rem;
    margin-bottom: 3rem;
}
.c1 {
    grid-column: 1 / 2;
}
.c2 {
    grid-column: 2 / 4;
} */
.info   {
    display: flex;
    max-width: 40rem;
    margin: 0 auto 1rem auto;
}
.c1 {
    min-width: 30%;

}
.c2 {
    max-width: 56ch;
}


.desc   {
    width: 100%;
    max-width: 40rem;
    margin: 0rem auto 1rem auto;
}

/* .about-info {
    display: flex;
    max-width: 65ch;
    margin-bottom: 1rem;
}
.ai-headline    {
    width: 45%;
} */
.about-p    {
    max-width: 40rem;
    margin: 0 auto 3rem auto;
}
.ai-flex    {
    margin-bottom: 3rem;
}

.ai-wrapper {
    max-width: 40rem;
    margin: 0 auto 1rem auto;
    display: flex;
    width: 100%;
}
.ai-headline    {
    min-width: 45%;
}
.about-info {
    min-width: 55%;
}
.footer {
    margin: 3rem auto;
    line-height: 130%;
    text-align: center;
}
@media screen and (max-width:768px) {
    ol  {
        padding-left: 2rem;
    }
    .info   {
        display: block;
        max-width: 40rem;
    }
    .c1{
        margin-bottom: 0.5rem;
    }
    .c2 {
        max-width: 40rem;
    }
    .ai-wrapper {
        display: block;
    }
    .ai-headline    {
        margin-bottom: 0.5rem;
    }
    .about-info {
        max-width: 65ch;
    }
}