@font-face {
    font-family: "ALTTP Reg Font";
    src: url("../assets/fonts/alttp/ReturnofGanon.ttf") format('truetype');
}

@font-face {
    font-family: "Classic Console";
    src: url("../assets/fonts/classic_console_neue/clacon2.ttf") format('truetype');
}

@font-face {
    font-family: "Airstrike";
    src: url("../assets/fonts/airstrike/airstrikechrome.ttf") format('truetype');
}

@keyframes expandButton {
    from {
        transform: scale(1);
        background-color: #d9aece;
    }
    to {
        transform: scale(1.2);
        background-color: #e31572;
    }
}

@keyframes colorPulse {
    0%, 100% {
        background-color: #d9aece;
    }
    50% {
        background-color: #d9aece;
    }
}

@keyframes Jesus {
    0% {
        right: 1.25vw;
        top: 5.5vh;
    }
    20% {
        right: calc(1.25vw -3 px);
        top: calc(5.5vh + 5px);
    }
    40% {
        right: calc(1.25vw + 5px);
        top: calc(5.5vh - 3px);
    }
    60% {
        right: calc(1.25vw - 3px);
        top: calc(5.5vh + 4px);
    }
    80% {
        right: calc(1.25vw + 4px);
        top: calc(5.5vh - 6px);
    }
    100% {
        right: calc(1.25vw - 2px);
        top: calc(5.5vh + 5px)
    }
}

* {
    box-sizing: border-box;
    color: #dbcde7;
}

body {
    cursor: url("../assets/cursors/mj.cur"), auto;
}

#container {
    position: fixed;
    display: grid; 
    grid-auto-columns: 1fr; 
    grid-template-columns: 0.7fr 1.6fr 0.7fr; 
    grid-template-rows: 0.1fr 0.5fr 0.25fr 3.4fr 0.6fr; 
    gap: 0px 0px; 
    grid-template-areas: 
      ". . ."
      ". main-content-title-field ."
      ". . ."
      ". main-content-field ."
      ". . ."; 
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("../assets/images/purple-waves.jpg");
    background-size: cover;
}

#border-img-top {
    position: absolute;
    top: 0.5vh;
    left: 0;
    height: 4vh;
    width: 100%;
    background-image: url("../assets/images/glossy-hearts.gif");
    background-repeat: repeat;
    z-index: 3;
}

.content-box {
    background-color: #19052a;
    border: 6px ridge #b275e4;
    border-radius: 8px;
}

#main-content-field {
    grid-area: main-content-field;
    font-family: "Classic Console", sans-serif;
    font-size: 1.25em;
    overflow-y: scroll;
    padding: 20px;
    z-index: 2;
}

#main-content-title-field {
    grid-area: main-content-title-field;
    display: flex;
    color: #dbcde7;
    font-family: "Airstrike";
    font-size: 2.2em;
    width: 70%;
    margin: 2.5vh auto 0 auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    z-index: 1;
    background-color: #19052a;
    border: 6px ridge #b275e4;
    border-radius: 15px;
}

.button {
    position: absolute;
    font-family: "ALTTP Reg Font", sans-serif;
    font-weight: bold;
    font-size: 2em;
    color: #5f09ab;
    height: 7.5vh;
    width: 8vw;
    top: 20vh;
    z-index: 3;
    text-align: center;
    border: 4px inset #670cb6;
    background-color: #d9aece;
    border-radius: 25px;
    transform: scale(1);
    transition: transform 0.5s ease;
    box-shadow: 2px 8px 1px #150127d6;
}

.button:hover {
    transition: #d9aece 0.5s ease;
    animation-name: colorPulse 1s infinite alternate;
    animation-duration: 0.25s;
    animation-iteration-count: infinite;
    cursor: url("../assets/cursors/gam1184.cur"), auto;
}

.button-animate {
    animation: expandButton 1s infinite alternate;
    transform: scale(1.2);
    background-color: #e31572;
}

#home-button {
    float: left;
    left: 28vw;
}

#sitemap-button {
    float: right;
    right: 28vw;
}

#bottom-bar {
    position: fixed; 
    display: flex;
    justify-content: space-around;
    align-items: center;
    bottom: 0;
    left: 0;
    height: 7vh;
    width: 100%;
    border-top: 6px ridge #b275e4;
    background-color: #19052a;
}

#cpm {
    position: relative;
    height: 170vh;
    width: 100%;
}

img {
    position: absolute;
}

#img-1 {
    left: 5vw;
    top: 27vh;
    height: 5vh;
    z-index: 3;
}

#img-2 {
    right: 1.25vw;
    top: 18.75vh;
    height: 20vh;
    border: 4px solid #b275e4;
}

#img-3 {
    left: 7vw;
    top: 25vh;
    height: 15vh;
}

#img-4 {
    right: 1.25vw;
    top: 39.25vh;
    height: 28vh;
    border: 4px solid #b275e4;
    z-index: 2;
}

#img-5 {
    left: 1.5vw;
    top: 42vh;
    height: 24vh;
}

#img-6 {
    left: 16.25vw;
    top: 42vh;
}

#img-7 {
    left: 16.25vw;
    top: 49.75vh;
}

#img-9 {
    left: 1.5vw;
    top: 67vh;
    border: 3px solid #b275e4;
}

#img-10 {
    right: 0vw;
    bottom: 14vh;
    height: 20vh;
    margin-right: -1vw;
    z-index: 3;
}

#img-11 {
    left: 1vw;
    bottom: 7.5vh;
    z-index: 2;
}

#img-12 {
    right: 1vw;
    bottom: 7.5vh;
    z-index: 3;
}

#img-13 {
    left: 17.2vw;
    top: 32vh;
    height: 12vh;
    z-index: 2;
}

#img-14 {
    right: 17.375vw;
    top: 19vh;
}

#img-15 {
    left: 16.3vw;
    top: 59vh;
}

#img-16 {
    right: 10vw;
    bottom: 8vh;
    height: 18.5vh;
    z-index: 2;
}

#img-17 {
    left: 1.425vw;
    top: 74.5vh;
    height: 9vh;
}

#img-18 {
    left: 13.5vw;
    top: 19vh;
    z-index: 2;
}

#img-19 {
    right: 17.4vw;
    top: 24.25vh;
}

#img-20 {
    left: 13vw;
    bottom: 11.5vh;
    height: 15vh;
    z-index: 1;
}

#img-21 {
    right: 16.4vw;
    top: 39.75vh;
}

#img-22 {
    right: 17.7vw;
    top: 28vh;
    height: 13vh;
}

#img-23 {
    left: 25vw;
    top: 1vh;
    height: 19vh;
    z-index: 2;
}

#img-24 {
    right: 25vw;
    top: 1vh;
    height: 19vh;
    z-index: 2;
}

#img-25 {
    left: 10vw;
    top: 33.85vh;
    height: 8.9vh;
    z-index: 2;
}

#img-26 {
    left: 16vw;
    top: 23vh;
    height: 8vh;
    z-index: 2;
}

#img-27 {
    right: 32.13vh;
    top: 48vh;
    height: 13.25vh;
    border: 3px solid #b275e4;
    z-index: 2;
}

#img-28 {
    left: 15vw;
    top: 5vh;
    height: 12vh;
    z-index: 2;
}

#img-29 {
    left: 6vw;
    bottom: 30vh;
    height: 11.75vh;
    z-index: 2;
}

#img-30 {
    left: 27vw;
    bottom: 7vh;
    height: 6vh;
    z-index: 2;
}

#img-31 {
    right: 27vw;
    bottom: 7vh;
    height: 6vh;
    z-index: 2;
}

#img-32 {
    left: 0.25vw;
    top: 4vw;
    height: 22vh;
}

#img-33 {
    right: 17.5vw;
    top: 9.75vh;
    height: 9vh;
    z-index: 2;
}

#img-34 {
    right: 15vw;
    bottom: 24vh;
    border: 2px solid #b275e4;
    border-radius: 60px;
}

#img-35 {
    right: 36vw;
    top: 14vh;
    height: 12vh;
    z-index: 2;
}

#img-36 {
    left: 34.5vw;
    top: 13vh;
    z-index: 2;
}

#img-37 {
    left: 38vw;
    top: 15vh;
    z-index: 2;
}

#img-38 {
    right: 2vw;
    top: 35vh;
    height: 16vh;
    z-index: 2;
}

#img-39 {
    right: 1.25vw;
    top: 5.5vh;
    animation-name: Jesus;
    animation-duration: 0.2s;
    animation-iteration-count: infinite;
}

#img-40 {
    right: 8.5vw;
    bottom: 22vh;
    height: 10vh;
    border: 2px solid #b275e4;
}

#img-41 {
    top: 1.5vh;
    right: 38vw;
    z-index: 2;
}

#img-42 {
    top: 4vh;
    right: 33vw;
    z-index: 2;
}

#img-43 {
    top: 24.25vh;
    left: 1vw;
    height: 19vh;
    border: 2px solid #b275e4;
}

#img-44 {
    top: 19vh;
    left: 43vw;
    height: 14vh;
    border: 2px solid #b275e4;
}

#img-45 {
    top: 21vh;
    right: 42.75vw;
}