@font-face {
    font-family: "CascadiaMono";
    src: url("../fonts/CascadiaMono.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}
body 
{
    background-color: lightgray;
}

a.woah
{
    transition-duration: 0s;
}

.button1
{
    display: inline-block;
    border: 3px solid white;
    width: 100px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: large;
    font-family: CascadiaMono;
    padding: 8px 24px;
    margin: 0;
    background-color: rgb(20, 20, 20);
    cursor: pointer;
    transition-duration: 0.2s;
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
}
a.button1:hover
{
    background-color: gray;
}
a.button1:link
{
    text-decoration: none;
}

h1
{
    color:rgb(20, 20, 20);
    font-family: 'CascadiaMono';
}
p
{
    color:rgb(20, 20, 20);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: x-large;
}

.h1
{
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    color:rgb(20, 20, 20);
    font-family: 'CascadiaMono';
}
a.h1:link
{
    text-decoration: none;
}

.portfolio-header
{
    background-color: black;
    text-align: center;
    color:white;
    padding: 10px;
    border-radius: 10px;
}

.github_button
{
    background-color: #6cc644;
    padding: 8px 24px;
    border-radius: 2px;
    font-family: 'CascadiaMono';
    color: black;
    font-weight: bold;
}
a.github_button:link
{
    text-decoration: none;
}

table
{
    border-collapse: collapse;
}
tr
{
    border: solid;
    border-width: 2px 0px;
}
td
{
    vertical-align: top;
    padding: 10px;
}

@media screen and (min-width: 1080px) 
{
    table.table1
    {
        width: 75%;
    }
    div.div1
    {
        width: 75%;
    }
    table.table2
    {
        width: 55%;
    }
}

@media screen and (max-width: 800px) {
    table.table1
    {
        width: 100%;
    }
    tr.tr1
    {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }
    div.div1
    {
        width: 100%;
    }
    table.table2
    {
        width: 100%;
    }
}

li
{
    color:rgb(20, 20, 20);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: x-large;
}

.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}