/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
HTML content. To learn how to do something, just try searching Google for questions like
"how to change link color." */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nabla&display=swap');

* {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #0D0C1D #A69CAC;
    font-family: "DM Mono", monospace;
}

body {
    overflow-x: hidden;
    background-color: #a69cac;
    opacity: 1.0;
    background: radial-gradient(circle, transparent 20%, #a69cac 20%, #a69cac 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #a69cac 20%, #a69cac 80%, transparent 80%, transparent) 25px 25px, linear-gradient(#f1dac4 2px, transparent 2px) 0 -1px, linear-gradient(90deg, #f1dac4 2px, #a69cac 2px) -1px 0;
    background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
    color: #0D0C1D;
}

h1
{
    font-family: "Nabla", system-ui;
    text-shadow: 5px 5px 3px #0D0C1D;
}

a, h1
{
    text-decoration: none;
}

button
{
    font-size: 1em;
    background-color: #bfcde0;
    color: #000505;
    border: 2px solid #3b3355;
    padding: 2px 2%;
    margin: auto 1%;
    cursor: pointer;
}

#site-title
{
    color: #A69CAC;
    margin: 0 1%;
}

#site-title h1
{
    font-size: 2em;
}

#home
{
    margin: 10% 0;
    text-align: center;
}

#home h1
{
    font-size: 8vw;
}

#home button
{
    font-size: 1.5em;
    padding: 0 5%;
}


#button-bar
{
    width: 100%;
    background-color: #3b3355;
    border: 2px solid #0D0C1D;
    border-radius: 3px;
    padding: 1%;
    margin-bottom: 5%;
    text-align: center;
}

#center-site
{
    display: flex;
    height: auto;
}

#content-site
{
    width: 80%;
    max-height: 500px;
    padding: 20px;
    background-color: #bfcde0;
    border: 2px solid #0D0C1D;
    border-radius: 3px;
    overflow-x: hidden;
}

#widget-bar
{
    width: 20%;
    height: auto;
    margin: 0 20px;
    background-color: #3b3355;
    border: 2px solid #0D0C1D;
    border-radius: 3px;
    text-align: center;
}

#blinky-grid
{
    margin: 5% 0;
    text-align: center;
}

#blinky-grid img
{
    max-width: 100%;
}

.site-button:hover
{
    background-color: #F1DAC4;
    box-shadow: 5px 5px 5px #0D0C1D;
}

.site-button:active {
    font-size: 1.5em;
}

.marquee-container {
    height: 40px;
    line-height: 30px;
    color: #F1DAC4;
    font-size: 22px;
    
    .marquee {
        bottom: 20px;
        left: 100%;
        width: 100%;
        position: fixed;
        white-space: nowrap;
        animation: marquee 15s linear infinite;
        background-color: #0D0C1D;
    }
    
    .marquee2 {
        animation-delay: 7.5s;
    }
    
    b {
        padding-left: 10px;
    }
}

@keyframes marquee {
    0% {
        left: 100%;
    }
    100% {
        left: -100%
  }
}

.caption
{
    color: #F1DAC4;
    background-color: #0D0C1D;
    padding : 10px;
}

.caption img
{
    width: 100%;
    height: 60%;
    object-fit:cover;
}

.caption span
{
    font-size: 0.8em;
    height: 40%;
    text-align: center;
}