/* Page formatting */

body{
    margin-right: 30px;
    margin-left: 30px;
    font-family: 'Athelas';
}

.joke{
    margin-top: 100px;
    text-align: center;
}

.title{
    font-size: 20px;
}

.icon{
    width: 19px;
    display: inline-block;
    vertical-align: middle;
}

.image{
    width: 160px;
    cursor: pointer;
}

a:link, a:visited {
    color: #052a9c;
}

a:hover, a:active {
    color: #1966bf;
}

#link{
    text-decoration: none;
    background-image:url(https://en.wikipedia.org/w/skins/Vector/resources/skins.vector.styles/images/link-external-small-ltr-progressive.svg?fb64d);
    background-position:center right;
    background-repeat:no-repeat;background-size:0.857em;
    padding-right:1em
}

#link:hover, #link:active{
    text-decoration: underline;
}

@media only screen and (max-width: 1000px){
    body{
        font-size: 2vh;
    }
    .icon{
        width: 3.2vh;
    }

    .image{
        width: 30vh;
    }
}

@font-face {
font-family:"athelas";
src:url("https://use.typekit.net/af/adf251/00000000000000000000d834/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/adf251/00000000000000000000d834/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/adf251/00000000000000000000d834/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
}

@font-face {
font-family:"athelas";
src:url("https://use.typekit.net/af/c0afc3/00000000000000000000d835/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/c0afc3/00000000000000000000d835/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/c0afc3/00000000000000000000d835/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
font-display:auto;font-style:italic;font-weight:400;font-stretch:normal;
}

@font-face {
font-family:"athelas";
src:url("https://use.typekit.net/af/a358fc/00000000000000000000d836/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/a358fc/00000000000000000000d836/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/a358fc/00000000000000000000d836/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}

@font-face {
font-family:"athelas";
src:url("https://use.typekit.net/af/27d1c7/00000000000000000000d837/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/27d1c7/00000000000000000000d837/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/27d1c7/00000000000000000000d837/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
font-display:auto;font-style:italic;font-weight:700;font-stretch:normal;
}

/* Pop-up formatting */

.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(55, 55, 55, 0.25);
}

.content {
    position: relative;
    background: white;
    padding: 1.3em 2em;
    margin: 20px;
    width: 400px;
}

.modal:target {
    display: flex;
}

.fn {
    font-weight: normal;
    font-size: 12px;
    display: inline;
    position: relative; 
    top: -0.5em; 
}

.times{
    color: black;
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 30px;
    text-decoration: none;
}

@media only screen and (max-width: 1000px){

    .fn{
        font-weight: normal;
        font-size: 1.7vh;
        display: inline;
        position: relative; 
        top: -0.3em; 
    }

    .content {
        width: 100%;
        padding: 1.4em;
    }

    .times{
        font-size: 4vh;
        margin-right: 15px;
    }
}

a.external{
    background-image:url(https://en.wikipedia.org/w/skins/Vector/resources/skins.vector.styles/images/link-external-small-ltr-progressive.svg?fb64d);
    background-position:center right;
    background-repeat:no-repeat;background-size:0.857em;
    padding-right:1em
}