end.css

#end-result-image{
    position: absolute;
    width: 100%;
    transform: scale(1.5);
    opacity: 0.1;
    /* left: -400px;
    top: -700px; */
}
body{
    background: #272727;
    margin: 0;
    padding: 0;
    padding-bottom: 30%;
}

.main-conatiner{
    display: grid;
    /* margin-top: 80px;  */
    align-self: center;
    /* grid-template-columns: 1fr 1fr 1fr; */
    /* min-width: 90%; */
    
}
.background-img-conainer{
    width: 100%
}
.background-img{
    position: absolute;
    overflow: hidden;
    max-height: 1350px;
    width: 100%;
    z-index: -1;
}

.content-section{
    /* margin-top: 80px; */
    display: grid;
    justify-content: center;
    align-content: center;
    text-align: center;
}


.game-title{
    font-family: Cinzel Decorative;
    font-size: 230%;
    margin-top: 80px;
    color: white;
    letter-spacing: 0.10em;
}
.player-instructions{
    color: rgb(255, 255, 255);
    font-family: Noto Serif;
    font-weight: 100;
    letter-spacing: 0.11em;
    font-size: 1.2em;
}

.shield-container{
    /* min-width: 1000px; */
    /* max-width: 800px;  */
    margin-top: 5%;
    /* border: 2px solid red; */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 60px;
    padding: 40px;
    margin-bottom: 100px;
    justify-items: center;
    max-height: 400px;
}
.shield-item{
}
.shield-item img{
    width: 180px;
    /* width: 100%; */
    /* height: 200px; */
    transition: 0.5s;
    cursor: pointer;
}
.shield-item img:hover{
    opacity: 0.5;
}
.shild-item-focus img{
    width: 220px;
    /* border: solid yellow 3px; */
    /* width: 120%; */
    /* padding: 40px; */
    /* height: 300px; */
}
.shield-item:nth-child(1) img{
    /* border: solid 3px blue; */
}
#errorInstructions{
    margin-top: 0;
    opacity: 0;
}

.warning{
    animation: showThenGo 5s;
    color: rgb(255, 94, 0);
}

@keyframes showThenGo{
    1%  {opacity: 0;}
    5%  {opacity: 1;}
    90% {opacity: 1;}
    100%{opacity: 0;}
}

.coat-of-arms{
    display: grid;
    justify-self: center;
    width: 120px;
    padding: 50px;
}


.play-button{
    display: grid;
    justify-self: center;
    color: #FFCC00;
    font-size: 25px;
    border: 3px solid #FFCC00;
    padding: 10px;
    cursor: pointer;
    width: 200px;
    transition: 0.3s;
    opacity: 1;
}
.play-button:hover{
    background: rgba(255, 255, 255, 0.151);
}

.invisable{
    opacity: 0;
    cursor: default;
}


.victory-emblem{
    display: grid;
    justify-self: center;
    width: 400px;
}



.hide{
    display: none;
}