/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes spin
{

    0%
    {
        transform: rotate(0deg) scale(1);
    }

    50%
    {
        transform: rotate(180deg) scale(1.5);
    }

    100%
    {
        transform: rotate(360deg) scale(1);
    }

}




/* ==========================================================================
   FONTS
   ========================================================================== */

   @font-face
   {
       font-display: block;
       font-family: "Font Awesome 5 Free";
       font-weight: 900;
       src:
           url(https://tools.domify.co.uk/includes/fonts/free-fa-solid-900.woff2) format("woff2"),
           url(https://tools.domify.co.uk/includes/fonts/free-fa-solid-900.ttf) format("truetype");
   }




/* ==========================================================================
   MAIN
   ========================================================================== */

@media only screen and (max-width: 580px)
{

    #logo,
    .masthead__logo
    {
        width: 40px;
    }

    #site-title,
    .masthead__site-title
    {
        font-size: 2rem;
    }

}

#page-title,
.main__title
{
    font-size: 6rem;
    margin-bottom: 1rem;
}

@media only screen and (max-width: 680px)
{

    #page-title,
    .main__title
    {
        font-size: 5rem;
    }

}

#page-description,
.main__description
{
    margin-bottom: 6rem !important;
}

h2
{
    font-size: 3rem;
}

#status.error,
.status-container.error .status-container__status
{
	color: #ff5e40;
}

#throbber,
.status-container__throbber
{
    animation: spin 2s linear infinite;
    display: inline-block;
    margin: 0 0 6rem 0;
}

#throbber::before,
.status-container__throbber::before
{
    color: var(--accent-colour);
    content: "\f674";
    display: inline-block;
    font-family: bootstrap-icons;
    font-size: 6rem;
}

#content
{
    border-top: 2px solid #424242;
    columns: 2;
    column-gap: 2rem;
    margin-top: 4rem;
    padding-top: 4rem;
}

@media only screen and (max-width: 747px)
{

    #content
    {
        columns: 1;
        column-gap: 0;
    }

}

#content section
{
    break-inside: avoid;
}

.two-columns
{
    columns: 2;
    column-gap: 20px;
}


/*
   Form elements
   ========================================================================== */

.form-row
{
	margin: 0 0 20px;
}

.form-row.three-columns
{
    columns: 3;
}

@media only screen and (max-width: 580px)
{

    .form-row.three-columns
    {
        columns: 1;
    }

}

button:disabled,
.button:disabled,
input[type="reset"]:disabled,
input[type="submit"]:disabled,
input[type="checkbox"]:disabled,
input[type="radio"]:disabled,
input[type="number"]:disabled,
input[type="text"]:disabled,
input[type="url"]:disabled,
textarea:disabled
{
    opacity: .5;
    pointer-events: none;
}

fieldset
{
    border: 1px solid #424242;
    border-radius: 3px;
    margin: 0;
    max-width: 600px;
    padding: 40px 20px;
}

fieldset legend
{
    font-size: 1.4rem;
    font-weight: 200;
    line-height: 1.3;
}

input[type="checkbox"],
input[type="radio"]
{
    -webkit-appearance: none;
    appearance: none;
    border: none;
    font-size: 2.2em;
    left: 0;
    margin: 0 10px 0 0;
    outline: none;
    position: absolute;
    transition: 200ms opacity;
}

input[type="checkbox"]::before,
input[type="radio"]::before
{
    color: var(--accent-colour);
    content: "\f5d5";
    display: inline-block;
    font-family: bootstrap-icons;
    font-size: 4rem;
}

input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before
{
    content: "\f5d6";
}

input[type="checkbox"]:focus,
input[type="radio"]:focus
{
    outline: none;
}

input[type="file"]
{
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 0.1px;
    z-index: -1;
}

input[type="number"]:read-only,
input[type="text"]:read-only,
input[type="url"]:read-only,
textarea:read-only
{
    border-left-color: #1a1a1a !important;
}

input[type="number"]::placeholder,
input[type="text"]::placeholder,
input[type="url"]::placeholder
{
    color: #aaa;
}

.checkbox-label
{
    line-height: 4rem;
    padding-left: 54px;
    position: relative;
}

textarea
{
    height: 200px;
}


/*
   Tables
   ========================================================================== */

table
{
    border-collapse: separate;
    width: 100%;
}

table th,
table td
{
    border-bottom: 1px solid #424242;
    line-height: 1.3;
    padding: 20px 10px;
    text-align: left;
}

table th
{
    border-bottom-width: 2px;
    font-family: "Francois One", sans-serif;
    font-size: 1.8rem;
    text-transform: uppercase;
}

table td:nth-child(2)
{
    overflow-wrap: anywhere;
}

table tr:last-child td
{
    border-bottom: none;
}

@media (max-width: 800px)
{
    
    table.responsive th
    {
        display: none;
    }

    table.responsive tr
    {
        border-bottom: 1px solid #424242;
        display: block;
    }

    table.responsive td
    {
        border-bottom: none;
        display: block;
        text-align: right;
    }

    table.responsive td:before
    {
        content: attr(data-title) ":";
        display: inline-block;
        float: left;
        font-weight: 700;
    }

}