@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro|Roboto|Ubuntu|Maven+Pro|Press+Start+2P|Droid+Sans|Marvel|Oleo+Script+Swash+Caps);

#playfield> .column > .circle {
	width: 80px;
	height: 80px;
	background-color: white;
	float: left;
    border-radius: 50px;
    margin: 8px;
    border: 2px solid black;
}

#playfield > .column > .circleRed {
    background-color: #ff0000;
}

#playfield >  .column > .circleBlue {
    background-color: #0000ff;
}

h2, h3, h4, h5, h6, a, p {
    font-family: 'Maven Pro', sans-serif;
}

h1 {
    text-align: center;
    font-family: 'Oleo Script Swash Caps', cursive;
}

div#footer {
    height: auto;
    width: 100%;
    /*width: 90%;*/
    text-align: center;
}

div#footer > a {
    vertical-align: bottom;
}

#playfield {
	width: 701px;
	height: 600px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
    background-color: hsla(41, 100%, 51%, 0.80);
    border: 3px solid black;
    border-radius: 50px;
    z-index: 2;
}


#playfield > .column {
	width: 100px;
	height: 600px;
	float:left;
    border-radius: 48px;
}

#playfield > .column:hover {
	background-color: hsl(41, 69%, 35%);
    border-radius: 48px;
}

div#anleitung {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 30px;
}

div#indicatorRed {
    width: 150px;
    height: 150px;
    background-color: #ff0000;
    border-radius: 50px;
    border: 3px solid black;
}

div#indicatorBlue {
    width: 150px;
    height: 150px;
    background-color: #0000ff;
    border-radius: 50px;
    border: 3px solid black;
}

p.indicatorContainerDescription {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

div.indicatorContainer {
    width: 150px;
    height: 300px;
    text-align: center;
}

div.indicatorContainerLeft {
    position: absolute;
    top: 300px;
    left: 30px;
    width: 150px;
    height: 300px;
    display: none;
}

div.indicatorContainerRight {
    position: absolute;
    top: 300px;
    right: 30px;
    width: 150px;
    height: 300px;
}

div#restart {
    position: relative;
    margin: auto;
    width: 80%;
    height: 80%;
    top: 10%;
    background-color: rgba(255, 130, 40, 0.79);
    border-radius: 50px;
    border: 3px solid black;
    display: none;
}

div#restart a{
    display: block;
    width: 100%;
    height: 50%;
    position: absolute;
    vertical-align: middle;
    align-self: center;
    top: 27%;
    text-decoration: none;
    color: black;
    font-size: 6em;
}

div#restart a#first {
    top:0px;
}

/* Neue CSS-Regeln für die Schaltflächen */
#button-container {
    text-align: center;
    margin-top: 20px;
}

.button {
    display: inline-block;
    padding: 10px 20px;
    margin: 0 10px;
    background-color: #f0f0f0; /* Ein sehr helles Grau */
    border: 1px solid #ddd;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-family: 'Maven Pro', sans-serif;
    transition: transform 0.2s ease-in-out;
}

.button:hover {
    transform: scale(1.1); /* Erhöht die Größe um 10% bei Mouseover */
    background-color: #e0e0e0;
}

/* Styling für das Logo */
.logo-container {
    text-align: center;
    margin-top: 20px;
    padding-bottom: 20px;
}

.logo-container img {
    width: 200px; /* Du kannst diese Breite anpassen */
    height: auto;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.logo-container img:hover {
    transform: scale(1.05); /* Vergrößert das Logo um 5% */
    filter: brightness(1.2); /* Macht das Logo 20% heller */
    cursor: pointer;
}