@font-face {
    font-family: 'pkmn';
    src: url('./resources/PokemonClassic.woff') format('woff'),
         url('./resources/PokemonClassic.ttf') format('truetype');
}  

body {
    margin: 0;
    padding: 0;
    min-height: fit-content;
}

#main {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    flex-direction: column;
}

#contents-container{
    display: inline-block;
}

svg {
    height: 77vmin;
    background-repeat: no-repeat;
    background-size: cover;
    transition: opacity 0.5s ease;
    border-style: groove; 
    border-width: 4px;
}

#buttons {
    background-color: rgb(62, 64, 78);
    height: 17vmin;
    border-style: groove;
    border-width: 4px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.overlay-wrapper {
    position: relative;
    align-items: center;
}

.textbox-container {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 25%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

#cctv-textcontainer {
    bottom: 0.25vh;
}

#face-textcontainer {
    top: 0.25vh;
}

#lights-textcontainer {
    top: 0.25vh;
}

.textbox{
    font-family: pkmn;
    font-size: 1.5vmin;
    width: 80%;
    height: 70%;
    background-color: rgb(221, 221, 221);
    border-radius: 3%;
    border-style:double;
    border-width: 8px;
    border-color: rgb(62, 64, 78);
    display: flex;
    justify-content: space-between;
}

.text{
    margin-top: 0.2rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.text span {
    opacity: 0;
}

.text span.revealed {
    opacity: 1;
}

.text span a.red {
    color: red;
}

.text span a.green {
    color: rgb(19, 183, 19);
}

.text span a.orange {
    color: rgb(236, 134, 45);
}

.text span a.pink {
    color: rgb(206, 85, 105);
}

.text span a.blue {
    color: rgb(24, 82, 158);
}

.next-arrow {
    position: absolute;
    bottom: 1.5vmin;
    right: 9vmin;
    opacity: 0.6;
}

.next-arrow:after {
    content:'';
    width: 0;
    height: 0;
    border-top: 1.2vmin solid;
    border-left: 1.2vmin solid transparent;
    border-right: 1.2vmin solid transparent;
}

.textbox:hover{
    border-color: gray;
}

.textbox:hover .next-arrow{
    opacity: 1;
    color: rgb(147, 11, 11);
}

.textbox:hover .text span{
    color: gray;
}

.icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon img {
    max-height: 14vmin;
    max-width: 14vmin;
    border-style: groove; 
    border-width: 4px;
    border-color: white;
}

.selectedIcon {
    filter: invert(1);
}

.icon img:hover{
    border-color: gray;
}

.hide {
    display: none;
}

.highlight:hover {
    filter: url(#highlight-shadow);
}

/* Reset the filter when not hovering */
.rect[filter="url(#highlight-shadow)"] {
    filter: none;
}

@media (pointer:none), (pointer:coarse), (hover: none) {
    .highlight {
        filter: url(#highlight-shadow);
    }
    svg {
        max-height: 95vmin;
        max-width: 95vmin;
        min-inline-size: 90%;
        background-repeat: no-repeat;
        background-size: cover;
        transition: opacity 0.5s ease;
        border-style: groove; 
        border-width: 4px;
    }
    .textbox:hover{
        border-color: inherit;
    }

    .textbox:hover .text span{
        color: inherit;
    }

    .icon img {
        max-height: 8vmin;
        max-width: 8vmin;
        border-style: groove; 
        border-width: 4px;
        border-color: white;
    }

    #buttons {
        background-color: rgb(62, 64, 78);
        max-height: 12vmin;
        border-style: groove;
        border-width: 4px;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .textbox{
        font-family: pkmn;
        font-size: 2vmin;
        width: 90%;
        height: 90%;
        background-color: rgb(221, 221, 221);
        border-radius: 3%;
        border-style:double;
        border-width: 8px;
        border-color: rgb(62, 64, 78);
        display: flex;
        justify-content: space-between;
    }

    .next-arrow {
        position: absolute;
        bottom: 1.5vmin;
        right: 9vmin;
        opacity: 0.6;
    }

    .next-arrow:after {
        content:'';
        width: 0;
        height: 0;
        border-top: 1.2vmin solid;
        border-left: 1.2vmin solid transparent;
        border-right: 1.2vmin solid transparent;
    }
}