.flex-container {
    display: flex;
    flex-flow: wrap;


    padding: 20px;
}

.info-button {
    background-color: rgba(134, 190, 255, 0.13);

    border-radius: 5px;
    margin: 10px;
    padding: 15px;
    flex-basis: 300px;

    color: white;
    flex-grow: 1;
    outline: 2px solid rgba(157, 218, 247, 0.274);
    border-bottom: 2px solid rgba(206, 219, 255, 0.26);
    box-shadow: 0px 0px 15px 0px #000000;

}

.info-button-emphasis {
    background-color: rgba(37, 230, 255, 0.37);
    outline: 2px solid rgba(91, 236, 255, 0.5);
    border-bottom: 2px solid rgba(91, 236, 255, 0.7);
   
}

.info-button:hover {
    box-shadow: 0px 0px 15px 0px #51ceff;
    background-color: rgb(0, 159, 165);
    outline: 2px solid rgb(123, 241, 250);
    border-bottom: 2px solid rgb(255, 255, 255);
    animation-name: hoveroutline;
    animation-duration: 0.3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.logo {
    width: 320px;
    margin: 30px auto;
    animation-name: myAnimation;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.footer{
    padding:20px;
    width:fit-content;
    background-color:#0f042c;
    margin:0 auto;
    border-radius: 15px;
}
.footer p {
    text-align: center;
    color:rgba(255, 255, 255, 0.705);
}
.logo img {
   

}
a{
    text-decoration: none;
}


.background {
    background-color: rgb(11, 11, 36);

    /*image-rendering: pixelated;*/
    background-image: url("res/night_sky.png");

    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

body {
    font-family: "Atkinson Hyperlegible", sans-serif;
    color: white;
    padding: 0px;
    margin: 0px;
}

.page-content {
    max-width: 1000px;
    margin: 0 auto;
}

p {
    margin: 0px;
    color: rgb(253, 253, 253);

    font-size: 16px;
}

h3 {
    font-size: 24px;
}

h1,
h2,
h3,
h4 {

    padding: 0px;
    margin: 0px;
}

@keyframes myAnimation {
    0% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(0px, -5px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes hoveroutline {
    0% {
        outline: 2px solid rgb(123, 241, 250);
         box-shadow: 0px 0px 15px 0px #51ceff;
    }

    50% {
        outline: 2px solid rgb(211, 252, 255);
         box-shadow: 0px 0px 18px 0px #8fdfff;
    }

    100% {
        outline: 2px solid rgb(123, 241, 250);
         box-shadow: 0px 0px 15px 0px #51ceff;
    }
}