/* styles.css */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap');

:root {
  --primary-color: #3498db;
  --spacing-unit: 8px;
}

header {
    h1 {
        background-color: color-mix(in hsl, hsl(0, 0%, 100%), var(--primary-color, hsl(0, 0%, 100%)));
        color: red;
        padding: 1cm;
        font-size: 3rem;
        padding: 9px 9px 9px 9px;
        text-align: center;
        max-width: 100%;
        min-width: 100%;
        position: static;
    }
    h3 {
        background-color: color-mix(in hsl, hsl(0, 0%, 100%), var(--primary-color, hsl(0, 0%, 100%)));
        color: black;
        text-align: left;
        font-size: 2vh;
    }
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;

    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: var(--spacing-unit, 8px);
    padding-right: var(--spacing-unit, 8px);

}

body {
    background-color: color(srgb 1 1 1);
    color: black;
    display: block;

    p {
        display: block;
        font-size: 1.2em;
    }

    ul {
        margin: 20px;
        padding: 10pt;
    }
    margin: 30px 30px 30px 30px;

    border-style: dashed;
    border-width: 5px;
    border-color: lightblue;
    border-radius: 25px;

    strong {
        color: rebeccapurple;
        text-decoration: underline;
    }
}


footer {
    margin: auto;
    background-color: hsl(0, 0%, 100%);
    color: rgb(0, 0, 0);
    padding: 20px;
    text-align: left;
}

#meeting-password {
    display: none;
}

.block {
    display: block;
    flex-direction: column;
    padding: 10px;
    margin: 5px;
    width: auto;
    border: 1px solid black;
    position: relative;
}

.inline-block {
    align-items: center;
    display: inline-block;
    flex-direction: column;
    background-color: #ccffcc;
    padding: 10px;
    margin: 5px;
    width: 150px;
    border: 1px solid green;
    text-align: center;
}

.inline {
    display: inline;
    background-color: #ccccff;
    padding: 10px;
    margin: 5px;
    border: 1px solid blue;
}

h1, h2, h3, p {
    font-family: 'Source Sans Pro', sans-serif;
}

ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    padding: 10px;
}

ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-columns: 200px;
    justify-items: left;
    height: auto;
}

/* This also counts as a pseudo-class selector*/
form button:hover {
    background-color: #2980b9;
}

form button:active {
    background-color: #1a5276;
}


@media screen and (max-width: 600px) {
    h2{
        gap: 10px;
    }

    ul {
        width: auto;
        flex-wrap: wrap;
    }

    ol {
        grid-template-columns: 1fr;
    }

    section {
        max-width: 100%;
    }

    .inline {
        display: inline-block;
        width: auto;
        flex-wrap: wrap;
    }

}


* {
    color: black;
}

input[type="text"] {
    border: 1px solid rebeccapurple;
}


header > h1 {
    letter-spacing: 1px;
}

h2 ~ p {
    color: black;
}

h2 + p {
    margin-top: 0;
}

div.block {
    background-color: #f9f9f9;
}

section:has(table) {
    padding: 20px;
}