/* || 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%;  
}

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;
}


/*   CSS FILTER EXAMPLE #1 --- Drop shadow on text and border   */
h2 {
    border: inset blue 7px;
    color:#A3005A;
    filter: drop-shadow(3px 3px 3px rgba(25, 102, 165, 0.65));
    font-size: 6rem;
    margin: 4rem 0;
}

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

main p {
    line-height: 1.4;
}

main p:nth-of-type(3) {
    margin-bottom: 5rem;
}

/*  || 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 || */

#maincontent {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin: auto;
    max-width: 1300px;
}

section {
}
   
section:first-of-type { 
    grid-area: 1 / 1 / 2 / 2;
    /* border: rgb(228, 13, 77) 8px solid; */
    padding: 0 3rem 3rem;

}

/*  CSS FILTER EXAMPLE #2 --- SET BASE STATE */
/*   CSS FILTERS: Blur, Brightness, Grayscale   */
section:nth-of-type(2) {
    /* border: rgb(27, 13, 228) 8px solid; */
    filter: blur(7px) brightness(.65) grayscale(.82) sepia(.3);
    grid-area: 2 / 1 / 3 / 2;
    margin: auto;
}

/*  CSS FILTER EXAMPLE #2 --- ANIMATION */
/*   CSS FILTERS: Blur, Brightness, Grayscale   */
section:nth-of-type(2):hover {
animation: filter-animation 500ms;
animation-fill-mode: forwards;
}

@keyframes filter-animation {
    0% {
        filter: blur(5px) brightness(.7) grayscale(80%);
    }
    25% {
        filter: blur(4px) brightness(.75) grayscale(70%);
    }
    40% {
        filter: blur(3px) brightness(.8) grayscale(60%);
    }
    60% {
        filter: blur(2px) brightness(.85) grayscale(40%);
    }
    85% {
        filter: blur(1px) brightness(.9) grayscale(20%);
    }
    100% {
        filter: blur(0) brightness(1) grayscale(0);
    }
}

section:nth-of-type(2) .thief-image { 
    background-image: url("/images/cartoon-thief-1242.jpg");
    background-repeat: no-repeat;
    border: rgb(38, 39, 1) 2px solid;
    display: grid;
    grid-template-columns: 1fr 1242px 1fr;
    grid-template-rows: 300px;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    height: 873px;
    width: 1244px;
}

.wrapper {
    /* border: rgb(255, 0, 55) 2px dotted; */
    display: grid;
    grid-template-columns: 207px 207px 207px 207px;
    grid-template-rows: 373px;
    grid-column-gap: 93px;
    margin-left: 75px;
    margin-top: 155px;
}

section:nth-of-type(2) div {
    /* border: rgb(128, 88, 3) 2px solid; */
    height: 240px;
    width: 203px;
}

/*  CSS TRANSFORM EXAMPLE #1 */
/*  CSS TRANSITION EXAMPLE #1 */
.wrapper > div {
    background: linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0),
    linear-gradient(135deg, transparent 37%, #a85 0, #a85 63%, transparent 0),
    linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753;
    background-size: 5px 5px;
    transform-origin: top;
    transition: transform .45s ease-in;
    border-bottom: rgb(38, 39, 1) 8px solid;
}
/*  NOTE: Decorative window shade background texture was found at: https://leaverou.github.io/css3patterns/#chocolate-weave */

.wrapper > div:hover {
    transform: scale(1, .05);
}

section:first-of-type p:nth-of-type(2) {
    margin-bottom: 1rem;
    text-align: justify;
}

section:nth-of-type(2) div:nth-of-type(5) {
    margin-left: -8px;
    margin-top: 1px;
}

section:nth-of-type(2) div:nth-of-type(6) {
    margin-left: -8px;
    margin-top: 1px;
}

section:nth-of-type(2) div:nth-of-type(7) {
    margin-left: -8px;
    margin-top: 1px;
}

section:nth-of-type(2) div:nth-of-type(8) {
    margin-left: -8px;
    margin-top: 1px;
}

/*  || 6: Asides || */

aside {
    /* border: rgb(128, 3, 111) 2px solid; */
    margin: 2rem;
    text-align: center;
}

aside h3 {
    color: #2D36E6;
    display: inline-block;
    /* border: rgb(128, 88, 3) 2px solid; */
    left: 50%;
    margin-left: -15%;
}

/*  CSS ANIMATION EXAMPLE #1: Text animation fade to reveal hidden text underneath */
/* Fade in */
.fade-in-text {
  background-color: rgba(255, 230, 108, 0.299);
  border: pink .5px solid;
  border-radius: 3rem;
  font-size: 2.4rem;
  margin-top: .3rem;
  opacity: .5;
  padding: .1rem 5rem;
  position: absolute;
  left: 50%;
  margin-left: -15%;
}

/* Fade out */
.fade-out-text {
  color: rgb(188, 14, 107);
  font-size: 3rem;
  margin-top: 0;
  position: absolute;
  background-color: #fff;
  opacity: 1;
}

.fade-out-text:hover {
    animation-name: flip-stretch-space-color, fadeOut;
    animation-timing-function: ease-in, ease-out;
    animation-duration: 1250ms, 3000ms;
    animation-fill-mode: forwards;
    font-size: 3rem;
    margin-top: 0;
    opacity: 0;
    position: absolute;
}

/*  CSS ANIMATION EXAMPLE #1a: Text fips up, grows, changes color, and letter spacing changes */
@keyframes flip-stretch-space-color {
    0% {
        transform:
        rotateX(0deg)
        scale(1.0);
    }

    25% {
        transform:
        rotateX(20deg)
        scale(1.1);
    }
  40% {
        transform:
        rotateX(40deg)
        scale(1.2);
    }
  60% {
        transform:
        rotateX(60deg)
        scale(1.3);
    }
  85% {
        transform:
        rotateX(80deg)
        scale(1.4);
    }

    100% {
        color: rgb(0, 26, 255);
        transform:
        rotateX(90deg)
        scale(1.5)    
    }
}

  /*  CSS ANIMATION EXAMPLE #1b: Text AND background fade away */
  /*  PLEASE NOTE: Animation has been slowed down to show off effect for assignment grading purposes only */
@keyframes fadeOut {
  0% {
        opacity: 1;
  }
  20% {
        opacity: .85;
  }
  40% {
        opacity: .65;
  }
  60% {
        opacity: .45;
  }
  80% {
        opacity: .5;
  }
  100% {
        opacity: .0;
  }
}

aside:first-of-type p {
    /* border: rgb(128, 3, 111) 2px solid; */
    margin-top: 6rem;
    margin-left: 20%;
    max-width: 800px;
    text-align: left;
}

aside:nth-of-type(2) {
    display: table;
    max-width: 600px;
}

aside:nth-of-type(2) p {
    display: table-cell;
    font-size: 1.5rem;
    min-width: 400px;
    vertical-align: middle;
}

.hint {
    border: rgb(128, 3, 111) 2px solid;
    padding: 1rem;
}

/*  CSS TRANSFORM EXAMPLE #2 */
/*  CSS TRANSITION EXAMPLE #2 */
.arrow {
    /* border: rgb(128, 88, 3) 2px solid; */
    max-width: 650px;
    margin-left: 65%;
    transition: 0.35s transform ease-in;
}

.arrow:hover {
    transform: rotate(-75deg) translate(300px, 100px);
    filter: drop-shadow(1px 1px 8px rgb(183, 243, 255));
}

/*  || 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 {
    font-size: 1.2rem;
    padding-top: 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;
}