/* ----------------------------------------- */
/* ===--# Color-Codes for the Website #--=== */
/* RGB Var1--> Deep Pink #F31794 <-> Free Speech Green #26F317 <-> Electric Indigo #7617F3 */
/* RGB Var2--> Red Damask #CA6C4D <-> Puerto Rico #4DCAAA <-> Royal Blue #4D6CCA */
/* RGB Var3--> Atomic Tangerine #FE9A5F <-> Sulu #C4FE5F <-> Medium Slate Blue #5F74FE */
/* <---------> <---------> */
/* Rot     --> Deep Pink #F31794 */ /* Red Damask #CA6C4D */ /* Atomic Tangerine #FE9A5F */
/* Grün    --> Free Speech Green #26F317 */ /* Puerto Rico #4DCAAA */ /* Sulu #C4FE5F */
/* Blau    --> Electric Indigo #7617F3 */ /* Royal Blue #4D6CCA */ /* Medium Slate Blue #5F74FE */
/* <---------> <---------> */
/* Weiß    --> Snow #FFFAFA */ /* Ghost White #F0F0FF */ /* White #FFFFFF */
/* Grau    --> Paris White #C1CDC1 */ /* Aqua Squeeze #E0E6E0 */ /* Grey #777777 */
/* Schwarz --> Night Rider #2D2929 (#323232) */ /* Nero #1A1A1A */ /* Black #000000 */
/* -------------------------------- */
/* ===--# Allgemeines Layout #--=== */
/* -------------------------------- */

html {
  box-sizing: border-box;
}
*, ::before, ::after {
          box-sizing: inherit;
          padding: 0.25em;
          margin: 4px;
}

body{
          margin: 0   auto;
          max-width: 66em;
          background: black;
          background-image: url("pics/cyborg-space.jpg");
          background-size: cover;
          background-repeat: no-repeat;
          background-attachment: fixed;
          color: white;
          font-family: Calibri;
        }

.p1{
          text-shadow: 1px 1px #5F74FE;
          text-align: center;
          font-size: 2rem;
          font-weight: bold;
}

sub{
          vertical-align: sub;
          font-size: 0.66rem;
          margin-left: -0.1em;
          margin-right: -0.1em;
        }

sup{
          vertical-align: sup;
          font-size: 0.66rem;
          margin-left: -0.1em;
          margin-right: -0.1em;
        }

header{
          border: 2px solid #5F74FE;
          min-height: 76px;
        }

header.header2{
          float: left;
          margin-right: 5px;
          border: 2px solid #5F74FE;
          min-height: 76px;
        }

.button-style{
          float: right;
          border: 2px solid white;
          background-color: rgba(0, 0, 0, 0.85);
          color: white;
          padding: 4px 20px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 0.6rem;
          font-family: monospace;
        }

.button-style:hover{
          color: #5F74FE;
        }

main{
          border: 2px solid #5F74FE;
          height: 770px;
          overflow-y: auto;
          overflow-x: hidden;
        }

.main-text{
          width: 66%;
          font-size: 1.66rem;
          color: white;
          background-color: rgba(0, 0, 0, 0.85);
          text-align: justify;
          margin-left: auto;
          margin-right: auto;
        }

.a-main{
          font-family: Calibri;
          font-weight: bold;
          text-decoration: none;
          color: #5F74FE;
          transition: all 0.25s;
}

.a-main:hover{
          font-family: Calibri;
          font-weight: bold;
          transition: all 0.25s;
          background-color: rgba(0, 55, 0, 0.55);
          text-decoration: none;
          color: #5F74FE;
}

footer{
          border: 2px solid #5F74FE;
          height: 75px;
	  margin-top: calc(50vh - 42px);
        }

.text-footer{
	  font-size: 13px;
	  margin: 0px;
	  padding: 0px;
        }

.link-footer{
          color: snow;
	  text-decoration: none;
	  cursor: pointer;
	  font-size: 11px;
	  margin: 0px;
	  padding: 0px;
}

.link-footer:hover{
	  color: rgba(70,120,220,1);
}

.logo{
          float: left;
          padding: -0.125em;
          margin: -2px;
        }

@media (max-width: 45em)  {
.main-text{
          font-size: 1.55rem;
          color: white;
          background-color: rgba(0, 0, 0, 0.85);
          text-align: justify;
          width: 100%;
          margin: 0;
        }
}

/* --------------------------------------- */
/* ===--# Seitenspezifisches Layout #--=== */
/* --------------------------------------- */

.button-header{
          float: right;
          border: 2px solid white;
          background-color: rgba(0, 0, 0, 0.85);
          color: white;
          padding: 10px 21px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 1.66rem;
        }

.button-header:hover{
          border: 3px solid white;
          background-color: rgba(0, 0, 0, 0.85);
          color: white;
          padding: 10px 21px;
          text-align: center;
          text-decoration: none;
          text-shadow: 1px 1px #5F74FE;
          display: inline-block;
          font-size: 1.577rem;
        }

.bible{
          float: left;
          width: 15%;
          margin-left: 5.6em;
          font-size: 1rem;
          color: white;
          background-color: rgba(0, 0, 0, 0.85);
          text-align: justify;
        }

.video{
          width: 55%;
          background-color: rgba(0, 0, 0, 0.85);
        }

.button{
          border: 2px solid white;
          background-color: rgba(0, 0, 0, 0.85);
          color: white;
          padding: 15px 32px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 1.66rem;
        }

.button:hover{
          border: 3px solid white;
          background-color: rgba(0, 0, 0, 0.85);
          color: white;
          padding: 15px 32px;
          text-align: center;
          text-decoration: none;
          text-shadow: 1px 1px #5F74FE;
          display: inline-block;
          font-size: 1.577rem;
        }

.flag{
          float: left;
          border: 0;
          display: block;
          margin-top: 155px;
          margin-right: 5%;
          margin-left: 5%;
          width: 80%;
          opacity: 0.88;
          transition: all 0.25s;
}

.flag:hover{
          opacity: 1;
          transition: all 0.25s;
}

.flag2{
          display: none;
}

@media (max-width: 45em)  {
.flag{
          display: none;
        }

.flag2{
          float: left;
          border: 0;
          display: block;
          margin-right: 15%;
          margin-left: 15%;
          width: 70%;
          opacity: 0.88;
          transition: all 0.25s;
         }

.flag2:hover{
          opacity: 1;
          transition: all 0.25s;
         }
}