/* || 1: Global Styles – (UTILITIES: body, paragraphs, lists, etc) || */

/* Sitewide minimalist reset for precise control and clarity */
* {
    padding: 0;
    margin: 0;
  }

html {
    font-size: 62.5%;  /* Reset to 10px base */
}

body {
    font-size: 1.6rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    background: url(/images/hex_background3.png);
}

h1,
h2,
h3   {
    text-align: center;
    margin: 1rem 0 1rem;
    font-family: 'Kalam', cursive;
}

h1 {
    font-size: 3.5rem;
    color: #2D36E6;
}

h2 {
    font-size: 3rem;
    color:#A3005A;
}

aside h3   {
    font-size: 2.2rem;
    color: purple;
}

nav h3 {
    color: #0057AD;
    margin-top: 0;
}

/*  || 2: Page Structure || */

/* Adding enhanced high-contrast accessibility to all links, whether tabbed through or hovered over (mouse) */
a:focus, a:hover{
    outline: none;
    border-color: #5311ee;
    box-shadow: 0 0 10px #5311ee;
    }

/*  || 3: Header || */

header {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 3rem;
}

header img {
    display: block;
    margin: 1.5rem auto 0;
}

/*  || 4: Navigation || */

nav ul {
    list-style-type: none;
    text-align: center;
}

nav ul li {
    display: inline-block;
    padding: .8rem .3rem;
}

nav ul li a {
    padding: 2rem .5rem;
}

nav ul li:first-of-type {
border-color: navy;
border: solid .125rem;
border-radius: 0rem 0rem 3rem .75rem;
background-color: #AB2121;
padding-right: 1.5rem;
position: fixed;
left: 0;
top: 0;
}

nav ul li:first-of-type a {
    padding-left: 1rem;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
}

/*  || 5: Main content || */

section {
    padding: 0 3rem 3rem;
}

section:first-child div:first-of-type {
    max-width: 80%;
    margin: 0 auto 3rem;
    max-width:800px;
    background-color: aliceblue;
    border: 1px solid purple;
        -webkit-border-radius:8px;	
        -moz-border-radius:8px;
    border-radius: 8px;
    padding-bottom: 0rem;
}

#its_new {
    float: left;
    width: 50%;
    padding-right: 2rem;
}

#its_wow {
    float: right;
    width: 50%;
    padding-left: 2rem;
}

#its_wow p:first-of-type {
    padding-bottom: 2rem;
}

.floaty {
    border-top: 1px solid rgba(255, 99, 71, 0.293);
    border-bottom: 1px solid rgba(255, 99, 71, 0.293);
    content: "";
    clear: both;
    display: table;
    padding-bottom: 2rem;
    padding: 0 0 3rem 0;
}

#work_h1 {
    font-size: 2.5rem;
}

/*  || 6: Asides || */

aside {
    padding: 0 3rem 3rem;
}

aside p span {
    color: #9E1800;
}

/*  || 7 Text Styles || */

strong {
    font-weight: 600;
}

ol, ul {
    margin: 0 auto;
}

div ol, div ul {
    margin-left: 5%;
}

ol + h2 + ul {
    padding-bottom: 1.5rem;
}

ol {
    list-style-image: url('/images/xbox-20.png');
}

h1 + ol li:last-of-type {
    padding-bottom: 1rem;
}

ul {
    list-style-image: url('/images/checkbox-20.png');
}

.maxwidth_800 {
    max-width:800px;
    margin: 0 auto;
}

.maxwidth_800 ul {
    margin-left: 20%;
}

.maxwidth_800 p {
    padding-bottom: 2rem;
}

/*  || 8: Forms || */

fieldset {
    padding: .1rem;
    color: #0057AD;
    background-color: #fff;
    max-width:800px;
    margin: 0 auto;
    border:1px solid purple;
        -webkit-border-radius:8px;	
        -moz-border-radius:8px;
    border-radius:8px;
}

fieldset > p {
    padding: .5rem;
}

fieldset li {
    list-style: none;
    padding: .5rem;
}

/* Extra nice fieldset legend visual enhancements learned from: https://www.456bereastreet.com/lab/styling-form-controls-revisited/legend/ */
fieldset legend {
    font-size: 2rem;
    padding: 1rem;
    text-align: center;
    color: purple;
    background-color: rgba(255, 240, 158, 0.267);
}

fieldset li p:first-of-type {
    padding: 1.8rem 0 0 0;
}

fieldset li p:last-of-type {
    padding: 0;
}

label {
    display: inline-block;
    clear: both;
    margin-right: .5rem;
}

/* Increasing input display properties */

input, textarea {
    font-size: 1.5rem;
    border: hsl(210, 100%, 90%) .1rem solid;
    border-radius: .4rem;
    margin: .2rem 0 0;
    padding: .3rem;
}

input:hover, textarea:hover {
    border: rgb(42, 65, 165) .1rem solid;
}

input:focus, textarea:focus {
    border: rgb(165, 42, 58) .1rem solid;
    background-color: rgba(253, 232, 192, .4);
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: hsl(355, 25%, 74%);
    opacity: 1; /* Firefox */
}

input[type="button"], 
input[type="reset"] {
    background-color: rgb(128, 12, 76);
    border: none;
    border-radius: 1rem;
    font-size: 1.25rem;
    letter-spacing: 0.1rem;
    font-weight: 600;
    color: white;
    padding: .5rem 1em .5rem 1rem;
    text-decoration: none;
    margin: 1rem 2rem 1rem 0;
    cursor: pointer;
    border: rgb(247, 202, 121) 1px solid;
  }

  input[type="button"]:hover, 
  input[type="reset"]:hover {
      background-color: rgb(63, 63, 243);
}

input[type="checkbox"] + label {
    margin-right: .1rem;
    padding: .4rem 1.5rem .4rem .4rem;
}

input[type="checkbox"]:focus + label, 
input[type="checkbox"]:hover + label {
    background-color: rgb(63, 63, 243);
    border-radius: 4px;
    color: #fff;
}

input[type="radio"] {
    opacity: 0;
    width: 0;
    margin-bottom: 2rem;
}

input[type="radio"] + label {
    display: inline-block;
    background-color: rgb(250, 249, 217);
    padding: .5rem 1rem;
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.07rem;
    border: .05rem solid rgb(42, 4, 212);
    border-radius: 4px;
    margin-right: 1rem;
    margin-left: .3rem;
}

input[type="radio"]:focus + label, 
input[type="radio"]:hover + label {
    background-color: #fff;
    color: #000;
}

input[type="radio"]:checked + label {
    background-color:rgb(42, 4, 212);
    color: rgb(250, 249, 217);
    border-color: rgb(181, 248, 181);
}

/* NOTE: CSS styling ideas to enhance radio button accessibility for visitors with extra needs were found at this location [https://markheath.net/post/customize-radio-button-css] along with research at the MDN. Full credit noted for the coding ideas, which I used as inspiration for my own variants.  */

p + ul li:nth-of-type(2) {
margin-top: 2rem;
}

/*  || 9: Footer || */

footer {
    border-top: 1px solid  rgba(255, 99, 71, 0.293);
    background-color: rgb(253, 247, 214);
    padding: 3rem;
}

footer p {
    padding-bottom: 1rem;
}

footer strong {
    color: #0057AD;
    font-weight: 600;
}

footer p img {
    float:left;
    margin: .5rem 1rem 0 0;
}

footer p:last-of-type {
    clear: both;
    margin-top: 1rem;
}

/*  || 10: Extras || */

/* "Return to top of page" link (sitewide/all pages) */

.return_to_top {
    position: fixed;
    bottom: 0;
    right: 0;
    border: none;
    background-color: #AB2121;
    color: #fff; /* Text color */
    padding: 12px; /* Some padding */
    border-radius: 1.5rem 0 0 0;/* Rounded corners */
    font-size: 1.5rem; /* Increase font size */
  }

/* Global box-sizing fix (from https://css-tricks.com/box-sizing/) */

html {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    box-sizing: border-box;
}

  *, *:before, *:after {
        -webkit-box-sizing: inherit;
        -moz-box-sizing: inherit;
    box-sizing: inherit;
}

/* Columns */

.two-column {
        -webkit-columns: 300px 2;
        -moz-columns: 300px 2;
    columns: 300px 2;
    column-gap: 5rem;
        -webkit-column-gap: 5rem;
        -moz-column-gap: 5rem;
    column-rule: 1px solid rgb(220, 202, 236);
        -webkit-column-rule: 1px solid rgb(220, 202, 236);
        -moz-column-rule: 1px solid rgb(220, 202, 236);
        padding: 2rem;
}

.two-column h2 {
    margin-top: 0;
    font-family: 'Libre Baskerville', serif;
    font-size: 1.5rem;
    font-weight: 300;
    color: #2D36E6;
}

.two-column p {
    padding-bottom: 1.5rem;
    break-inside: avoid;
}

/*  || 99: Credits and ancillary notes  || */
/* Font-size reset idea from multiple sources: this specific usage modified from: https://snook.ca/archives/html_and_css/font-size-with-rem */