/* CSS reset courtesy of https://www.joshwcomeau.com/css/custom-css-reset/ */
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. Remove default margin */
* {
    margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    /* 4. Add accessible line-height */
    line-height: 1.5;
    /* 5. Improve text rendering */
    -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
    font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

/* 10. Create a root stacking context */
#root,
#__next {
    isolation: isolate;
}

/* CSS reset end */
.headertext {
    width: var(--body-width);
    padding: 0.5em;
    background-color: var(--izzy-dark-navy);
    display: flex;
    flex-direction: column;
    align-items: center;
}

main {
    max-width: var(--body-width);
    padding: 1em;
}

body {
    /* text color */
    --body-width: 1000px;
    --izzy-gold: #b0ac7d;
    --izzy-dark-gold: #84815e;
    --izzy-navy: #2a293d;
    --izzy-mid-navy: #232233;
    --izzy-dark-navy: #201f2e;
    --text-color-base-dark: #1c2734;
    --text-color-base-light: #dbdbdb;
    --text-color-disabled: #f2f2f2;
    background-color: var(--izzy-navy);
    background-image: url('images/Deer_tile.png');
    color: var(--text-color-base-light);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footertext {
    width: var(--body-width);
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--izzy-dark-navy);
    color: var(--izzy-gold);
    text-align: center;
    padding: 0.8em;
}

/* for tiny text*/
.tiny {
    font-size: 0.5rem;

}

a:link {
    color: var(--izzy-gold);
}

a:visited {
    color: var(--izzy-dark-gold);
}

a:hover {
    color: var(--text-color-base-light);
}

.title {
    font: weight 400px;
    font-style: normal;
    color: var(--text-color-disabled);
    font-size: 3rem;
    text-shadow: 0px 2px var(--izzy-gold);
    -webkit-text-stroke: 2px var(--izzy-gold);
    font-family: 'Courier New', Courier, monospace;
}

b {
    color: var(--izzy-gold);
}
b:hover, h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {
    color: var(--text-color-base-light);
}

/* general h1 */
h1 {
    font-style: normal;
    color: var(--izzy-gold);
    font-size: 2rem;
}
h2 {
    font-style: normal;
    color: var(--izzy-gold);
    font-size: 1.5rem;
    text-decoration: underline dotted;
}
h3 {
    font-style: normal;
    color: var(--izzy-gold);
    font-size: 1.2rem;
}

sub {
    font-style: italic;
}

/* default font family */
* {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.logo {
    border-radius: 25px;
    max-width: 100%;
    display: block;
    padding: 0.5em;
}

/* Tooltips */
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 0.5px dotted var(--izzy-dark-navy);
    /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: var(--izzy-dark-navy);
    color: var(--izzy-gold);
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* Top navigation */
.topnav {
    background-color: var(--text-color-base-dark);
    overflow: hidden;
    width: var(--body-width);
    margin-top: 1em;
    padding: 5px;
    display: flex;
    justify-content: center;
}

.topnav a {
    float: left;
    text-align: center;
    color: var(--izzy-gold);
    padding: 14px 16px;
}

.topnav a:visited {
    color: var(--izzy-dark-gold);
}

.topnav a:hover {
    background-color: var(--izzy-gold);
    color: var(--izzy-navy);
}
/* Add a color to the active/current link */
.topnav a.active {
  background-color: var(--izzy-dark-gold);
  color: var(--izzy-navy);
}

        /* The dropdown container */
        .dropdown {
          float: left;
          overflow: hidden;
        }
    
        /* Dropdown button */
        .dropdown .dropbtn {
          font-size: 16px;
          border: none;
          outline: none;
          color: var(--izzy-dark-gold);
          padding: 14px 16px;
          background-color: inherit;
          font-family: inherit;
          /* Important for vertical align on mobile phones */
          margin: 0;
          /* Important for vertical align on mobile phones */
        }
    
        /* Dropdown content (hidden by default) */
        .dropdown-content {
          display: none;
          position: absolute;
          background-color: var(--izzy-navy);
          min-width: 160px;
          box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
          z-index: 1;
        }
    
        /* Links inside the dropdown */
        .dropdown-content a {
          float: none;
          color: var(--izzy-dark-gold);
          padding: 12px 16px;
          text-decoration: none;
          display: block;
          text-align: left;
        }
    
        /* Add a grey background color to dropdown links on hover */
        .dropdown-content a:hover {
          color: var(--izzy-navy);
          background-color: var(--izzy-gold);
        }
    
        /* Show the dropdown menu on hover */
        .dropdown:hover .dropdown-content {
          display: block;
        }

.center {
    text-align: center;
    max-width: var(--body-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: flex-start;
}

.imgfocus {
    box-shadow: 5px 10px 0px var(--izzy-gold);
    margin: 1em;
    width: 400px;
    border-radius: 0.2em;
}

details {
    margin: 1em;
}
summary {
    color: var(--izzy-gold);
    cursor: pointer;
}

.portfolioentry{
    background-color: var(--izzy-dark-navy);
    padding: 0.5em;
    margin: 0.2em;
}
.portfolioentry:hover{
    background-color: var(--izzy-mid-navy);
}

/* gallery */
* {
  box-sizing: border-box;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
  max-width: var(--body-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1em;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}
main {
  background-color: var(--izzy-dark-navy);
  padding: 1em;
}
.prev{
    left: 0;
    border-radius: 3px 0 0 3px;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: var(--izzy-dark-navy);
}

/* Number text (1/3 etc) */
.numbertext {
  color: var(--izzy-gold);
  background-color: var(--izzy-navy);
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  padding: 2px 16px;
  margin: 5px;
  font-size: 2em;
  color: var(--izzy-gold);
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.columngallery {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

/* HORUS type */
code.horus {
  font-size: 0.5rem;
  background-color: rgba(0, 0, 0, 0.7) !important;
  box-shadow: none;
  color: white;
  font-style: normal;
  letter-spacing: 0.05em;
  border-radius: 0;
  text-align: center;
}

code.horus:hover {
  background-color: black !important;
  animation: distort 0.6s infinite;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
}

.horus--subtle {
  animation: distort-subtle 5s infinite;
}

@keyframes distort {
  0% {
    text-shadow: 2px 1px #ff00ff, -2px -3px #00ffff;
    transform: translate(-1px, 1px) translate3D(-5px, 0px, 0) rotate(-0.1deg);
    cursor: crosshair;
  }
  25% {
    text-shadow: -2px -3px #ff00ff, 2px 1px #00ffff;
    transform: translate(2px, 1px) translate3D(-5px, 0px, 0) rotate(-0.1deg);
    cursor: cell;
  }
  50% {
    text-shadow: 2px -1px #ff00ff, -4px 1px #00ffff;
    transform: translate(-2px, 1px) translate3D(-5px, 0px, 0) rotate(-0.1deg);
    cursor: col-resize;
  }
  75% {
    text-shadow: -4px -1px #ff00ff, -2px -1px #00ffff;
    transform: translate(3px, 1px) translate3D(-5px, 0px, 0) rotate(-0.1deg);
    cursor: move;
  }
  100% {
    text-shadow: -2px 0 #ff00ff, 2px -1px #00ffff;
    transform: translate(-2px, 0) translate3D(-5px, 0px, 0) rotate(-0.1deg);
    cursor: all-scroll;
  }
}

@keyframes distort-subtle {
  25% {
    text-shadow: none;
  }
  26% {
    text-shadow: 2px -1px #ff0000, -2px 3px #00ffff;
  }
  27% {
    text-shadow: -2px -3px #ff0000, 2px 1px #00ffff;
  }
  28% {
    text-shadow: 2px 1px #ff0000, -4px 1px #00ffff;
  }
  29% {
    text-shadow: -4px 1px #ff0000, -2px -1px #00ffff;
  }
  30% {
    text-shadow: none;
  }
  75% {
    text-shadow: none;
  }
  76% {
    text-shadow: -4px 1px #ff0000, -2px -1px #00ffff;
  }
  77% {
    text-shadow: -2px -3px #ff0000, 2px 1px #00ffff;
  }
  78% {
    text-shadow: 2px -1px #ff0000, -2px 3px #00ffff;
  }
  79% {
    text-shadow: 2px 1px #ff0000, -4px 1px #00ffff;
  }
  80% {
    text-shadow: none;
  }
}

.buttonrow{
    display: flex;
}

.buttonrow a{
  text-decoration: none;
}

.buttoncolumn{
    flex: 33.33%;
    padding: 5px;
}

.intext {
  width: 0.8em; 
  vertical-align:middle; 
  display: inline;
  margin-left: 0.2em;
  margin-right: 0.2em;
}