.FrontText {
    color: rgb(0, 17, 0);
    font-size: 15vh, 15vw;
    font-size: 25px;
    top: 50px;
    border: 3px solid green;
    border-radius: 15px;
    background-size: 100px 150px;
    background-color: rgba(00, 150, 00, 0.5);
    padding: 15px;
    align-items: center;
    justify-content: middle;
    display: flex;
    flex-direction: row;
    position: fixed;
    z-index: 100;
}
.background {
    background-image: url('IMG_0388.webp');
}
.menuButtonList {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;
    border: 5px solid rgb(0, 172, 0);
    background-color: rgba(0, 121, 0, 0.5);
    margin-top: 25px;
}

form {
    display: inline-block;
}

body {
    font-family: 'LarpFont', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
footer {
    background-image: url('LarpFooterBG.png');
    image-rendering: pixelated;
    background-repeat: repeat;
    background-size: 190px 190px;
    padding: 200px;
    border: 5px solid rgb(46, 0, 172);
}
#Logo {
    position: fixed;
    padding-right: 50px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    width: 200px;
    height: 200px;
}

.ShopButton {
    background: transparent;
    border: none;
    animation: colorChange 0s ease-in-out;
}

.ShopButton:hover {
    animation: none;
    background-color: transparent;
    border: none;
}

button {
    font-family: 'LarpFont', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 25px;
    border: 5px solid rgb(0, 172, 0);
    background-color: rgb(0, 121, 0);
    border-radius: 15px;
    padding: 15px;
    transition: transform 1s smooth;
}

a {
    font-family: 'LarpFont', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 25px;
    border: 5px solid rgb(0, 172, 0);
    background-color: rgb(0, 121, 0);
    border-radius: 15px;
    padding: 15px;
    transition: transform 1s smooth;
    text-decoration: none;
    color: black;
}

a:hover {
    text-decoration: none;
    color: rebeccapurple;
    font-family: 'LarpFont', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 25px;
    border: 5px solid rgb(0, 121, 0);
    background-color: rgb(0, 172, 0);
    border-radius: 15px;
    padding: 15px;
    animation: colorChange 0.5s ease;
    color: rebeccapurple;
    background-color: rgb(52, 0, 153);
}

button:hover {
    font-family: 'LarpFont', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 25px;
    border: 5px solid rgb(0, 121, 0);
    background-color: rgb(0, 172, 0);
    border-radius: 15px;
    padding: 15px;
    animation: colorChange 0.5s ease;
    color: rebeccapurple;
    background-color: rgb(52, 0, 153);
}

@font-face {
    font-family: "LarpFont";
    src: url("Cute Dino.ttf");
}
#LarpcicleLeft {
    transform: scaleX(-1);
    scale: 1.5;
    image-rendering: pixelated;
}
#menu {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#LarpcicleRight {
    scale: 1.5;
    image-rendering: pixelated;
    padding-left: 75px;
}
#LarpcicleRight:hover {
    content: url("BlushLarpcicle.gif");
}
#LarpcicleLeft:hover {
    content: url("BlushLarpcicle.gif");
    transform: scaleX(-1);
}
#NavySealMarquee {
    display: flex;
    top: 0px;
    left: 0px;
    width: 100%;
    font-family: 'LarpFont', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 25px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid black;
    border-radius: 5%;
    transition: transform 0.5s ease;
    box-shadow: 2px 2px 2px 2px;
    background-color: #ccdb79;
    padding: 15px;
}

#ShopArea {
    transition: background-color 1.0s ease, transform .5s ease, color 1.0s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.5s ease;
    margin-top: 300px;
}


#Intro {
    transition: background-color 1.0s ease, transform .5s ease, color 1.0s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease;
    z-index: -100;
}

.IMG1 {
    transition: 1.0s ease, transform .5s ease, color 1.0s ease;
}


.IMG1:hover {
  background-color: white;
  color: white;
  transform: rotate(25deg);
  transform: translate(5px, 0px);
  }

.BackgroundImage {
    display: flex;
    position: absolute;
    z-index: -2;
}

.callBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.5rem;
    cursor: pointer;
    border: 2px solid transparent;
    text-decoration: none;
}

#LarpyGuyList {
    transition: background-color 1.0s ease, transform .5s ease, color 1.0s ease;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease;
    padding: 15px;
    margin: 25px;
    gap: 15px;
    background-image: url('BranchBackground.jpg');
    background-size: 100px 150px auto;
}

.LarpyGuy {
    width: 300px;
    height: 400px;
    transform: translatey(0px);
    animation: hovering 6s ease-in-out infinite;
    cursor: pointer;
    margin: 25px;
    filter: drop-shadow(10px 10px 10px rgb(37, 62, 255));
}

.LarpyGuy4 {
    width: 300px;
    height: 400px;
    transform: translatey(0px);
    animation: hovering 6s ease-in-out infinite;
    cursor: pointer;
    margin: 25px;
    filter: drop-shadow(10px 10px 10px rgb(255, 102, 0));
}

.LarpyGuy2 {
    width: 300px;
    height: 400px;
    transform: translatey(0px);
    animation: hovering 6s ease-in-out infinite;
    cursor: pointer;
    margin: 25px;
    filter: drop-shadow(10px 10px 10px rgb(61, 1, 61));
}

.LarpyGuy3 {
    width: 300px;
    height: 400px;
    transform: translatey(0px);
    animation: hovering 6s ease-in-out infinite;
    cursor: pointer;
    margin: 25px;
    filter: drop-shadow(10px 10px 10px rgb(85, 149, 179));
}

.LarpyGuy:hover {
    transform: scale(1.5);
    animation: hovering 6s ease-in-out infinite;
}

.larpyGuy2:hover {
    transform: scale(1.5);
    transition: bouncy 1s ease;
}

@keyframes colorChange {
    0% {
        color: rgb(0, 0, 0);
        background-color: rgb(0, 121, 0);
    }
    100% {
        color: rgb(102, 51, 153);
        background-color: rgb(52, 0, 153);
    }
}

@keyframes hovering {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-40px);
    }
    100% {
        transform: translatey(0px);
    }
}

@keyframes bouncy {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(2);
    }
    15% {
        transform: scale(1);
    }
    35% {
        transform: scale(2.5);
    }
    40% {
        transform: scale(1);
    }
    60% {
        transform: scale(1.5);
    }
    65% {
        transform: scale(1);
    }
    75% {
        transform: scale(2.5);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes reflection {
    0% {
        transform: scaleX(1);
    }
    25% {
        transform: scaleX(-1);
    }
    50% {
        transform: scaleX(1);
    }
    75% {
        transform: scaleX(-1);
    }
    100% {
        transform: scaleX(1);
    }
}

@keyframes squash {
    0% {
        transform: scaleX(1);
        transform: scaleY(1);
    }
    25% {
        transform: scaleX(5.5);
        transform: scaleY(3.5);
    }
    50% {
        transform: scaleX(1);
        transform: scaleY(1);
    }
    75% {
        transform: scaleX(0.5);
        transform: scaleY(2.5);
    }
    100% {
        transform: scaleX(1);
        transform: scaleY(1);
    }
}

.infoImage {
    height: 300px;
    width: 500px;
    margin-right: 25px;
    transition: 1.0s ease, transform .5s ease, color 1.0s ease;
}

.infoImage2 {
    height: 300px;
    width: 500px;
    margin-right: 25px;
    transition: 1.0s ease, transform .5s ease, color 1.0s ease;
}

.infoImage2:hover {
    animation: bouncy 1s ease-in-out;
}

#infoList {
    display: flex;
    justify-content: left;
    padding: 15px;
    margin: 25px;
    background-image: linear-gradient(to bottom right green, cyan);
}

.infoImage:hover {
    transform: rotate(180deg);
}

.info {
    display: flex;
    justify-content: left;
}

.infoImage3 {
    height: 300px;
    width: 500px;
    transition: 1.0s ease, transform .5s ease, color 1.0s ease;
}

.infoImage3:hover {
    animation: squash 0.5s ease-in-out;
}

.infoImage4 {
    height: 300px;
    width: 500px;
    transition: 1.0s ease, transform .5s ease, color 1.0s ease;
}

.infoImage4:hover {
    animation: reflection 1s ease-in-out infinite;
}

#LarpyVideo {
    transition: background-color 1.0s ease, transform .5s ease, color 1.0s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.5s ease;
    margin-left: 700px;
    margin-bottom: 105px;
}


#PlushPopup {
    position: fixed;
    background-color: rgb(0, 121, 0);
    padding: 20px;
    border: 5px solid rgb(51, 83, 211);
    z-index: 1000;
    align-items: center;
    display: hidden;
    flex-direction: row;
    border-radius: 15px;
}
#PlushPopup2 {
    position: fixed;
    background-color: rgb(0, 121, 0);
    padding: 20px;
    border: 5px solid rgb(37, 62, 255);
    z-index: 1000;
    align-items: center;
    flex-direction: row;
    border-radius: 15px;
}
#PlushPopup3 {
    position: fixed;
    background-color: rgb(0, 121, 0);
    padding: 20px;
    border: 5px solid rgb(53, 1, 95);
    z-index: 1000;
    align-items: center;
    flex-direction: row;
    border-radius: 15px;
}
#PlushPopup4 {
    position: fixed;
    background-color: rgb(0, 121, 0);
    padding: 20px;
    border: 5px solid rgb(255, 102, 0);
    z-index: 1000;
    align-items: center;
    flex-direction: row;
    border-radius: 15px;
}
#PopupList {
    position: fixed;
    background-color: rgb(0, 121, 0);
    padding: 20px;
    border: 5px solid rgb(53, 1, 95);
    z-index: 1000;
    align-items: center;
    border-radius: 15px;
}

.PopupImage {
    width: 600px;
    height: 400px;
}

#PopupContents1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.SaleButton {
    font-family: 'LarpFont', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 40px;
    border: 5px solid rgb(0, 172, 0);
    background-color: rgb(0, 121, 0);
    border-radius: 15px;
    padding: 15px;
}

.SaleButton:hover {
    font-family: 'LarpFont', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 25px;
    border: 5px solid rgb(8, 8, 8);
    border-radius: 15px;
    padding: 15px;
    color: rgb(96, 91, 100);
    background-color: rgb(64, 62, 67);
    animation: none;
    content: "hell nah";
}

#Popup1Column1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

#Popup1Column2 {
    display: flex;
    color: black;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}