@font-face {
    font-family: Nightingale;
    src: url(DTNightingale-Light.ttf);
}

h1 {
    font-family: Nightingale;
}

a {
    color: rgb(210, 210, 210);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

:root { 
    background-color: black;
    color: rgb(210, 210, 210);
}

.main {
    font-family: sans-serif;

    @media (min-width: 75rem) {
        width: 60rem;
        margin: auto;

      
        /* align-self: center; */
    }
}

code {
    background-color: rgb(40, 40, 40);
    color: rgb(210, 210, 210);
    padding-left: 0.1rem;
    padding-right: 0.1rem;
    margin-left: -0.1rem;
    margin-right: -0.1rem;
    border-radius: 0.2rem;

}

.main h1 {
    padding-left: 20vi;
    padding-right: 20vi;

    margin: auto;
    padding-top: 60px;

    @media (pointer:none), (pointer:coarse), (max-width: 60rem) {
        padding-left: 5vi;
        padding-right: 5vi;
    }

    @media (min-width: 75rem) {
        padding-left: 5rem;
        padding-right: 5rem;
      
        /* align-self: center; */
    }
}

.main p, .main summary {
    padding-left: 20vi;
    padding-right: 20vi;

    @media (pointer:none), (pointer:coarse), (max-width: 60rem) {
        padding-left: 5vi;
        padding-right: 5vi;
    }


    @media (min-width: 75rem) {
        padding-left: 5rem;
        padding-right: 5rem;
      
        /* align-self: center; */
    }
}

.main summary {
    cursor: pointer;
}

.main details {
    color: rgb(159, 144, 144);
}

.main pre {
    padding-left: 15vi;
    padding-right: 15vi;

    .wide {
        width: 100%;
    }

    @media (pointer:none), (pointer:coarse), (max-width: 60rem) {
        padding-left: 2vi;
        padding-right: 2vi;

        .wide {
            width: auto;
        }
    }

    @media (min-width: 75rem) {
        padding-left: 2rem;
        padding-right: 2rem;
      
        /* align-self: center; */
    }
}

.main pre code::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.main pre code {
    width: fit-content;
    max-width: 100%;
    float: left;
    margin-bottom: 1rem;
    margin-right: 1rem;

    @media (pointer:none), (pointer:coarse), (max-width: 60rem) {
        float: none;
        width: auto;
        margin: auto;
    }

    /* margin-right: 1rem; */
    border-radius: 1rem;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */


    @media (min-width: 75rem) {
        padding-left: 2rem;
        padding-right: 2rem;
      
        /* align-self: center; */
    }
}

.main svg {
    /* padding-left: 15vi; */
    padding-right: 15vi;

    @media (pointer:none), (pointer:coarse), (max-width: 60rem) {
        padding-left: 5vi;
        padding-right: 5vi;
    }

    width: fit-content;
    max-width: 100%;
    float: right;
    margin-bottom: 1rem;
    /* margin-left: 1rem; */

    @media (pointer:none), (pointer:coarse), (max-width: 60rem) {
        float: none;
        width: auto;
        margin: auto;
    }


    @media (min-width: 75rem) {
        padding-left: 2rem;
        padding-right: 2rem;

      
    }
}


.main video {
    border-radius: 0.5rem;

    margin-right: 15vi;

    width: fit-content;
    /* max-width: 100%; */
    float: right;
    /* margin-bottom: 0.5rem; */
    margin-left: 0.5rem;

    @media (pointer:none), (pointer:coarse), (max-width: 60rem) {
        float: none;
        width: auto;
        margin-left: 5%;
    }


    @media (min-width: 75rem) {
        margin-left: 2rem;
        margin-right: 2rem;

      
    }
}