html{
  scroll-behavior: smooth;
}

.kissgrad1 {
  height: 200px;
  width:120%;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%); /* Standard syntax (must be last) */
  text-align:center;
  color:white;
  opacity:0.95;
}

.kisspinktext {
	color: #e9408f;
}
.kissbluetext {
	color: #009fe3;
}

.kissbigtext {
	font-size:100px;
	font-weight:0;
	font-style: normal;
	opacity: :1;
	font-family: Arial Black, Gadget, sans-serif;
}

.kisskurs {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 100%;
}
.kisskurs:hover {
  box-shadow: 0 8px 16px 0 rgba(123,0,0,0.2);
}

.container {
  padding: 2px 16px;
}

html{
  scroll-behavior: smooth;
}

/*  https://www.w3schools.com/howto/howto_css_sidenav_buttons.asp */
/* Style the links inside the sidenav */
#mySidenav a {
  position: absolute; /* Position them relative to the browser window */
  left: -80px; /* Position them outside of the screen */
  transition: 0.3s; /* Add transition on hover */
  padding: 15px; /* 15px padding */
  width: 100px; /* Set a specific width */
  text-decoration: none; /* Remove underline */
  font-size: 20px; /* Increase font size */
  color: white; /* White text color */
  border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}

#mySidenav a:hover {
  left: 0; /* On mouse-over, make the elements appear as they should */
}

/* The about link: 20px from the top with a green background */
#info {
  top: 20px;
  background-color: #4CAF50;
}

#anmelden {
  top: 80px;
  background-color: #2196F3; /* Blue */
}

.kiss_bg_image_1 {
  background-image: url('../icons/zwinker.png');
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: top right;
}
.kiss_bg_image_2 {
  background-image: url('../icons/kopf.png');
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: top right;
}
.kiss_bg_image_3 {
  background-image: url('../icons/smile.png');
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: right;
}
.kiss_bg_image_4 {
  background-image: url('../icons/ball.png');
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: top right;
}
.kiss_bg_image_5 {
  background-image: url('../icons/turn.png');
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: top right;
}
.kissimage {
  border-radius: 50%;
  width: 30%;
  aspect-ratio: 1;
  float: left;
  margin: 5px;
    border:5px solid #e9408f;
    border-radius: 500px;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
}

.kissimage_OR {
  border-radius: 50%;
  width: 25%;
  aspect-ratio: 1;
  float: left;
  margin: 5px;

}
.kissnavtext{
  line-height: 1em;
}