@import url('https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&family=ZCOOL+KuaiLe&display=swap');

html {
    background-image: url("./images/StarsBackground2.gif");
    font-family: "ZCOOL KuaiLe", sans-serif;
}

.site-container {
    display:flex;
    justify-content:space-around;
    flex-wrap: wrap;
}

.sidebar, .content, .header, .footer {
    padding: 10px;
    margin: 20px;
    outline-style: double;
    outline-color: blueviolet;
    background-image: linear-gradient(rgb(238, 126, 255, 0.90), rgb(206, 194, 255, 0.90));
    /* background-color: hsl(240, 100%, 85%, 0.85); */
    border-radius: 12px;
}

.sidebar {
    flex:2;
}

.content {
    flex: 5; 
}

.header {
    position: sticky;
    background-image: radial-gradient(rgb(238, 126, 255, 0.80), rgb(206, 194, 255, 0.80));
    font-family:"Rubik moonrocks", sans-serif;
}

.blinkies {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}

img {
    padding: 1px;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 7cm) {
    .site-container {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
}