@font-face {
    font-family: 'Fjalla One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/Yq6R-LCAWCX3-6Ky7FAFrOF6lw.ttf) format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url(/fonts/KFOjCnqEu92Fr1Mu51TjASc6CsE.ttf) format('truetype');
}
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/KFOkCnqEu92Fr1Mu51xIIzc.ttf) format('truetype');
}
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/KFOjCnqEu92Fr1Mu51TzBic6CsE.ttf) format('truetype');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(/fonts/KFOkCnqEu92Fr1MmgVxIIzc.ttf) format('truetype');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/fonts/KFOlCnqEu92Fr1MmSU5fBBc9.ttf) format('truetype');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/KFOlCnqEu92Fr1MmWUlfBBc9.ttf) format('truetype');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(/fonts/KFOlCnqEu92Fr1MmYUtfBBc9.ttf) format('truetype');
}

@font-face {
    font-family: 'Great Vibes';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/RWmMoKWR9v4ksMfaWd_JN9XFiaE.ttf) format('truetype');
}

html, body {
    background-color: #000;
    background-image: url(../img/blacknoise.png);
    color: white;
}

#wrapper {
}

#topbar {
    font-family: 'Roboto';
    text-align: center;
    height: 12em;
}

div .lightgrey {
    background-color: #181a1b;
    background-image: url(../img/lightgreynoise.png);
}

div .darkgrey {
    background-color: #111213;
    background-image: url(../img/greynoise.png);
}

#topimage {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../img/olle-johansson-bw.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    background-position: 0, 0px;
    height: 15em;
}

.center {
    margin: auto;
    position: relative;
}

#topbar h1 {
    margin: 0.2em;
    padding: 0;
    letter-spacing: 0.2em;
    font-size: 1.5em;
}
#topbar h2 {
    margin: 0.2em;
    padding: 0;
    letter-spacing: 0.2em;
    font-size: 1.2em;
}

.swappable {
    display: table;
}
.pullup {
    display: table-header-group;
}

.support-btn {
    border-radius: 30px;
    background-color: orangered;
    padding: 1.2em;
    font-size: 1em;
    letter-spacing: 0.25em;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid #711f00;
    color: white;
    opacity: 0.8;
    -webkit-animation: pulse 1.8s infinite;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255,0,0, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 20px rgba(255,0,0, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(255,0,0, 0);
  }
}

.support-btn:hover {
    border: 3px solid #711f00;
    letter-spacing: 0.27em;
    color: white;
    -webkit-animation: none;
}

h1, h2 {
    text-transform: uppercase;
    /*color: #f8191a;*/
}

h1 {
    font-size: 1.5em;
}
h2 {
    font-size: 1.4em;
}

p {
    font-size: 0.9em;
    line-height: 1.8em;
}

.centered {
    text-align: center;
    vertical-align: middle;
}

.embed-youtube {
    position: relative;
    padding-bottom: 56.25%; /* - 16:9 aspect ratio (most common) */
    /* padding-bottom: 62.5%; - 16:10 aspect ratio */
    /* padding-bottom: 75%; - 4:3 aspect ratio */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.embed-youtube iframe,
.embed-youtube object,
.embed-youtube embed {
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*div .credentials-block {
    background-color: #111213;
    background-image: url(../img/greynoise.png);
}*/

div .credentials-block .credentials {
    padding-left: 1em;
    padding-right: 1em;
}

div .credentials-block .credentials h2 {
    text-align: center;
}

/*.support-block {
    background-color: #111213;
    background-image: url(../img/lightgreynoise.png);
}*/

.support-block .inner {
    width: 90%;
    margin: auto;
}

.funds .inner {
    width: 90%;
    margin: auto;
}

.paypal-block {
    text-align: center;
}

.paypal-block .inner {
    /*    padding-left: 5em;
        padding-right: 5em;*/
}

#paypal-btn {
    padding: 1.2em;
    border-radius: 30px;
    background-color: orangered;
    padding-left: 3em;
    font-size: 1em;
    letter-spacing: 0.25em;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #711f00;
    color: white;
    background-image: url('../img/pp258.png');
    background-size: 10%;
    background-repeat: no-repeat;
    background-position-x: 15px;
    background-position-y: 12px;
    margin-bottom: 0.5em;
    -webkit-animation: pulse 2.2s infinite;
    animation: pulse 2.2s infinite;
}

#paypal-btn:hover {
    border: 3px solid #711f00;
    letter-spacing: 0.27em;
    color: white;
    -webkit-animation: none;
    animation: none;
}

.ccimg {
    margin-bottom: 1em;
}

a {
    color: orangered;
}

a:hover {
    color: #f8191a;
}

ul {
    font-size: 0.9em;
    line-height: 1.5em;
}

.video {
    padding-bottom: 2em;
    width: 90%;
    margin: auto;
}

.video-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: auto;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/* small ≥ 568px */
@media screen and (min-width: 35.5em) {
    #topimage {
        background-position: 0, -20px;
        height: 15em;
    }
}

/* medium ≥ 768px */
@media screen and (min-width: 48em) {
    #topimage {
        background-position: 0, 0;
        height: 15em;
    }
    #topbar h1 {
        margin: 0.2em;
        padding: 0;
        letter-spacing: 0.15em;
        font-size: 2em;
    }
    .swappable {
        display: block;
    }
    .pullup {
        display: inline-block;
    }
    .column1 {
        float: right;
        width: 95%;
        padding-right: 1em;
    }
    .column2 {
        float: left;
        width: 95%;
        padding-left: 1em;
    }
    p {
        font-size: 0.9em;
    }
    .border-bottom {
        margin-bottom: 1em;
    }

    #support-block {
        width: 50%;
        margin: auto;
    }

    .funds .inner {
        width: 60%;
        margin: auto;
    }

    .bank .inner {
        width: 60%;
        margin: auto;
    }

    .funds ul {
        font-size: 1em;
    }

    .funds li {
        padding-bottom: 1em;
    }

    .paypal-block {
        text-align: left;
    }
    .paypal-block .inner {
        padding-left: 5em;
        padding-right: 5em;
    }
    #paypal-btn {
        margin-left: 1em;
    }
    .ccimg {
        margin-left: 6.7em;
    }
    .video {
        width: 60%;
        margin: auto;
    }

    #footer {
        font-size: 0.8em;
        color: darkgray;
    }

    div .credentials-block .credentials {
        padding-left: 5em;
        padding-right: 5em;
    }
}

/* large ≥ 1024px */
@media screen and (min-width: 64em) {
    #topbar {
        height: 7em;
    }

    #topbar h1 {
        margin: 0.2em;
        padding: 0;
        letter-spacing: 0.2em;
        font-size: 2.5em;
    }
    
    h2 {
        font-size: 2em;
    }
    .column1 {
        float: right;
        width: 85%;
        padding-right: 1.5em;
    }
    .column2 {
        float: left;
        width: 85%;
        padding-left: 1.5em;
    }
    p {
        font-size: 1.2em;
    }

    ul {
        font-size: 1.2em;
    }
}

/* xl ≥ 1280px */
@media screen and (min-width: 80em) {
    #topbar {
        height: 8em;
    }

    #topimage {
        background-position: -20%, 0;
        height: 27em;
    }

    #topbar h1 {
        margin: 0.5em;
        padding: 0;
        letter-spacing: 0.3em;
        font-size: 3em;
    }

    .support-btn {
        padding: 1.2em;
        font-size: 1.2em;
        border-radius: 50px;
    }

    .column1 {
        float: right;
        width: 70%;
    }
    .column2 {
        float: left;
        width: 70%;
    }
}