/* ------------------------------------------------------------------------- */
/* -- Font style, size, and color. ----------------------------------------- */

/* Show selection as white text upon an yellow background. */
::selection {
    background-color: #366591;
    color: #ffffff;
}

/* Set default font style, and color. */
* {
    color: black;
    font-family: "Courier Prime";
}

/* Default font size. */
html {
    background-color: #F1F8FF;
    font-size: 1.5em;
}

/* Font size of h* elements. */
h1 {
    font-size: 1.75em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.4em;
}

b {
    color: #0C2134;
}

section#meetings {
    background: #E1F1FF;
}

/* Styling of meeting title. */
span.meeting-title {
    font-size: 1.1em;
    font-style: italic;
    font-weight: bold;
}

/* Highlight nominations and awards. */
span.nomination,
span.award {
    color: #366591;
    font-style:italic
}

/* Adjust font size to screen size. */
@media only screen and (max-width: 770px) {
    html {
        font-size: 1.4em;
    }

    h1 {
        font-size: 1.6em;
    }
}

@media only screen and (max-width: 500px) {
    html {
        font-size: 1em;
    }

    h1 {
        font-size: 1.4em;
    }
}


/* ------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------- */
/* -- Margin and padding.  ------------------------------------------------ */

header {
    /* Add bottom border to header. */
    border-bottom: /*line-width:*/ 3px /*line-style:*/ solid /*color:*/ #000000;
}

/* Margin of h1 element in the header. */
header > h1 {
    margin: /*top:*/.75em /*right:*/0 /*bottom:*/.5em /*left:*/0;
}

/* No space between an h2 element and the following text. */
h2 {
    margin-block-end: 0;
}

/* Body element occupies the entire page. */
body {
    margin: /*top:*/0 /*right:*/0 /*bottom:*/0 /*left:*/0;
    padding: /*top:*/0 /*right:*/0 /*bottom:*/0 /*left:*/0;

    /* Setting required to make footer stick to the bottom. */
    position: relative;
    min-height: 100vh;
}

/* Create space for the bottom stripes. */
main {
    padding-bottom: 120px;
}

/* Class to add left and right margins. */
.container {
    width: 767px;
    margin: /*top:*/0 /*right:*/auto  /*bottom:*/0 /*left:*/auto;
    padding: /*top:*/0 /*Right:*/0  /*bottom:*/0 /*left:*/0;
}

/* Class to add vertical spacing (usually to a container). */
.vertical-spacing {
    margin-top: 30px;
}

/* Spacing between meeting entries. */
li.meeting {
    margin-bottom: 20px;
}

section#meetings {
    margin-bottom: 50px;
}

/* Adjust margin and width according to screen size. */
@media only screen and (max-width: 770px) {
    /* Set variable width. */
    .container {
        width: 94%;
    }
    /* Make pictures smaller. */
    img#mini-lapras {
        width: 70px;
    }
    img#big-lapras {
        width: 100px;
    }

    p#quote {
	font-size: 0.9em;
    }

    section#meetings {
        margin-bottom: 10px;
    }
}

/* ------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------- */
/* -- Links. --------------------------------------------------------------- */

/* Basic appearance (visited or not). */
a:link,
a:visited {
    color: #FFC527;
    text-decoration: none;
}

/* Underline link when hovering over it. */
a:hover {
    color: #FFC527;
    text-decoration: underline #FFC527;
    text-decoration-thickness: 2px;
}

/* Remove underline upon click. */
a:active {
    text-decoration: none;
}

/* ------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------- */
/* -- Classes. ------------------------------------------------------------- */

/* Stripes extend horizontally over the entire page. */
.stripe {
    width: 100%;
    height: 8px;
}

.rule {
    width: 100%;
    height: 16px;
}

/* ------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------- */
/* -- Footer. -------------------------------------------------------------- */

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
 }
 /* ------------------------------------------------------------------------- */
