@font-face {
    font-family: Inter;
    src: url(Inter-Regular.woff2);
}

body {
    font-family: Inter, sans-serif;
    padding: 10px;
    margin: 0;
    background-image: radial-gradient(rgba(0,0,0,0.1) 1px, transparent 0);
    background-size: 20px 20px;
    background-attachment: fixed;
    box-sizing: border-box;
}

::selection {
    background-color: blue;
    color: white;
}

a {
    color: inherit; text-decoration: dotted underline;
}
a:hover {
    background-color: blue;
    color: white;
}

img {
    object-fit: cover;
}

ul {
    padding: 0;
    padding-bottom: 1em;
    list-style: none;
    font-size: 10pt;
    margin: 0;
}

.alt-list > li::before {
    content: "";
    padding-right: 0;
}

li::before {
    content: "»";
    padding-right: 1em;
}

p {
    font-size: 10pt;
    margin: 0;
    padding: 0;
    padding-bottom: 1em;
}

h1 {
    font-size: 10pt;
    margin: 0;
    padding: 0;
    font-weight: 400;
    padding-bottom: 1em;
}

h2 {
    font-size: 10pt;
    margin: 0;
    padding: 0;
    font-weight: 400;
    padding-bottom: 1em;
}

h3 {
    font-size: 10pt;
    margin: 0;
    padding: 0;
    font-weight: 400;
    hanging-punctuation: first last;
}

span {
    font-size: 10pt;
}

h3 {
    font-size: 10pt;
    font-weight: normal;
}

.tabbed {
    padding-left: 2em;
}

.digits {
    width: 2em;
    display: inline-block;
    grid-area: 1 / 1 / 2 / 2;
}

.info {
    width: 100%;
    display: grid; 
    grid-template-columns: 4em 50% auto;
    padding-bottom: 5px;
}

.images {
    flex-basis: 1000px;
    float: right;
    display: grid;
    gap: 10px;
    flex-shrink: 1;
    align-self: flex-end;
}

.images > img {
    height: 100%;
    width: 100%;
}

.info_left {
    grid-area: 1 / 2 / 2 / 3;
    /* background-color: pink; */
}

.info_right {
    grid-area: 1 / 3 / 2 / 4;
    /* background-color: blue; */
    padding-right: 10px;
}

header {
    width: 310px;
    position: fixed;
    background-image: radial-gradient(rgba(0,0,0,0.1) 1px, transparent 0);
    background-color: white;
    background-size: 20px 20px;
    background-position: 10px 10px;
    padding: 20px;
    left: -10px;
    top: -10px;
    text-align: justify;
}

#footer {
    position: fixed;
    left: -25px; bottom: -25px;
}

#smiley {
    animation: rotation 5s infinite linear;
}

@keyframes rotation {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.project {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
}

.project:last-child {
    margin-bottom: 0px;
}

.left {
    width: 400px;
	padding-right: 20px;
    float: left;
    height: 100%; 
    align-self: flex-end;
    color: gray;
    flex-shrink: 0;
}

.mid {
    flex-shrink: 5;
    flex-grow: 1;
}

.right {
    flex-basis: 1000px;
    float: right;
    display: grid;
    gap: 10px;
    flex-shrink: 1;
    align-self: flex-end;
}

.right > img {
    height: 100%;
    width: 100%;
}

img {
    width: 100%;
}

video {
    width: 100%;
}

.span_two {
    grid-column: span 2;
}

@media all and (orientation: portrait), (max-width: 900px){

    p {
        font-size: 16pt;
    }

    span {
        font-size: 16pt;
    }

    h1 {
        font-size: 16pt;
    }

    h2 {
        font-size: 16pt;
    }

    h3 {
        font-size: 16pt;
    }

ul {
    font-size: 16pt;
}

    header {
        width: 95%;
        position: relative;
    }

    .project { 
        display: block;
    }

    .left {
        margin-top: 40px;
        width: initial;
        max-width: 600px;
    }

    .mid {
        display: none;
    }

    .right {
        width: 100%;
    }
}