/***********************************************************************/
/*                                                                     */
/*                      PRIMARY CONTAINER STYLES                       */
/*                                                                     */
/***********************************************************************/
html {
    background: var(--black);
}

/* SET SITE-WIDE DEFAULT FONT AND BACKGROUND COLOUR */
body {
    background: var(--white);
    h1,h2,h3,h4,h5,h6 {
        font-family: LibMono-Reg, monospace;
    }
    p,a,li {
        font-family: Garamond-Reg, serif;
    }
}

/* SITE-WIDE NAV STYLE */
nav {
    background: var(--primary);
    box-shadow: 0px 0px 10px var(--black);
    ul {
        li {
            a {
                color: var(--white);
                font-family: LibMono-Bold;
                text-decoration: none;
            }
            a:hover {
                background: var(--white);
                color: var(--black);
            }
        }
    }
}

footer {
    background: var(--primary);
    color: var(--white);
}



/***********************************************************************/
/*                                                                     */
/*                          CONTAINER TAG STYLES                       */
/*                                                                     */
/***********************************************************************/

section {

}

div { 

}

article {

}

aside {

}

details {
    outline: 1px solid var(--primary);
    summary {
        background: var(--primary);
        color: var(--white);
    }
}

dialog {

}


/***********************************************************************/
/*                                                                     */
/*                         CUSTOM SECTION TAGS                         */
/*                                                                     */
/***********************************************************************/

section.hero {
    box-shadow: 0px 0px 10px var(--grey50);
}

section.show-borders {
    div { border: 1px solid var(--primary); text-align:center; padding:20px }
}

section.bg-grey {
    margin: 20px 0px 20px 0px;
    background: var(--grey10);
}


/***********************************************************************/
/*                                                                     */
/*                              UNIQUE TEXT                            */
/*                                                                     */
/***********************************************************************/
/* Mobile Screens */
@media only screen and (max-width: 768px) {
    address, time, blockquote, q, pre, code, abbr, dfn { font-size: 14pt; }
}

/* Tablet Screens */
@media only screen and (min-width: 768px) {
    address, time, blockquote, q, pre, code, abbr, dfn { font-size: 14pt; }
}

/* Desktop Screens */
@media only screen and (min-width: 992px) {
    address, time, blockquote, q, pre, code, abbr, dfn { font-size: 16pt; }
}

address {

}

time {

}

blockquote {
    border-left: 5px solid var(--grey50);
    font-family: Garamond-Italic;
}

q {
    font-family: Garamond-Italic;
}

cite {

}

pre {
    border-radius: 5px;
    box-shadow: inset 0px 0px 10px var(--grey20);
}

code {
    background: var(--grey70);
    color: var(--white);
    border-radius: 5px;
    box-shadow: inset 0px 0px 10px var(--black);
}

abbr {

}

dfn {

}


/***********************************************************************/
/*                                                                     */
/*                              ALTERING TEXT                          */
/*                                                                     */
/***********************************************************************/
span {

}

mark {

}


b {

}

em {

}

i {

}

u {

}

s {

}

strong {

}

sub {

}

sup {

}

ins {
    font-weight: 700;
    color: var(--sm-green);
}

del {
    font-weight: 700;
    color: var(--sm-red);
}

/***********************************************************************/
/*                                                                     */
/*                        OTHER SEMANTIC TAGS                          */
/*                                                                     */
/***********************************************************************/

search {

}

header {

}

/* Figures */
figure {

}

figcaption {

}

math {

}

var {

}

data {

}


/***********************************************************************/
/*                                                                     */
/*                                 LISTS                               */
/*                                                                     */
/***********************************************************************/

/* Mobile Screens */
@media only screen and (max-width: 768px) {
    ul, ol, li, dl, dt { font-size: 14pt; }
    dd { font-size: 12pt }
}

/* Tablet Screens */
@media only screen and (min-width: 768px) {
    ul, ol, li, dl, dt{ font-size: 14pt; }
    dd { font-size: 12pt }
}

/* Desktop Screens */
@media only screen and (min-width: 992px) {
    ul, ol, li, dl, dt { font-size: 16pt; }
    dd { font-size: 14pt }
}


ul {
    list-style: none;
}

ol {

}

li {
    
}

dl {
    outline: 1px solid var(--black);
    font-family: LibMono-Reg;
}

dt {
    font-family: LibMono-Bold;
}

dd {
    color: var(--grey60);
}



/***********************************************************************/
/*                                                                     */
/*                                 FORMS                               */
/*                                                                     */
/***********************************************************************/

form {
    background: var(--grey80);
    box-shadow: 0px 0px 20px var(--grey50);
    color: var(--white);
    div.formq {
        background: var(--white);
        color: var(--black);
        label {
            font-size: 18pt;
            font-family: Garamond-Reg;
            color: var(--grey80);
        }
        p.note {
            font-size: 12pt; 
            color: var(--grey60);
        }
        input {
            font-size: 18pt;
            font-family: LibMono-Reg;
            border-radius: 5px;
            outline: 1px solid var(--grey30);
        }
        select {
            font-size: 16pt;
            font-family: LibMono-Reg;
            outline: 1px solid var(--grey30);
            border-radius: 5px;
        }
        fieldset {
            font-family: LibMono-Reg;
            align-self: flex-start;
            border: 1px solid black;
            legend {
                font-size: 10pt;
                background: var(--grey60);
                color: var(--white);
            }
            input {
                font-size: 16pt;
                outline: none;
            }
            label {
                font-size: 14pt;
                font-family: LibMono-Reg;
            }
            
        }
    }
}


option {

}

optgroup {

}

/* Contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls. */
datalist {

}



/* Displays an indicator showing the completion progress of a task, typically displayed as a progress bar */
progress {

}

textarea {

}

/* Represents either a scalar value within a known range or a fractional value */
meter {  }

/* Container element into which a site or app can inject the results of a calculation or the outcome of a user action */
output {  }

/*  Displays the content of the currently selected <option> inside a closed <select> element */
selectedcontent {  }





/***********************************************************************/
/*                                                                     */
/*                                TABLES                               */
/*                                                                     */
/***********************************************************************/

table { border-color: var(--border-primary); }

/* Encapsulates a set of <tr> elements indicating they are a table's header, body, and footer data respectively */
thead {  }
tbody {  }
tfoot {  }

tr {  }
th {  }
td {  }

/* Table caption */
caption {  }

/* Defines one or more columns in a column group represented by its implicit or explicit parent <colgroup> element. 
The <col> element is only valid as a child of a <colgroup> element that has no span attribute defined. */
col {  }
colgroup {  }





table.headers1 { th { background: var(--primary); color: var(--white); } }

table, tr,td { font-family: LibMono-Reg; }
th { font-family: LibMono-Bold; }

table.collapse { border-collapse: collapse; }

table.border-none {
    border: none;
    th, tr,td { border: none; }
}

table.border-all {
    border: 1px solid black;
    border-collapse: collapse;
    tr,th,td { border: 1px solid black; }
}

table.border-outside {
    border: 1px solid var(--primary);
    border-collapse: collapse;
    tr,th,td { border: none; }
}

table.border-rows {
    border: 1px solid var(--primary);
    border-collapse: collapse;
    tr { border: 1px solid var(--primary); }
    th,td { border: none; }
}



/***********************************************************************/
/*                                                                     */
/*                             TEXT STYLES                             */
/*                                                                     */
/***********************************************************************/

/* For larger screens */
@media only screen and (min-width: 700px) {
    h1 { font-size: 40pt; }
    h2 { font-size: 32pt; }
    h3 { font-size: 24pt; }
    h4 { font-size: 18pt; }
    h5 { font-size: 16pt; }
    h6 { font-size: 16pt; }
    p { font-size: 16pt; }
    p.sm { font-size: 14pt }
    p.med { font-size: 16pt }
    p.lg { font-size: 20pt }
    p.xl { font-size: 26pt }
}

.center { text-align: center }

/* Mobile Screens */
@media only screen and (max-width: 768px) {
    h1 { font-size: 24pt; }
    h2 { font-size: 20pt; }
    h3 { font-size: 16pt; }
    h4,h5,h6 { font-size: 14pt; }
    p { font-size: 14pt }
    p.sm { font-size: 12pt }
    p.med { font-size: 14pt }
    p.lg { font-size: 18pt }
    p.xl { font-size: 22pt }
}

/* Tablet Screens */
@media only screen and (min-width: 768px) {
    h1 { font-size: 32pt; }
    h2 { font-size: 24pt; }
    h3 { font-size: 16pt; }
    h4,h5,h6 { font-size: 14pt; }
    p { font-size: 14pt }
    p.sm { font-size: 12pt }
    p.med { font-size: 14pt }
    p.lg { font-size: 18pt }
    p.xl { font-size: 22pt }
}

/* Desktop Screens */
@media only screen and (min-width: 992px) {
    h1 { font-size: 40pt; }
    h2 { font-size: 32pt; }
    h3 { font-size: 24pt; }
    h4,h5,h6 { font-size: 18pt; }
    p { font-size: 16pt }
    p.sm { font-size: 14pt }
    p.med { font-size: 16pt }
    p.lg { font-size: 20pt }
    p.xl { font-size: 26pt }
}


/***********************************************************************/
/*                                                                     */
/*                           LINK STYLES                               */
/*                                                                     */
/***********************************************************************/

/* Mobile Screens */
@media only screen and (max-width: 768px) { a { font-size: 14pt } }

/* Tablet Screens */
@media only screen and (min-width: 768px) { a { font-size: 14pt } }

/* Desktop Screens */
@media only screen and (min-width: 992px) { a { font-size: 16pt } }

main {
    a {
        color: var(--link-default);
        text-decoration: underline;
        font-weight: 900;
    }

    a:hover {
        color: var(--link-hover);
        text-decoration: none;
    }

    a:active {
        color: var(--link-active);
        text-decoration: underline;
    }

    a:visited {
        color: var(--link-visited);
        text-decoration: underline;
    }
}


/* LINKS AS BUTTONS */


a[class^="btn-"] {
    font-family: LibMono-Bold, monospace;
    p { font-family: LibMono-Reg; font-size: 14pt; }
}

a.btn-cta {
    background: var(--primary);
    border: none;
    outline: none;
    font-family: LibMono-Bold, monospace;
    color: var(--white);
    text-decoration: none;
}

a.btn-cta:hover {
    background: var(--grey50);
    color: var(--black);
}

a.btn-primary {
    background: var(--black);
    color: var(--white);
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    outline: none;
    text-decoration: none;
    h1,h2,h3,h4,h5,h6,p { color: var(--white); }
}

a.btn-primary:hover {
    background: var(--white);
    color: var(--black);
    outline: 2px solid var(--black);
    h1,h2,h3,h4,h5,h6,p { color: var(--black); }
}

a.btn-secondary {
    background: none;
    border: none;
    outline: 2px solid var(--primary);
    padding: 8px 16px;
    border-radius: 5px;
    color: var(--primary);
    text-decoration: none;
}

a.btn-secondary:hover {
    background: var(--primary);
    outline: none;
}

a.btn {
    text-decoration: none;
    color: inherit;
}

a.btn:hover {
    color: inherit;
}

/***********************************************************************/
/*                                                                     */
/*                       SEPARATOR LINE STYLES                         */
/*                                                                     */
/***********************************************************************/

hr { border:1px solid var(--grey50); }




/***********************************************************************/
/*                                                                     */
/*                              MULTIMEDIA                             */
/*                                                                     */
/***********************************************************************/

img {  }


/* Defines an area inside an image map that has predefined clickable areas. An image map allows geometric 
areas on an image to be associated with hyperlink. */
area {  }

/* Used with <area> elements to define an image map (a clickable link area). */
map {  }

/* Used to embed sound content in documents. It may contain one or more audio sources, represented using the 
src attribute or the source element: the browser will choose the most suitable one. It can also be the destination 
for streamed media, using a MediaStream. */
audio {  }  

/* Used as a child of the media elements, audio and video. It lets you specify timed text tracks (or time-based data), 
for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files)—Web Video Text Tracks.*/
track {  }  

/* Embeds a media player which supports video playback into the document. You can also use <video> for audio content, 
but the audio element may provide a more appropriate user experience. */
video {  }  

/* Container defining a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document. */
svg {  }


/***********************************************************************/
/*                                                                     */
/*                          EMBEDDED CONTENT                           */
/*                                                                     */
/***********************************************************************/

/* Embeds external content at the specified point in the document. This content is provided by an external 
application or other source of interactive content such as a browser plug-in. */
embed {  }

/* Represents a nested browsing context, like <iframe> but with more native privacy features built in. */
fencedframe {  }

/* Represents a nested browsing context, embedding another HTML page into the current one. */
iframe {  }

/* Represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin. */
object {  }

/* Contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios. */
picture {  }

/* Specifies multiple media resources for the picture, the audio element, or the video element. It is a void element, meaning 
that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in 
order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats. */
source {  }

/***********************************************************************/
/*                                                                     */
/*                           BUTTON STYLES                             */
/*                                                                     */
/***********************************************************************/

/* Default button if no classes are provided (same as .primary) */
button {
    background: var(--blue-main);
    outline: none;
    border: none;
    color: var(--white);
    font-size: 20pt;
}

button:hover {
    background: var(--blue-med);
}

/* Primary Buttons - background filled in */
button.primary {
    background: var(--btn-primary);
    outline: none;
    border: none;
    color: var(--white);
}

button.primary:hover { background: var(--btn-primary-hover); }
button.primary:active { background: var(--btn-primary-active); }
button.primary:disabled { background: var(--btn-primary-disabled); }

/* Secondary Buttons - no bg, with outline */
button.secondary {
    background: none;
    outline: 2px solid var(--blue-main);
    border: none;
    color: var(--blue-main);
}

button.secondary:hover { outline: 2px solid var(--btn-primary-hover); color: var(--btn-primary-hover);}
button.secondary:active { outline: 2px solid  var(--btn-primary-active); color: var(--btn-primary-active);}
button.secondary:disabled { outline: 2px solid var(--btn-primary-disabled); color: var(--btn-primary-disabled);}




button.fill { background: var(--primary); color: var(--white); }
button.fill:hover { background: var(--white); color: var(--primary); }

button.outline { outline: 2px solid var(--primary); color: var(--primary); background: var(--white);}
button.outline:hover { outline: none; color: var(--white); background: var(--primary); }

button.squared { border-radius: 0px }
button.rounded { border-radius: 10px }
button.circular { border-radius: 25px }


/* Button Font Sizes */
button.size24 { font-size:24pt }
button.size16 { font-size:16pt }










/***********************************************************************/
/*                                                                     */
/*                               IMAGES                                */
/*                                                                     */
/***********************************************************************/

img.fadein {
    width: 450px;
    height: auto;
    animation-duration: 2s;
    animation-name: fade;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-timing-function: linear;
}

img.floating {
    width: 450px;
    height: auto;
    animation-duration: 2s;
    animation-name: floating;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}


/***********************************************************************/
/*                                                                     */
/*                               MISC                                  */
/*                                                                     */
/***********************************************************************/

div.swatch {
    min-height:75px; min-width:75px;
    max-height:250px; max-width:250px;
    margin: 10px;
    aspect-ratio: 1/1;
    border-radius:50%;
}



/***********************************************************************/
/*                                                                     */
/*                     CUSTOM PAGE TEMPLATES                           */
/*                                                                     */
/***********************************************************************/


/* STYLES FOR THE "post" PAGE TYPE */
body.post {

}