/* This Nav was made with Navlink :^] ~ Paste your key into https://melonking.net/free/link to edit this nav!
Your Navlink Key:                
N4IgRgNg9gxg1gZxALhMAOiALgQ0gU02QG1MALLLABwWQHo6APAOhigFtMAacym+ugDcoELABMATjgDuCBB3wIsAVwBmq5gDt8sAJZZdi5lAkBzbr2q0GYBHACezHFSoWQFKwLG6EbCWOZTcxAAXR4QMRxcImIMEBwiTDcsRPAoSg43ZRiABnChHNFJGTkVdUwwzF0YgEZ8rGl9LHwJZipNYJCAXy44hJQkkHCUgbSMziHMbJRiACZ8qgkoVV0IfCERcSlZeXZFMo1bB2Z5GF0cCArw6pm6zDpIZUVj9s6evtTk1LB0rEzJkDTEgAZny+AAKgBhACaACUEABVMTSK5VWr5by+EwBV4VLrdIYgBD4Si6DpIZCgSBQRgAORwghQVJw8FMS2UmjEAEl2DhTPgUCBNFBtITVGtGAAxaDSQVLWVcEAAK2USl0qnskJFzU0WEFMHwupahNMzkFNRyVEYhLY0AkgoAxDkcsCAGwAFhwYu1kpw7FW9kFAHEdGZzt7dQBlXQALwFqBqAA4rYSqDgxN4OubLdaeuBoIwAELQeBMkBpjNk0yCgCsVoABK6U4qfv5jahZg3hdp6w6AJyzPvOnKE1tiFqw9O6VXm5sgcX4KUy-UiZTsTSEsj4XSmCiCxPAlN53TsauU9zb3d61AHucnvn4WGG8cSKuCqi6Rj4CBRfBiEB5ggaYbuemJUD+gaoN2Ap5l6lJ5mQUCCC0kI-nIgqmMuioIPo+AIrCAAygoAV0QA
                        
*/
/*-- These files are linked for fonts and hover effects --> 
  <link href="https://forum.melonland.net/melonland_common_fonts.css" rel="stylesheet" />
<link href="https://forum.melonland.net/melonland_common_anims.css" rel="stylesheet" /> */
    @keyframes fadeInAnimation {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        .fadeintext {
            color: white;
            font-family: 'main';
            font-size: 5rem;
            text-align: auto;
            margin-top: 20%;
            align-items: auto;
            flex-flow: row;
            display: flex;
            justify-content: center;
            height: 150px;
            margin: -1 auto;
            
            animation: fadeInAnimation ease 2s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }
        
    body{
        font-family: 'main';
        background: linear-gradient(#020017, #1f0126);
        min-height: 95vh;
        width: 150px;
        max-width: 100vh;
        margin: 0 auto;
        text-align: center;
     }
     
       #bloxNav {
            display: flex;
            align-items: center;
            padding: 2px;
            flex-flow: row;
            justify-content: center;
            gap: 100px;
            font-size: 18px;
            margin: auto;
            font-family: 'main';
            max-width: 100%;

        }

        #bloxNav,
        #bloxNav a,
        #bloxNav a:visited {
            color: #fffca8;
        }

        #bloxNav a {
            width: 100%;
            text-decoration: none;
        }

        .bloxBlock {
            background-color: undefined;
            padding: 7px 8.4px;
            border: 0px dashed #929000;
            border-radius: 1px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-flow: column;
            gap: 3px;
            height: 153px;
            font-family: 'main';
        }

        .bloxBlock img,
        .bloxBlock span {
            display: inline-block;

        }

        .bloxBlock img {
            height: 128px;
            image-rendering: undefined;
        }
        .bloxBlock span {
            display: inline-block;
        }
        .bloxBlock:hover {
            cursor: pointer;
        }
        
@media (max-width: 600px) {
  #bloxNav {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
}
#bloxNav a {
    width: auto;
  }
    
    #linkNav {
        display: flex;
        align-items: center;
        padding: 2px;
        background-color: undefined;
        justify-content: center;
        max-width: max-content;
        gap: 100px;
    }

    #linkNav,
    #linkNav a,
    #linkNav a:visited {
        color: #00364a;
    }


    .links {
        position: fixed;
        background-color: undefined;
        border: 0px none #929000;
        padding: 7px 8.4px;
        border-radius: 1px;
        text-align: bottom;
        display: flex;
        flex-direction: column; 
        align-items: center;
        justify-content: center;
        gap: 15px;
        bottom: 0;
        left: 0;
        width: 50px;

    }

    .linkBlock img,
    .linkBlock span {
        display: inline-block;
        vertical-align: middle;

    }

    .linkBlock img {
        width: 63px;
    }
    
#miscNav {
        display: flex;
        align-items: center;
        padding: 2px;
        background-color: undefined;
        justify-content: center;
        max-width: max-content;
        flex-flow: column;
        flex-direction: column; 
    }

    #miscNav,
    #miscNav a,
    #miscNav a:visited {
        color: #00364a;
    }


    .misc {
        position: fixed;
        background-color: undefined;
        border: 0px none #929000;
        padding: 7px 8.4px;
        border-radius: 1px;
        text-align: bottom;
        display: flex;
        flex-flow: column;
        flex-direction: column; 
        gap: 15px;
        bottom: 0;
        right: 0px;
        width: 50px;

    }

    .miscBlock img,
    .miscBlock span {
        display: inline-block;

    }

    .miscBlock img {
        width: 63px;
    }


@keyframes onclick {
  from {
    opacity: 0;
    position: fixed;
    top: 100%;
  }
  to {
    opacity: 1;
    position: fixed;
    top: 0%;
  }
}

dialog {
    background: transparent;
    border: none;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: scaleY(0);
    animation: onclick ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    
    transition:
    opacity 0.7s ease-out,
    transform 0.7s ease-out,
    overlay 0.7s ease-out allow-discrete,
    display 0.7s ease-out allow-discrete;
}

dialog:open {
  opacity: 1;
  transform: scaleY(1);
}

dialog::backdrop{
  transition:
    display 0.7s allow-discrete,
    overlay 0.7s allow-discrete,
    background-color 0.7s;
}

dialog iframe{
  display: block;
  width: 100%;
  height: 100%;
}

dialog button {
    padding: 0;
    border: none;
    background: transparent;
    position: fixed;
    top: 8%;
    right: 66.6%;
    z-index: 2;
}

dialog button:hover{
  cursor: pointer;
}

dialog button img {
    width: 70px;
    height: auto;
    background: transparent;
}