@charset "UTF-8";


@viewport
{
  width: device-width;
}


@font-face
{
  font-family: 'Ubuntu';
  src: url('../fonts/Ubuntu-L.ttf') format('truetype');
  font-style: normal;
}

@font-face
{
  font-family: 'Ubuntu';
  src: url('../fonts/Ubuntu-LI.ttf') format('truetype');
  font-style: italic;
}

@font-face
{
  font-family: 'Ubuntu';
  src: url('../fonts/Ubuntu-B.ttf') format('truetype');
  font-style: oblique;
}

:root
{
  --myColorA: #555555ff  /* #4a4a4aff; []*/
  --myColorB: #fffff0ff;
  --myForegroundAlpha: rgba(255, 255, 240, 0.95);
  --myBackgroundAlpha: rgba(255, 204, 0, 0.75);  /* rgba(123, 155, 48, 0.75);/* [myGreen] rgba(0, 34, 85, 0.75); [myBlue] */

  --myBlack: #000000ff; /* #4a4a4aff; */
  --myBlue: #007cbaff;
  --myBrown: #502500;
  --myDarkBlue: #002255;
  --myGold: #ffcc00ff;
  --myGreen: #7b9b30ff;
  --myGrey: #f5f5f5ff;
  --myDarkGrey: #323232bf;
  --myOrange: #fe7920ff;
  --myRed: #ff0000ff;
  --myWhite: #fffff0ff;

  --mediaXS: 479px;
  --mediaS: 767px;
  --mediaM: 979px;
  --mediaL: 1023px;
  --mediaXL: 1199px;
}

*
{
  font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
}

body
{
  color: var(--myGold);
  background: var(--myBlack); /* var(--myGold);  /* var(--myBackgroundAlpha); */

  margin: 0;
}

body.site
{
  background-image: url("/images/logo.png");
  background-size: 100vw;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center bottom;
  position: relative;
}

body.site::before
{
  content: "";

  background-image: url("/images/ofkp_outline_no_bg.png");
  background-size: 1%;

  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right bottom;

  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: -1;
  opacity: 0.125;
}

.body .container
{
  /* background: rgba(0,124,186,0.10); */
}

.container
{
    width: 100%;
    padding: 20px;
}

a,
a:hover,
a:visited
{
  color: var(--myDarkGrey);
  cursor: default;
  text-decoration: none;
}

h1
{
    font-size: 4.854rem;
    font-weight: bold;
}

h2
{
    font-size: 3.236rem;
    font-weight: bold;
}

h3
{
    font-size: 1.618rem;
    font-weight: bold;
}

.card
{
    text-align: center;
    overflow: hidden;

    border: solid 1px var(--myBlack);
    border-radius: 25px;

    color: var(--myGold);
    background-color: var(--myBlack);

    padding: 20px;
}

img
{
    border-radius: 50%;
    max-width: 61.8vw;
    max-height: 61.8vh;

    background-color: var(--myGold);
}

.warning
{
    border-radius: 25px;
    max-width: 61.8vw;
    max-height: 61.8vh;

    background-color: var(--myGold);
}

footer
{
  color: var(--myDarkGrey);
  width: 100%;
  padding: 20px;
}

.xs
{
  font-size: 0.5rem;
}

.bottom-right
{
  text-align: right;
  margin-right: 10vw;
}

/*
Version: mobile
*/
@media only screen and (min-width: var(--mediaXS)) and (max-width: var(--mediaM))
{
  @media only screen and (orientation: portrait)
  {
    .card
    {
        width: 100%;
    }
  }

  @media only screen and (orientation: landscape)
  {

  }
}