.buttonyell{width:70%;height:32px;border: thin solid rgb(0 0 0 /.1);border-radius: 0 0.4em 0.4em 0.4em;box-shadow: 0 .2em 0.4em rgb(0 0 0 /.5);color:black;font-size:large;background-color:yellow;}
.buttonred{width:70%;height:32px;border: thin solid rgb(0 0 0 /.1);border-radius: 0 0.4em 0.4em 0.4em;box-shadow: 0 .2em 0.4em rgb(0 0 0 /.5);color:white;font-size:large;background-color:red;}
.buttongreen{width:70%;height:32px;border: thin solid rgb(0 0 0 /.1);border-radius: 0 0.4em 0.4em 0.4em;box-shadow: 0 .2em 0.4em rgb(0 0 0 /.5);color:yellow;font-size:large;background-color:green;}








/* Schrift Residence */

.pacifico {text-align: center;font-family: "Pacifico", cursive;color: #FFFF00;font-size: xx-large;}
.myDiv6 {width:30px;text-align: center;font-size:x-large;color:blue;font-family: "Pacifico", cursive;}
.myDivrp {width:30px;text-align: center;font-size:x-large;color:blue;font-family: "Pacifico", cursive;color:white;}


/* Link unten */


/* Schrift Bibione */
        
#rotate-text {
position: fixed;
top: 65px; left: 25px;
color:blue;
font-family: "Pacifico", cursive;
font-size:40px;
text-shadow: 0px 0px 10px white, 0px 0px 10px white, 0px 0px 10px yellow,
0px 10px 10px yellow, 0px 0px 10px yellow, 0px 0px 10px yellow, 0px 0px 10px yellow,
0px 0px 10px yellow, 0px 0px 10px yellow;
width: 25px;
transform: rotate(-10deg);
}


/* Sonne */

.view {
  position: fixed;
  top: 35;
  left: 25;
  perspective: 400;
}

.plane {
  width: 50px;
  height: 50px;
  transform-style: preserve-3d;
}
.plane.main {
  position: absolute;
  top: 3;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transform: rotateX(60deg) rotateZ(-30deg);
  -webkit-animation: rotate 20s infinite linear;
          animation: rotate 20s infinite linear;
}
.plane.main .circle {
  width: 50px;
  height: 50px;
  position: absolute;
  transform-style: preserve-3d;
  border-radius: 150%;
  box-sizing: border-box;
  box-shadow: 0 0 25px yellow, inset 0 0 40px yellow;
}
.plane.main .circle:nth-child(1) {
  transform: rotateZ(72deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(2) {
  transform: rotateZ(144deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(3) {
  transform: rotateZ(216deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(4) {
  transform: rotateZ(288deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(5) {
  transform: rotateZ(360deg) rotateX(63.435deg);
}

@-webkit-keyframes rotate {
  0% {
    transform: rotateX(0) rotateY(0) rotateZ(0);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotateX(0) rotateY(0) rotateZ(0);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}








/* Seiten Links */


html {
  font-family: "Lato", sans-serif;
}

body {
background-color:blue;
  margin: 0;
  overflow-x: hidden;
  height: 100vh;
  width: 100vw;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.msg {
  font-family: "Pacifico", cursive;
  font-size: 8vw;
  display: flex;
  flex-direction: column;
  justify-content: top;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  align-items: center;
  color: #FEFEFE;
  background-color: blue;
}

.features {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
}
.features li {
  width: 100%;
  text-align: center;
  padding: 0.25em;
}

.drawer-list {
  position: fixed;
  right: 0;
  top: 135;
  height: 100vh;
  width: 100vw;
  transform: translate(100vw, 0);
  /* ie workaround */
  -ms-transform: translatex(-100vw);
  box-sizing: border-box;
  pointer-events: none;
  padding-top: 125px;
  transition: width 475ms ease-out, transform 450ms ease, border-radius 0.8s 0.1s ease;
  border-bottom-left-radius: 100vw;
  background-color: #3d88ce;
  background-color: rgba(12, 106, 194, 0.8);
}
@media (min-width: 768px) {
  .drawer-list {
    width: 40vw;
  }
}
.drawer-list ul {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
  overflow-x: hidden;
  pointer-events: auto;
}
.drawer-list li {
  list-style: none;
  text-transform: uppercase;
  pointer-events: auto;
  white-space: nowrap;
  box-sizing: border-box;
  transform: translatex(100vw);
  /* ie workaround */
  -ms-transform: translatex(-100vw);
}
.drawer-list li:last-child {
  margin-bottom: 2em;
}

.drawer-list li a {
  font-family:Arial, Helvetica, sans-serif;
  text-decoration: none;
  color: #FEFEFE;
  text-align: center;
  display: block;
  background-color: rgba(12, 106, 194, 0.8);
  padding: 1rem;
  font-size: calc(24px - .5vw);
}

@media (min-width: 768px) {
  .drawer-list li a {
    text-align: right;
    padding: 0.5rem;
  }
}
.drawer-list li a:hover {
  cursor: pointer;
  background-color: #88c2f8;
  background-color: rgba(17, 132, 240, 0.5);
}

input.hamburger {
  display: none;
}
input.hamburger:checked ~ .drawer-list {
  transform: translatex(0);
  border-bottom-left-radius: 0;
}
input.hamburger:checked ~ .drawer-list li {
  transform: translatex(0);
}
input.hamburger:checked ~ .drawer-list li:nth-child(1) {
  transition: transform 1s 0.08s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ label > i {
  background-color: transparent;
  transform: rotate(90deg);
}
input.hamburger:checked ~ label > i:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
input.hamburger:checked ~ label > i:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
input.hamburger:checked ~ label open {
  color: rgba(0, 0, 0, 0);
  width: 0;
}

label.hamburger {
  z-index: 9999;
  position: relative;
  display: block;
  height: 30px;
  width: 30px;
}
label.hamburger:hover {
  cursor: pointer;
}
label.hamburger > i {
  position: absolute;
  width: 100%;
  height: 2px;
  top: 50%;
  background-color: #FEFEFE;
  pointer-events: auto;
  transition-duration: 0.35s;
  transition-delay: 0.35s;
}
label.hamburger > i:before, label.hamburger > i:after {
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  left: 50%;
  background-color: #FEFEFE;
  content: "";
  transition: transform 0.35s;
  transform-origin: 50% 50%;
}
label.hamburger > i:before {
  transform: translate(-50%, -14px);
}
label.hamburger > i:after {
  transform: translate(-50%, 14px);
}

label.hamburger {
  position: fixed;
  top: 23px;
  right: 15px;
}

/**
    SCROLLBAR STYLE FOR IE
*/
body {
  scrollbar-base-color: #138a72;
  scrollbar-3dlight-color: #fff;
  scrollbar-highlight-color: #1abc9c;
  scrollbar-track-color: #fff;
  scrollbar-arrow-color: #1abc9c;
  scrollbar-shadow-color: #1abc9c;
  scrollbar-dark-shadow-color: #1abc9c;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.icon {
  display: inline-block;
  width: 5vw;
  height: 4vw;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}




#back {
    position: fixed;
    border: 1px solid white;
    border-radius: 15px;
    bottom: 0px;
    right: 0px;
    background-color: blue;
	font-size:medium;
	font-family: Arial, Helvetica, sans-serif;
	text-align:center;
    color:white;
    width: 48px;
    height: 48px;
}






/*  Logo Buchstaben RP */


.myDivrp {

position: fixed;
top: 17px; left: 30px;
width:30px; 
text-align: center;
font-size:x-large;
color:blue;}


.myDiv6 {

position: fixed;
top: 27px; left: 45px;
width:30px; 
text-align: center;
font-size:x-large;
color:blue;}



/* Kopf */

.auto-style1 {
text-align:center;
  background-color:blue;
  color: yellow;

}
.auto-style2 {
  font-family: Times New Roman;
  font-size:  large;
}

.auto-style3 {
  font-family: "Pacifico", cursive;
  font-size:  xx-large;
}

.auto-style4 {
  font-family: "Pacifico", cursive;
  font-size:  x-large;
}