p,
h2 {

    color: black;
}

p {

    font-family: Arial, sans-serif;
    font-size: 1em;
}

h1 {
    font-family: Arial, sans-serif;
    font-size: 3em;
    font-weight: 700;
    text-align: center;



}

h2 {

    font-family: Arial, sans-serif;
    font-size: 1.5em;
    font-weight: 700;

}

.demo-border {

    border: 2px solid #00b09b;
    border-radius: 8px;
    box-shadow: 6px 6px 15px rgb(29, 49, 63)
}


body {

    background-color: whitesmoke;
    font-family: Arial, sans-serif;

}

.firstpage {
    background: linear-gradient(#00b09b, #96c93d)
}

.secondpage {

    background: linear-gradient(#fc4a1a, #f7b733)
}



img:hover {

    opacity: 0.5;
}

a {
    font-size: 1em;
    text-decoration: none;
    color: #96c93d;
}


a:hover {
    color: red;
    text-decoration: underline;
}

a:active {

    text-decoration-color: #00b09b;
}

a:focus {
    background-color: red;
    color: blue;
    outline-color: aqua;
}


img:hover+h2 {

    color: purple;

}


.banner {
    padding: 100px 0;
    background: url("image/echiquierimage.jpg");
    background-size: cover;
    background-position: center;
    width: 500px;
    height: 200px;
    margin: auto;
}

p {
    margin: 5px;
    padding-top: 5px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 30px;

}

.myimage {

    width: 300px;
    height: auto;
}

.piece{
    width: 500px;
    height: auto;
}

.checkmat{

    width: 200px;
    height:  auto;
}


.check{

    width: 200px;
    height: auto;
}


.pat{

    width: 200px;
    height: auto;
}

.roque{

    width: 200px;
    height: auto;
}


.enpassant{

    width: 200px;
    height: auto;
   
}

img{
    margin: 10px;
}