@keyframes backandforth {
    0%{transform: translateX(15rem);}
    20%{transform: translateY(17rem);}
    40%{transform: translateX(-17rem)}
    60%{transform: translateY(-17rem);}
    100%{transform: translateX(15rem);}
}




*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}
 
html {
    font-size: 10px;
}

body, #side-panel, #game-section {
    box-sizing: border-box;
    height: 100vh;
}

body {
    font-family: 'Times New Roman', Times, serif;
    font-size: 2rem;
    font-weight: 200;
    line-height: 1.5;
    display: flex;
}

#side-panel{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
    width: 25%;
    background-image: linear-gradient(to top, #8F0005, #fffcf2);
}

#hint-comment-box {
    border: .5rem solid #252422;
    border-radius: 20%;
    box-shadow: -1rem -1rem 2rem black;
    background-color: #fffcf2;
    height: 30rem;
    width:30rem;
    font-size: 3rem;
    font-weight: 800;
    margin-top: 5rem;
    padding-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

}

#level-tracker {
    height: 12rem;
    width: 15rem;
    background-color: black;
    border: .4rem solid slategray;
    color: white;
    font-size: 2rem;
    font-weight: 900;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}
span {
    margin: 2rem;
    border: .1rem solid white;
}
#info-toggle {
    display: none;
}

#info-modal-background {
    position: absolute;
    bottom: 3%;
    background-attachment: fixed;
    background-color: #fffcf2;
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    transition: transform .8s cubic-bezier(0.86, 0, 0.07, 1);
    z-index: 1;
}

#info-modal-button {
    background-color: #fffcf2;
    height: 4rem;
    width: 4rem;
    border-radius: 50%;
    margin-bottom: 2rem;
    text-align: left;
    border: 2px dashed #252422;
    z-index: 2;
}

#info-title {
    border: none;
}

#info-text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 50%; 
    border-radius: 20%;
    padding: 10rem;
    color: transparent;
    z-index: -1;
} 

#info-toggle:checked ~ #info-modal-background {
    transform: scale(200);
}

#info-toggle:checked ~ #info-text {
    transition-property: border, color, background-color;
    transition-delay: .6s;
    color: #fffcf2;
    background-color: #8F0005;
    border: 3px solid #252422;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

span {
    font-size: 2.5rem;
    font-weight: bold;
}

#game-section {
    height: 100vh;
    width: 75%;
    background-color: #252422;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#title{
    color: #fffcf2;
    font-size: 5rem;
}

#gameboard {
    box-sizing: border-box;
    background-color: #8F0005;
    border: 5px solid  #04080F;
    border-radius: 5%;
    height: 85rem;
    width: 90rem;
    margin: 10rem;
    margin-top: 4rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.puzzle-item {
    background-color: #250001;
    box-shadow: -.5rem -1.5rem 2rem #250001;
    height: 28rem;
    width: 28rem;
    border: 2px solid  #fffcf2;
    margin-right: .5rem;

}
.top {
    margin-top: 2rem;
    margin-bottom: .5rem;
}
.bottom{
    margin-bottom: 2rem;
}

#puzzle-1 {
    border-radius: 15% 0% 0% 0%;
    background-image: url(../images/wires.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
}

#puzzle-2 {

}

#puzzle-3 {
    border-radius: 0 15% 0 0;
    background-image: url(../images/back_and_forth.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

#puzzle-4 {
    border-radius: 0 0 0 15%;
    background-image: url(../images/simon.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

#puzzle-5{
    background-image: url(../images/number_pad.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#puzzle-6 {
    border-radius: 0 0 15% 0;
    background-image: url(../images/trivia.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.puzzle1-modal, .puzzle2-modal, .puzzle3-modal, .puzzle4-modal, .puzzle5-modal{
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    position: absolute;
    background-color: seashell;
    border: 5px solid #250001;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    text-align: center;
    height: 70rem;
    width: 90rem; 
    border-radius: 20%;
    padding: 10rem;
}

.wire-box {
    display: flex;
    justify-content: space-around;
    background-color: slategray;
    border: .5rem solid #250001;
    height: 50rem;
    width: 50rem;
    margin-bottom: 3rem;
}

#green {
    height: 49rem;
    width: 1rem;
    border: .01rem solid white;
    background-color: green;
}

#red {
    height: 49rem;
    width: 1rem;
    border: .01rem solid white;
    background-color: red;
}

#blue {
    height: 49rem;
    width: 1rem;
    border: .01rem solid white;
    background-color: blue;
}

#timer-box {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}
#timer{
    text-align: center;
    height: 10rem;
    width: 21rem;
    background-color: black;
    border: 4px solid #fffcf2;
    padding-bottom: 5rem;
    font-size: 7rem;
    color: red;
}

#back-forth-container {
    background-color: slategray;
    border: .5rem solid #250001;
    height: 50rem;
    width: 50rem;
    margin-bottom: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
#back-forth-box {
    height: 5rem;
    width: 5rem;
    border-radius: 50%;
    background-color: red;
    border: 3px solid blue;
    animation-name: backandforth;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

#simon-container {
    background-color: slategray;
    border: .5rem solid #250001;
    height: 50rem;
    width: 50rem;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#simon-top {
    margin-bottom: -1.8rem;
}
#simon-middle {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: -1rem;
    margin-bottom: -1rem;
    height: 10rem;
    width: 38rem;
}
.simon-cube {
    height: 10rem;
    width: 10rem;
    border: 2px solid white;
    background-color: blue;
    margin: 1rem;
    transform: rotate(45deg);
}

#simon-green {
    background-color: black;
}
#simon-yellow {
    background-color: black;
}
#simon-red {
    background-color: black;
}
#simon-blue {
    background-color: black;
}

#numberpad-container{
    height: 50rem;
    width: 35rem;
    border: .5rem solid black;
    background-color: slategray;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 3rem;
}

#number-display {
    text-align: center;
}

.number {
    height: 7rem;
    width: 7rem;
    border: .2rem solid black;
    margin: .1rem;
}

#number-top {
    margin-top: 5rem;
}

#submit-button {
    margin-top: 3rem;
}

#trivia-container {
    height: 40rem;
    width: 60rem;
    border: .5rem solid black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#question {
    height: 10rem;
    width: 40rem;
    border: .2rem solid black;
    margin-bottom: 7rem;
    text-align: center;
}
.start-page {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    height: 100vh;
    width: 100vw; 
    background-image: url(../images/main_screen.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 10000;
    padding: 10rem;
    font-size: 9rem;
    color: #14213d;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#first-start {
    display: none;
}
.first-start-button {
    width: 25rem;
    height: 12rem;
    background-image: url(../images/start_button.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #252422;
    animation-timing-function: linear;
}

.game-over-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: white;
    border: .3rem solid black;
    color: black;
    font-size: 8rem;
}

#done {
    margin-top: -8rem;
    height: 4rem;
    width: 10rem;
    font-size: 2rem;
    background-color: #8F0005;
}