*{margin: 0;
padding: 0;
}

body{
    width: 100%;
    background-color: #E5E5E5;
    margin-left: auto;
    margin-right: auto;
}

main{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5vh 0vw;
    margin-left: auto;
    margin-right: auto;
}

.left{
    margin-left: 2vw;
}

.right{
    width: 50vw;
    margin-right: 5vw;
}

.rightb{
    box-shadow: 2px 2px 0px 0px #C9C9C9;
    border-radius: 16px;
    background-color: #F5F5F5;
    padding: 2vh 3vw;
}

.period{
    width: 120%;
    display: flex;
    flex-direction: row;
    padding: 1vh;
}

.start{
    width: 10%;
    padding: 1vh;
}

.end{
    width: 10%;
    padding: 1vh;
}

.war{
    width: 50%;
    background-color:lightcoral;
    padding: 1vh;
    align-self: center;
    border-radius: 8px;
}

.peace{
    width: 50%;
    background-color:lightgreen;
    padding: 1vh;
    align-self: center;
    border-radius: 8px;
}

.result{
    width: 50%;
    background-color:coral;
    padding: 1vh;
    align-self: center;
    border-radius: 8px;
    font-weight: bold;
    color: #000;
}

.img{
    width: 3vw;
}

.kid{
    width: 30vw;
}

.indians{
    text-align: justify;
}

footer{
    background-color:lightgreen;
    color:crimson;
    text-align: center;
    padding: 2vh;
    color: #000;
    font-weight: bold;
}

a:link{
    text-decoration: none;
    background-color: yellow;
    color: black;
}

a:hover{
    background-color:red;
    color: white;
}

#theDemocracy{
}

.theDemocracy{
    position: fixed;
    top: 60vh;
}


.start-button {
  display: block;
  margin: 40px auto;
  width: 80px;
  height: 80px;
  background-color: #e60000;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 14px;
  font-family: sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease;
  text-align: center;
  line-height: 80px;
  font-weight: bold;
}

.start-button:hover {
  background-color: #cc0000;
}

.start-button.clicked {
  background-color: #00b300; /* vert */
}

@keyframes explode {
  0% {
    transform: scale(1);
    opacity: 1;
    background-color: white;
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  10% {
    transform: scale(1.4) rotate(3deg);
    background-color: orange;
    box-shadow: 0 0 40px 20px red;
  }
  25% {
    transform: scale(1.6) rotate(-3deg);
    background-color: orangered;
    box-shadow: 0 0 60px 30px yellow;
  }
  40% {
    transform: scale(1.8) rotate(6deg);
    background-color: #ff4500;
    box-shadow: 0 0 100px 50px crimson;
  }
  60% {
    transform: scale(1.2) rotate(-6deg);
    background-color: darkred;
    box-shadow: 0 0 40px 20px black;
  }
  80% {
    transform: scale(0.9) rotate(0deg);
    background-color: black;
    opacity: 0.6;
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.7);
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
    background-color: black;
    box-shadow: none;
  }
}

.explode {
  animation: explode 2s ease-in-out forwards;
}

@media screen and (max-width: 1920px) {     
    .spacer{
        height: 395vh;
    }

    .White-House{
        width: 50vw;
    }

    .theDemocracy{
        width: 60vw;
    }

}

@media screen and (max-width: 1440px) {     
    .spacer{
        height: 416vh;
    }

    .White-House{
        width: 50vw;
    }

    .theDemocracy{
        width: 50vw;
    }
}
    
    @media screen and (max-width: 1024px) { 
    .spacer{
        height: 416vh;
    }

    .theDemocracy{
        width: 50vw;
    }
}

    @media screen and (max-width: 768px) { 

        .period{
            width: 100%;
        }

    .spacer{
        height: 458vh;
    }

    .theDemocracy{
        width: 50vw;
    }
}
    
    @media screen and (max-width: 425px) {

        main{
            flex-direction: column;
            align-self: center;
            justify-items: center;
            margin-left: 2vw;
        }
    
        .left{
            width: 100vw;
        }
    
        .right{
            width: 100vw;
            margin-top: 2vh;
        }
    
        .spacer{
            height: 20vh;
        }
    
        .White-House{
            width: 100vw;
        }  
        
        .theDemocracy{
            width: 100vw;
        }

        .img{
            width: 10vw;
        }

        footer{
            width: 100%;
        }
}
          
@media screen and (max-width: 375px) { 

    main{
        flex-direction: column;
    }

    .left{
        width: 100vw;
    }

    .right{
    width: 95vw;
    margin-top: 2vh;
    margin-left: 2vw;
    margin-right: 2vw;
    }

    .spacer{
        height: 10vh;
    }

    .White-House{
        width: 100vw;
    }

    .theDemocracy{
        width: 100vw;
    }

}