* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --nav-text-color: black;
    --background-color: linear-gradient(45deg, #b3e1f0, #8dbff8, #26bcf3, #3350f3);
    --menu-background-color: #99CCFF;
    --banner-background-color: #99CCFF;
    --banner-hdr-text-color: #f7e373;
    --ranking-banner-img: url('./images/ranking.jpg');
    --event-banner-img: url('./images/event-banner.jpg');
    --page-background-img: url("./images/PageBackground.jpg");
    --home-info-text-color: rgba(6, 6, 170, 0.877);
    --home-info-border-color: blue;
    --home-link-color: black;
    --rank-items-color: rgb(204, 243, 165);
    --rank-title-color: rgb(204, 147, 41);
    --rank-history-bkgrd-color: lightslategray;
    --rank-history-txt-color: floralwhite;
    --rank-history-bdr-color: black;
    --forms-title-color: red;
    --forms-border-color: black;
    --contact-title-color: black(15, 10, 12, 0.295);
    --contact-name-color: blue;
    --contact-border-color: black;
    --contact-name-hover: white;
    --event-text1-color: black;
    --event-link-color: blue;
    --event-text2-color: blue;
}

body {
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    font-family: Helvetica, sans-serif;
    background-image: var(--page-background-img);
    background-size: cover;
    max-width: 960px;
    margin: auto;
}

/* nav */
.nav-container {
    display: flex;
    min-height: 40px;
    max-width: 1080px;
    background: var(--menu-background-color);
    border: 2px solid black;
}

/* END NAV SETUP */

.header a {
    text-decoration: var(--nav-text-color);
}

.header {
    padding: 0 20px;
    background-color: transparent;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    position: fixed;
    top: 0px;
    padding-bottom: 38px;
    max-width: 1080;
}

ul {
    list-style: none;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

ul a {
    color: var(--nav-text-color);
}

ul li {
    padding: 5px;
    margin-left: 10px;
}

ul li:hover {
    transform: scale(1.1);
    transition: 0.3s;
}

/* Generic Use */
#banner-container {
    display: grid;
    grid-gap: 5px;
    grid-template-areas: "hdr hdr pic"
        "i1 i1 i1"
        "i2 i2 i2";
    grid-template-rows: 3fr .5fr .5fr;
    grid-template-columns: 1fr 1fr 1fr;
    background: transparent;
    align-items: center;
    justify-items: center;

}

#banner-container>hdr {
    grid-area: hdr;
    font-size: 2.2em;
    font-weight: bold;
}

#banner-container>pic {
    grid-area: pic;
    vertical-align: middle;
}

#banner-container>i1 {
    grid-area: i1;
    font-size: 1em;
    font-weight: bold;
}

#banner-container>i2 {
    grid-area: i2;
    font-size: .8em;
    font-weight: bold;
}

#banner-small {
    display: grid;
    grid-gap: 5px;
    grid-template-areas: "hdr"
        "i1";
    grid-template-rows: 3fr .5fr;
    grid-template-columns: 1fr;
    background: transparent;
    align-items: center;
    justify-items: center;
}

#banner-small>hdr {
    grid-area: hdr;
    font-size: 2.2em;
    color: var(--banner-hdr-text-color);
    text-shadow: #3350f3;
}

#banner-small>i1 {
    grid-area: i1;
    font-size: 1em;
}

.copyright-container {
    display: flex;
    justify-content: center;
    font-size: smaller;
}

.img-fill {
    width: 100%;
    height: 160px;
    object-fit: contain;
    padding-right: 10px;
}

.img-left {
    float: left;
    margin: 5px;
    max-width: 200px;
}

.img-right {
    float: right;
    margin: 5px;
    max-width: 200px;
}

.text-justify {
    text-align: left;
    margin: 5px;
}

.thumbnail:hover {
    position: relative;
    top: -25px;
    left: -35px;
    width: 500px;
    height: auto;
    display: block;
    z-index: 999;
}

/* Home Page Settings */

#home-info-title {
    display: flex;
    flex: 65%;
    color: var(--home-info-text-color);
    font-size: x-large;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60px;
    background: transparent;
    border: 1px solid var(--home-info-border-color);
}

#home-text-container {
    display: flex;
    align-items: center;
    flex-direction: row;
    background: transparent;
    border: 1px solid var(--home-info-border-color);
}

#home-text-container a:link {
    color: var(--home-link-color);
}

#home-text-container a:visited {
    color: var(--home-link-color);
}

.home-text {
    color: var(--home-info-text-color);
    font-weight: bold;
}

/* Ranking Page Setup */

#rank-history-container {
    display: flex;
}

#rank-history-item a:hover {
    background: var(--rank-history-bkgrd-color);
    color: var(--rank-history-txt-color);
    text-decoration: underline;
}

#rank-history-item a:link {
    background: var(--rank-history-bkgrd-color);
    color: var(--rank-history-txt-color);
    text-decoration: none;
}

#rank-history-item a:visited {
    background: var(--rank-history-bkgrd-color);
    color: var(--rank-history-txt-color);
    text-decoration: none;
}

#rank-history-item {
    padding: 0.5em;
    background: var(--rank-history-bkgrd-color);
    color: var(--rank-history-txt-color);
    border: 1px solid var(--rank-history-bdr-color);
}

.rank-banner-commets {
    display: flex;
    height: auto;
    padding: 10px 5px 10px;
}

.rank-flex-container {
    display: flex;
}

.rank-flex-child {
    flex: 1;
    border: 2px solid black;
}

.rank-top-items {
    background-color: var(--rank-items-color);
    border-left-style: solid;
    border-left-color: var(--home-info-border-color);
    border-left-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: var(--home-info-border-color);
    border-bottom-width: 2px;
}

.rank-left {
    display: flex;
    align-items: left;
    justify-content: left;
    padding-left: 5px;
}

#rank-top-container {
    display: grid;
    grid-template-areas: "rank hound owner total";
    grid-template-columns: .4fr 1fr 1.5fr .4fr;
    height: 1.5em;
}

#rank-top-container>rank {
    display: grid;
    grid-area: rank;
    align-items: center;
    justify-items: center;
    background-color: var(--rank-items-color);
    border-bottom-style: solid;
    border-bottom-color: var(--home-info-border-color);
    border-bottom-width: 2px;
}

#rank-top-container>hound {
    grid-area: hound;
    display: grid;
    align-items: center;
    justify-items: center;
}

#rank-top-container>owner {
    grid-area: owner;
    display: grid;
    align-items: center;
    justify-items: center;
}

#rank-top-container>total {
    grid-area: total;
    display: grid;
    align-content: center;
    justify-content: center;
}

.rank-header {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--rank-title-color);
    width: 100%;
    border-bottom-style: solid;
    border-bottom-color: black;
    border-bottom-width: 2px;
    font-weight: bolder;
    font-size: x-large;
}

#rank-title-container {
    display: grid;
    grid-template-areas: "hound owner day";
    grid-template-columns: 1fr 1.3fr 1fr;
    height: 1.5em;
}

#rank-title-container>hound {
    display: grid;
    grid-area: hound;
    align-items: center;
    justify-items: center;
    background-color: var(--rank-items-color);
    border-bottom-style: solid;
    border-bottom-color: var(--home-info-border-color);
    border-bottom-width: 2px;
}

#rank-title-container>owner {
    display: grid;
    grid-area: owner;
    align-items: center;
    justify-items: center;
}

#rank-title-container>day {
    display: grid;
    grid-area: day;
    align-items: center;
    justify-items: center;
}

.rank-title-items {
    background-color: var(--rank-items-color);
    border-left-style: solid;
    border-left-color: var(--home-info-border-color);
    border-left-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: var(--home-info-border-color);
    border-bottom-width: 2px;
}

#rank-title-breed-container {
    display: grid;
    grid-template-areas: "hound owner day breed";
    grid-template-columns: 1fr 1.3fr 1fr 1fr;
    height: 1.5em;
}

#rank-title-breed-container>hound {
    display: grid;
    grid-area: hound;
    align-items: center;
    justify-items: center;
    background-color: var(--rank-items-color);
    border-bottom-style: solid;
    border-bottom-color: var(--home-info-border-color);
    border-bottom-width: 2px;
}

#rank-title-breed-container>owner {
    display: grid;
    grid-area: owner;
    align-items: center;
    justify-items: center;
}

#rank-title-breed-container>day {
    display: grid;
    grid-area: day;
    align-items: center;
    justify-items: center;
}

#rank-title-breed-container>breed {
    display: grid;
    grid-area: breed;
    align-items: center;
    justify-items: center;
}

.rank-title-breed-items {
    background-color: var(--rank-items-color);
    border-left-style: solid;
    border-left-color: var(--home-info-border-color);
    border-left-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: var(--home-info-border-color);
    border-bottom-width: 2px;
}

/* FORMS Setup */
.forms-container {
    display: flex;
    flex-direction: column;
    background: transparent;
    border-color: var(--forms-border-color);
    border-width: 1px;
    border-style: solid;
}

.forms-div {
    align-items: center;
    justify-items: center;
    text-align: center;
    padding: 10px;
}

.forms-title {
    color: var(--forms-title-color);
    font-weight: bold;
    font-size: x-large;
}

/* By-Laws */
.bylaw-container {
    display: flex;
    flex-direction: column;
    background: transparent;
}

.bylaw-div {
    align-items: center;
    justify-items: center;
    text-align: center;
    padding: 20px;
}

.bylaw-title {
    color: var(--forms-title-color);
    font-weight: bold;
    font-size: x-large;
}

/* Contacts Setup */
#contacts-container {
    display: grid;
    background: transparent;
    border-color: var(--contact-border-color);
    border-width: 1px;
    border-style: solid;
    max-width: 500px;
    margin: auto;
    font-weight: bold;
    color: var(--contact-title-color);
}

#contacts-container a:link {
    text-decoration: none;
    color: var(--contact-name-color);
}

#contacts-container a:hover {
    text-decoration: none;
    color: var(--contact-name-color);
    background-color: var(--contact-name-hover);
}

#contacts-single {
    display: grid;
    width: 100%;
    grid-template-areas: "position name";
    grid-template-rows: .6fr;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    justify-items: center;
    border-bottom-color: var(--contact-border-color);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    font-size: 1em;
    background: transparent;
}

#contacts-single>position {
    grid-area: position;
    width: 100%;
    text-align: right;
    padding: 5px;
}

#contacts-single>name {
    grid-area: name;
    width: 100%;
    text-align: left;
    padding: 5px;
}

#contacts-directors {
    display: grid;
    width: 100%;
    grid-template-areas: "position name1"
        "position name2"
        "position name3"
        "position name4"
        "position name5"
        "position name6";
    grid-template-rows: .6fr;
    grid-template-columns: 1fr 1fr;

    border-bottom-color: var(--contact-border-color);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    font-size: 1em;
    background: transparent;
}

#contacts-directors>position {
    display: grid;
    grid-area: position;
    align-items: center;
    text-align: right;
    width: 100%;
    padding: 5px;
}

#contacts-directors>name1 {
    grid-area: name1;
    width: 100%;
    text-align: left;
    padding: 5px;
}

#contacts-directors>name2 {
    grid-area: name2;
    width: 100%;
    text-align: left;
    padding: 5px;
}

#contacts-directors>name3 {
    grid-area: name3;
    width: 100%;
    text-align: left;
    padding: 5px;
}

#contacts-directors>name4 {
    grid-area: name4;
    width: 100%;
    text-align: left;
    padding: 5px;
}

#contacts-directors>name5 {
    grid-area: name5;
    width: 100%;
    text-align: left;
    padding: 5px;
}

#contacts-directors>name6 {
    grid-area: name6;
    width: 100%;
    text-align: left;
    padding: 5px;
}

#contacts-double {
    display: grid;
    width: 100%;
    grid-template-areas: "position name1"
        "position name2";
    grid-template-rows: .6fr;
    grid-template-columns: 1fr 1fr;

    border-bottom-color: var(--contact-border-color);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    font-size: 1em;
    background: transparent;
}

#contacts-double>position {
    display: grid;
    grid-area: position;
    align-items: center;
    text-align: right;
    width: 100%;
    padding: 5px;
}

#contacts-double>name1 {
    grid-area: name1;
    width: 100%;
    text-align: left;
    padding: 5px;
}

#contacts-double>name2 {
    grid-area: name2;
    width: 100%;
    text-align: left;
    padding: 5px;
}

#contacts-lgra {
    display: grid;
    width: 100%;
    grid-template-areas: "position name1"
        "position name2"
        "position name3"
        "position name4";
    grid-template-rows: .6fr;
    grid-template-columns: 1fr 1fr;

    border-bottom-color: var(--contact-border-color);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    font-size: 1em;
    background: transparent;
}

#contacts-lgra>position {
    display: grid;
    grid-area: position;
    align-items: center;
    text-align: right;

    width: 100%;
    padding: 5px;
}

#contacts-lgra>name1 {
    grid-area: name1;
    width: 100%;
    text-align: left;
    padding: 5px;
}

#contacts-lgra>name2 {
    grid-area: name2;
    width: 100%;
    text-align: left;
    padding: 5px;
}

#contacts-lgra>name3 {
    grid-area: name3;
    width: 100%;
    text-align: left;
    padding: 5px;
}

#contacts-lgra>name4 {
    grid-area: name4;
    width: 100%;
    text-align: left;
    padding: 5px;
}

/* Trials and Events Settings */

#event-info-container {
    display: grid;
    grid-gap: 5px;
    grid-template-areas: "hdr hdr hdr"
        "i1 i1 i1";
    grid-template-rows: 50px 20px;
    grid-template-columns: 1fr 1fr 1fr;

    border-width: 2px;
    border-style: solid;
    min-height: 1.5fr;
    width: 100%;
    align-items: center;
    justify-items: center;
}

#event-info-container>hdr {
    grid-area: hdr;
    font-size: 1.5em;
}

#event-info-container>i1 {
    grid-area: i1;
    font-size: 1em;
}

#event-container {
    display: grid;
    width: 100%;
    grid-template-areas: "date type place"
        "date premium place";
    grid-template-rows: .6fr .6fr;
    grid-template-columns: .5fr 1fr .5fr;
    text-align: center;
    justify-items: center;
    border-color: black;
    border-width: 2px;
    border-style: solid;
    grid-gap: 2px;
    font-size: 1em;
    background: transparent;
}

#event-container>date {
    display: flex;
    grid-area: date;
    color: black;
}

#event-container>type {
    display: flex;
    grid-area: type;
}

#event-container>place {
    display: flex;
    grid-area: place;
}

#event-container>premium {
    display: flex;
    grid-area: premium;
}

.event {
    justify-content: center;
    align-items: center;
    padding: 5px;
    font-size: large;
    color: var(--event-text-color);
}

.event h1 {
    color: #000;
    font-weight: normal;
    font-size: large;
}

a.events:link {
    color: var(--event-link-color);
    text-decoration: none;
}

a.events:hover span {
    transform: translateX(0);
}

a.events:hover span::before {
    transform: translateX(0);
}

a.events:active {
    color: red;
}

.event h1 {
    color: #000;
    font-weight: normal;
    font-size: large;
}

.event h2 {
    color: red;
    font-weight: normal;
    font-size: large;
}

span {
    position: absolute;
    overflow: hidden;
    transform: translateX(-100%);
    transition: transform 275ms ease;
}

span::before {
    display: inline-block;
    content: attr(data-content);
    color: rgb(238, 34, 211);
    background-color: palegoldenrod;
    transform: translateX(100%);
    transition: transform 275ms ease;
    text-decoration: none;
}

.trial-highlight {
    display: inline-block;
    content: attr(data-content);
    color: rgb(238, 34, 211);
    background-color: palegoldenrod;
    transform: translateX(100%);
    transition: transform 275ms ease;
    text-decoration: none;
}

/*  History Pictures Setup */
.picture-row {
    display: flex;
    flex-wrap: wrap;
    padding-right: 4px;
}

.picture-column {
    flex: 25%;
    max-width: 25%;
    border: 0px;
}

.picture-column img {
    vertical-align: center;
    object-fit: scale-down;
    padding-left: 4px;
}

.picture {
    position: fixed;
    width: 60%;
    height: 60%;
    text-align: center;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
}

.picture img {
    min-width: 100%;
    max-height: 100%;
    position: relative;
    top: -100%;
    /* Transition */
    transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
}

.picture:target {
    outline: none;
    top: 0;
    opacity: 1;
    pointer-events: auto;
    transition: all 1.2s ease;
    -moz-transition: all 1.2s ease;
    -ms-transition: all 1.2s ease;
    -o-transition: all 1.2s ease;
    -webkit-transition: all 1.2s ease;
}

.picture:target img {
    top: 0;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

.trans {
    transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
}

@media (max-width: 55em) {
    .picture-column {
        flex: 50%;
        max-width: 50%;
    }
}

@media (max-width: 35em) {
    .picture-column {
        flex: 100%;
        max-width: 100%;
    }
}

/* History Link Page setup */

.history-container {
    width: min(95%, 45rem);
    margin: 0 auto;
    flex-direction: column;
}

.history-parent {
    display: flex;
    text-align: center;
    justify-items: center;
}

.history-parent>* {
    flex-basis: 100%;
}

.history-item {
    flex-grow: 1;
    padding: .5em;
    border: 1px solid black;
}

.history-title {
    color: #000;
    font-weight: bold;
    font-size: larger;
}

a.history:link {
    color: var(--event-link-color);
    text-decoration: none;
}

a.history:hover span {
    transform: translateX(0);
}

a.history:hover span::before {
    transform: translateX(0);
}

a.history:active {
    color: red;
}

.history h1 {
    color: #000;
    font-weight: normal;
    font-size: large;
}

.history h2 {
    color: red;
    font-weight: normal;
    font-size: large;
}

/* Banquet setup */
#banquet-container {
    display: grid;
    grid-gap: 5px;
    grid-template-areas: "hdr hdr hdr"
        "i1 i1 i1";
    grid-template-rows: 80px 20px;
    grid-template-columns: 1fr 1fr;

    background: transparent;
    margin-top: 38px;
    min-height: 120px;
    align-items: center;
    justify-items: center;
}

#banquet-container>hdr {
    grid-area: hdr;
    font-size: 2.2em;
}

#banquet-container>i1 {
    grid-area: i1;
    font-size: 1em;
}

#banquet-info {
    display: flex;
    flex-direction: row;
}

#banquet-info-left {
    width: 25%;
    text-align: right;
    margin-right: 10px;
}

#banquet-info-right {
    width: 75%;
}