/*Elements*/

header {
    
    width: 100%;
    display: flex;
    justify-content: center;
    
}


body {
    
    background-color: black;
    
    font-family: monospace;
    color: greenyellow;
    text-shadow: 0 0 5px green, 0 0 5px green, 0 0 5px green, 0 0 5px green, 0 0 50px green, 0 0 5px green, 0 0 5px green;
    
}

p {
    
    margin: 20px;
    max-width: 500px;
    
}

table, th, td, tr {
    
    border: 1px solid;
    
}

/*class*/

.column {
    
    position: relative;
    float: left;
    width: 50%;
    
}

.pulsate {
    
    position: relative;
    
    animation: Pulsate infinite;
        animation-duration: 2s;
    
}

.blueBox {
    
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.imgContainer {
    
    position: relative;
    right: 120px;
    top: 30px;
    
}

.infoImg {
    
    max-width: 100%;
    max-height: 250px;
    
}

.hidden {
    
    width: 0%;
    height: 0%;
    opacity: 0;
    position: absolute;
    transition: 1s ease-in-out;
    
}

.visible {
    
    width: 100%;
    height: 100%;
    opacity: 1;
    display: block;
    position: absolute;
    image-rendering: pixelated;
    transition: 1s ease-in-out;
    
}

.centered {
    
    text-align: center;
    display: flex;
    justify-content: center;
    
}



/*ID*/

#title {
    
    width: 100%;
    max-width: 700px;
    
}

#blueBoxImg {
    
    width: 476px;
    height: auto;
    
}

#button1 {
    
    position: absolute;
    top: 60px;
    left: 285px;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0;
    
    border-radius: 12px;
    transition: box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
    
}

#button2 {
    
    position: absolute;
    top: 60px;
    left: 345px;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0;
    
    border-radius: 12px;
    transition: box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
    
}

#button3 {
    
    position: absolute;
    top: 60px;
    left: 407px;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0;
    
    border-radius: 12px;
    transition: box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
    
}

#button4 {
    
    position: absolute;
    top: 120px;
    left: 285px;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0;
    
    border-radius: 12px;
    transition: box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
    
}

#button5 {
    
    position: absolute;
    top: 120px;
    left: 345px;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0;
    
    border-radius: 12px;
    transition: box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
    
}

#button6 {
    
    position: absolute;
    top: 120px;
    left: 407px;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0;
    
    border-radius: 12px;
    transition: box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
    
}

#button7 {
    
    position: absolute;
    top: 182px;
    left: 285px;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0;
    
    border-radius: 12px;
    transition: box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
    
}

#button8 {
    
    position: absolute;
    top: 182px;
    left: 345px;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0;
    
    border-radius: 12px;
    transition: box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
    
}

#button9 {
    
    position: absolute;
    top: 182px;
    left: 407px;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0;
    
    border-radius: 12px;
    transition: box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
    
}

#button0 {
    
    position: absolute;
    top: 244px;
    left: 347px;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0;
    
    border-radius: 12px;
    transition: box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
    
}

#hashtag {
    
    position: absolute;
    top: 244px;
    left: 406px;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0;
    
    border-radius: 12px;
    transition: box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
    
}

#star {
    
    position: absolute;
    top: 244px;
    left: 285px;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0;
    
    border-radius: 12px;
    transition: box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
    
}

#button1:hover {
    
    opacity: 1;
    box-shadow: 0 0 1px rgb(182, 255, 0), 0 0 10px rgba(152, 255, 0, 0.8), 0 0 10px rgba(152, 255, 0, 0.98);
    border-radius: 12px;
}

#button2:hover {
    
    opacity: 1;
    box-shadow: 0 0 5px rgb(182, 255, 0), 0 0 10px rgba(152, 255, 0, 0.8), 0 0 10px rgba(152, 255, 0, 0.98);
    border-radius: 12px;
}

#button3:hover {
    
    opacity: 1;
    box-shadow: 0 0 5px rgb(182, 255, 0), 0 0 10px rgba(152, 255, 0, 0.8), 0 0 10px rgba(152, 255, 0, 0.98);
    border-radius: 12px;
}

#button4:hover {
    
    opacity: 1;
    box-shadow: 0 0 5px rgb(182, 255, 0), 0 0 10px rgba(152, 255, 0, 0.8), 0 0 10px rgba(152, 255, 0, 0.98);
    border-radius: 12px;
}

#button5:hover {
    
    opacity: 1;
    box-shadow: 0 0 5px rgb(182, 255, 0), 0 0 10px rgba(152, 255, 0, 0.8), 0 0 10px rgba(152, 255, 0, 0.98);
    border-radius: 12px;
}

#button6:hover {
    
    opacity: 1;
    box-shadow: 0 0 5px rgb(182, 255, 0), 0 0 10px rgba(152, 255, 0, 0.8), 0 0 10px rgba(152, 255, 0, 0.98);
    border-radius: 12px;
}

#button7:hover {
    
    opacity: 1;
    box-shadow: 0 0 5px rgb(182, 255, 0), 0 0 10px rgba(152, 255, 0, 0.8), 0 0 10px rgba(152, 255, 0, 0.98);
    border-radius: 12px;
}

#button8:hover {
    
    opacity: 1;
    box-shadow: 0 0 5px rgb(182, 255, 0), 0 0 10px rgba(152, 255, 0, 0.8), 0 0 10px rgba(152, 255, 0, 0.98);
    border-radius: 12px;
}

#button9:hover {
    
    opacity: 1;
    box-shadow: 0 0 5px rgb(182, 255, 0), 0 0 10px rgba(152, 255, 0, 0.8), 0 0 10px rgba(152, 255, 0, 0.98);
    border-radius: 12px;
}

#button0:hover {
    
    opacity: 1;
    box-shadow: 0 0 5px rgb(182, 255, 0), 0 0 10px rgba(152, 255, 0, 0.8), 0 0 10px rgba(152, 255, 0, 0.98);
    border-radius: 12px;
}

#hashtag:hover {
    
    opacity: 1;
    box-shadow: 0 0 5px rgb(182, 255, 0), 0 0 10px rgba(152, 255, 0, 0.8), 0 0 10px rgba(152, 255, 0, 0.98);
    border-radius: 12px;
}

#star:hover {
    
    opacity: 1;
    box-shadow: 0 0 5px rgb(182, 255, 0), 0 0 10px rgba(152, 255, 0, 0.8), 0 0 10px rgba(152, 255, 0, 0.98);
    border-radius: 12px;
}

@keyframes Pulsate {
    0% {
        text-shadow: 0 0 5px green, 0 0 5px green, 0 0 5px green, 0 0 5px green, 0 0 50px green, 0 0 5px green, 0 0 5px green;
    }
    20% {
        text-shadow: 0 0 5px #cf0ca6, 0 0 5px #cf0ca6, 0 0 5px #cf0ca6, 0 0 5px #cf0ca6, 0 0 50px #cf0ca6, 0 0 5px #cf0ca6, 0 0 5px #cf0ca6;
    }
    
    100% {
        text-shadow: 0 0 5px green, 0 0 5px green, 0 0 5px green, 0 0 5px green, 0 0 50px green, 0 0 5px green, 0 0 5px green;
    }
}