/* 
 Module 17 Assignment - FINAL
 Taylor Jones
 5/19/25
*/

@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Major+Mono+Display&family=Quicksand:wght@300..700&display=swap');

/*Palette: https://coolors.co/palette/0d1b2a-1b263b-415a77-778da9-e0e1dd */
:root{
    --palette1: rgba(13, 27, 42, 1);
    --palette2: rgba(27, 38, 59, 1);
    --palette3: rgba(65, 90, 119, 1);
    --palette4: rgba(119, 141, 169, 1);
    --palette5: rgba(224, 225, 221, 1);
}

* {
    box-sizing: border-box;
}

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default ruleset in a "mobile first" approach */

body {
    background: var(--palette1);
    background: linear-gradient(325deg, var(--palette1) 0%, var(--palette2) 25%,
            var(--palette3) 50%, var(--palette4) 75%, var(--palette5) 100%);
    width: 95vw;
    margin: auto;
    max-width: 1200px;
}

header,
footer,
.followme,
.dropdown>ul {
    border: 0.5em solid white;
    border-radius: 3em;
    background: var(--palette2);
    color: white;
    max-width: 100%;
    margin: 1em 0 1em 0;
}

h1 {
    font-size: 2em;
    color: white;
    margin: 0;
}

h2 {
    text-decoration: underline;
    font-style: italic;
    font-weight: bolder;
    text-align: center;
}

article p {
    text-align: left;
    line-height: 2em;
    padding: 0 2em 0 2em;
}

figure div img {
    max-width: 100%;
    padding: 0.5em 0 0.5em 0;
}

nav .followme div,
aside .followme div {
    display: grid;
}

.followme img,
.followme h3,
.followme div .navbutton,
.navbutton {
    margin: 0.5em 1em 1em 1em;
    padding: 1em 0em 1em 0em;
    text-decoration: none;
    list-style-type: none;
}

.followme div .quicklink {
    margin: 0.5em 0em 1em 0em;
}

img {
    max-width: 100%;
}

figcaption {
    text-align: center;
    padding-top: 1em;
}

header {
    text-align: center;
    font-family: "Major Mono Display", monospace;
}

main {
    background: var(--palette5);
    color: black;
    border: 0.5em solid white;
    border-radius: 3em;
}

.navbutton,
h3 {
    border-top: 0.3em solid white;
    border-right: 0.3em solid white;
    background: var(--palette3);
    border-radius: 1em;

}

nav div,
aside div {
    text-align: center;
    border-radius: 2em;
    font-family: "Major Mono Display", monospace;
    font-weight: 1000;
}

p,
li {
    font-family: "Quicksand", sans-serif;
    font-weight: 600;
    font-style: normal;
}

footer {
    text-align: center;
    background: var(--palette1);
    color: white;
}

a:link {
    color: white
}

a:visited {
    color: white
}

.navbutton:hover,
.toggle:checked~label {
    border-top: 0.3em solid rgba(0, 0, 0, 0);
    border-right: 0.3em solid rgba(0, 0, 0, 0);
    background-color: #ebe3eb;
    animation: pulse;
    animation-duration: 0.5s;
}

.navbutton:hover,
.toggle:checked~label {
    color: black;
}

.quicklink:hover{
    color: rgb(121, 217, 255);
}

.followme a img {
    border-top: 0.3em solid white;
    border-right: 0.3em solid white;
    border-radius: 10em;
    padding: 0;
}

.followme a img:hover {
    border-top: 0.3em solid rgba(0, 0, 0, 0);
    border-right: 0.3em solid rgba(0, 0, 0, 0);
    border-radius: 10em;
    padding: 0;
    animation: rubberBand;
    animation-duration: 0.5s;
}

table {
    empty-cells: show;
    margin: auto auto 1em auto;
    caption-side: bottom;
    border-collapse: collapse;
    overflow-y: scroll;
    max-width: 100%;
}

table,
th,
td {
    border: 0.2em solid black;
}

td {
    padding: 0.5em;
    font-family: "Quicksand", sans-serif;
    font-weight: 600;
    font-style: normal;
}

th {
    background-color: var(--palette2);
    color: white;
}

tr:nth-child(even) {
    background-color: var(--palette3);
    color: white;
}

fieldset {
    border: 0.1em solid black;
    margin: 1em;
    padding: 1em;
    border-radius: 2em;
    font-family: "Quicksand", sans-serif;
    font-weight: 600;
    font-style: normal;
    display: flex;
    flex-direction: column;
}

input,
textarea,
select {
    margin: 1em;
    padding: 0.5em;
}

textarea {
    height: 20em;
}

.inputflex {
    display: flex;
    flex-direction: column;
}

tfoot {
    background-color: var(--palette2);
}

.toggle {
    display: none;
}

.dropdown>ul {
    visibility: hidden;
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    transition: all 0.1s ease-out;
    opacity: 0;
    z-index: 1;
    background-color: var(--palette1);
    transform: scale(0.5);
    top: 22.5em;
    left: 5em;
    right: 5em;
}

.toggle:checked~ul,
.dropdown>label:hover~ul,
.dropdown>label~ul:hover {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.dropdown>ul a {
    display: grid;
    padding: 1em 5em 1em 5em;
}

.dropdown a {
    font-family: "Major Mono Display", monospace;
    font-weight: 1000;
}

main a:link,
main a:visited {
    color: black
}

img {
    border-radius: 2em;
}

figcaption {
    font-family: 'Courier New', Courier, monospace;
}

aside .followme h3 {
    border: 0.3em solid white;
}

/* Small devices (tablets, 768px and up) */
@media (min-width:768px) {

    h1 {
        font-size: 3em;
    }

    .twogrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1em;
    }

    .twoflex {
        display: flex;
    }

    nav .followme .navbott,
    aside .followme div {
        grid-template-columns: 1fr 1fr;
    }

    article>div {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .recipegrid {
        display: grid;
        grid-template-areas:
            'image list'
            'inst inst';
    }

    .recimg {
        grid-area: image;
    }

    .reclist {
        grid-area: list;
    }

    .recinst {
        grid-area: inst;
    }

    .reccredit {
        grid-area: credit;
    }

    input,
    select {
        max-width: 50%;
    }

    #reset,
    #submit {
        align-self: center;
        width: 20em;
    }

    .inputflex {
        flex-direction: row;
        align-items: center;
    }

    .inputflex input {
        flex-grow: 1;
    }

    .dropdown>ul {
        top: 23.5em;
        left: 10em;
        right: 10em;
    }
}
@media (min-width: 922px) {
    .maincont {
        display: grid;
        grid-template-columns: 12em minmax(0, 1fr);
        grid-template-areas:
            'left top'
            'left middle1'
            'left middle2'
            'left bottom';
        grid-gap: 1em;
        padding: 1.5em;
    }

    header {
        grid-area: top;
    }

    nav {
        grid-area: left;
        z-index: 2;
    }

    aside {
        grid-area: middle1;
    }

    main {
        grid-area: middle2;
    }

    footer {
        grid-area: bottom;
    }

    nav .followme .navbott {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .followme {
        position: sticky;
        top: 0;
    }

    .followme img {
        max-width: 100%;
        margin: 0;
    }

    .navbutton {
        display: flex;
        height: 5em;
        justify-content: center;
        align-items: center;
    }

    .dropdown>ul {
        left: 5em;
        top: -8em;
        width: 150%;
    }

    .dropdown>ul {
        top: 2em;
        left: 10em;
    }

    .dropdown>ul a {
        margin: 1em 1.5em 1em 1.5em;
        padding: 1.5em 0em 1.5em 0em;
    }

}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    .maincont {
        grid-template-columns: 12em minmax(0, 1fr) 12em;
        grid-template-areas:
            'left top top'
            'left middle right'
            'left bottom bottom';
    }

    header {
        grid-area: top;
    }

    nav {
        grid-area: left;
    }

    aside {
        grid-area: right;
    }

    main {
        grid-area: middle;
    }

    footer {
        grid-area: bottom;
    }

    aside .followme div {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .followme {
        position: sticky;
        top: 0;
    }

    .followme h3 {
        padding: 1em 1em 1em 1em;
        border-radius: 10em;
        font-size: 1.5rem;
        margin: 1em 0.2em 1em 0.2em;
        text-align: center;
    }

    .followme div .quicklink {
        margin-left: 0.5em;
        margin-right: 0.5em;
    }
}