@import url("fonts.css");

:root {
  /* Color Palette */
  --dark-cyan: #4e9498;
  --blue-green: #64b6ac;
  --smokey-white: #eadeda;
  --rich-black: #2e294e;
  --golden-yellow: #ffd400;

  /* Box Shadows */
  --bs1: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
    rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  --bs2: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em,
    rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
    rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  --bs3: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
    rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

  /* Root Font Size */
  font-size: 12pt;
}

html {
  scroll-behavior: smooth;
}

h1,
h2,
h3 {
  font-family: "Caveat", "Courier New", Courier, monospace;
  color: var(--rich-black);
}

h1 {
  font-size: 8rem;
}

h2 {
  font-size: 4rem;
}

h3 {
  font-size: 3rem;
}

h4 {
  font-family: "Caveat", "Courier New", Courier, monospace;
  color: var(--smokey-white);

  font-size: 2rem !important;
}

p,
a {
  font-family: "Nunito", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
    sans-serif;
  font-size: 1.25rem;
  color: #2e294e;
  text-decoration: none;
}

.img-caption {
  color: var(--smokey-white) !important;
  font-size: 1rem !important;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-color: var(--smokey-white);
  background-image: url("../_media/img/bg_fabric.png");

  margin: 0;
}

img {
  width: 100%;
}

/* Generic Classes */

.grid-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.logo {
  max-width: 180px;
}

.icon {
  width: 160px;
}

.tiny-icon {
  width: 32px;
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-item {
  border-radius: 100%;

  background-color: var(--smokey-white);
  padding: 80px;
  margin: 0 20px;

  box-shadow: var(--bs1);

  transition: all 0.2s ease-in-out;
}

.feature-item-label {
  width: 100%;
  background-color: var(--golden-yellow);
  text-align: center;

  box-shadow: var(--bs1);

  position: relative;
  bottom: 110px;

  margin-bottom: -110px;
}

.feature-item-label p {
  font-family: "Caveat", "Courier New", Courier, monospace;
  font-size: 2rem;
  padding: 10px 0;
}

.img-frame {
  padding: 20px;
  background-color: var(--blue-green);
  background-image: url("../_media/img/bg_fabric.png");
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
    rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  rotate: 2deg;
}

.img-frame-anchor {
  background-color: var(--smokey-white);
  background-image: url("../_media/img/bg_fabric.png");

  padding: 15px;
  margin: 10px;

  box-shadow: var(--bs1);

  transition: all 0.2s ease-in-out;
}

.scale-animation:hover {
  transform: scale(1.05);
}

/* Header */

header {
  display: flex;
  justify-content: center;
  width: 100%;

  box-shadow: var(--bs1);
  z-index: 10;

  padding: 20px 0 0 0;
}

nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 80%;
}

figure {
  margin: 0;
}

#navigation-bar {
  list-style-type: none;
  display: flex;
  justify-content: space-between;

  gap: 10px;
}

#navigation-bar li {
  display: inline;

  flex: 1 1 0%;

  text-align: center;

  padding: 10px;
}

#navigation-bar li a {
  display: block;

  font-family: "Caveat", "Courier New", Courier, monospace;
  color: var(--rich-black);

  font-size: 2rem;

  background: linear-gradient(
    to top,
    var(--blue-green),
    var(--blue-green) 35%,
    rgba(0, 0, 0, 0) 35%
  );

  background-size: 100% 200%;
  background-position: 100%;
  transition: background-position 275ms ease;
}

#navigation-bar li a:hover {
  background-position: 100% 0;
}

/* Main - Opening Section */

main {
  width: 100%;
}

#section-home-opening {
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position: relative;
  z-index: 1;
}

#opening-bg {
  height: 65vh;
  width: 100%;

  background-image: url("../_media/img/lg_starry-night.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;

  display: flex;
  justify-content: center;

  position: relative;
  z-index: 1;
}

#opening-bg h1 {
  color: var(--smokey-white);
}

#img-vincent-portrait {
  max-width: 560px;

  position: absolute;
  top: 200px;

  z-index: 1;
}

/* Main - Home About Section */
#section-home-about {
  display: flex;
  justify-content: center;

  background-color: var(--smokey-white);
  background-image: url("../_media/img/bg_fabric.png");

  box-shadow: var(--bs1);

  padding: 60px 0;

  position: relative;
  z-index: 10;
}

.section-contents {
  width: 60%;
}

/* Main - Home Features Section */
#section-home-features {
  display: flex;
  justify-content: center;

  width: 100%;

  background-color: var(--blue-green);

  background-image: url("../_media/img/bg_fabric.png");

  padding-bottom: 80px;

  z-index: 8;
}

figcaption p {
  text-align: center;
  font-family: "Caveat";
  font-size: 2rem;
  margin: 10px;
}

/* Main - Paint About Section */

#section-paint-about {
  display: flex;
  justify-content: center;

  background-color: var(--blue-green);
  background-image: url("../_media/img/bg_fabric.png");

  width: 100%;

  box-shadow: var(--bs1);

  position: relative;
  z-index: 8;

  padding-bottom: 60px;
}

/* Main - Paint App Section */

#section-paint-app {
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: var(--smokey-white);
  background-image: url("../_media/img/bg_fabric.png");

  height: 80vh;

  box-shadow: var(--bs1);

  position: relative;
  z-index: 10;
}

#paint-app {
}

#paint-app-container {
  position: relative;
  display: inline-block;
}

#canvas-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Adjust as needed */
  height: 100%; /* Adjust as needed */
  pointer-events: none; /* Allows clicks to pass through to the canvas */
}

#paint-app-gui {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#paint-app-gui-controls {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.paint-button {
  padding: 10px;
  border-radius: 10px;
  width: 100%;

  font-family: "Nunito";
}

#paint-app-button-clear {
  background-color: var(--blue-green);
  border: 0;
  box-shadow: var(--bs2);
}

#paint-app-button-clear:active {
  background-color: var(--dark-cyan);
  box-shadow: var(--bs3);
}

#paint-app-button-save {
  background-color: var(--blue-green);
  border: 0;
  box-shadow: var(--bs2);
}

#paint-app-button-save:active {
  background-color: var(--dark-cyan);
  box-shadow: var(--bs3);
}

#paint-app-button-red {
  background-color: rgb(227, 66, 52);
  border: 0;
  box-shadow: var(--bs2);

  color: var(--smokey-white) !important;
}

#paint-app-button-red:active {
  box-shadow: var(--bs3);
}

#paint-app-button-orange {
  background-color: rgb(245, 118, 26);
  border: 0;
  box-shadow: var(--bs2);
}

#paint-app-button-orange:active {
  box-shadow: var(--bs3);
}

#paint-app-button-yellow {
  background-color: rgb(254, 242, 80);
  border: 0;
  box-shadow: var(--bs2);
}

#paint-app-button-yellow:active {
  box-shadow: var(--bs3);
}

#paint-app-button-blue {
  background-color: rgb(0, 58, 108);
  border: 0;
  box-shadow: var(--bs2);
  color: var(--smokey-white) !important;
}

#paint-app-button-blue:active {
  box-shadow: var(--bs3);
}

#paint-app-button-purple {
  background-color: rgb(120, 81, 169);
  border: 0;
  box-shadow: var(--bs2);

  color: var(--smokey-white) !important;
}

#paint-app-button-purple:active {
  box-shadow: var(--bs3);
}

/* Main - Gallery Section */

#section-gallery-about {
  display: flex;
  justify-content: center;

  background-color: var(--blue-green);
  background-image: url("../_media/img/bg_fabric.png");

  width: 100%;

  box-shadow: var(--bs1);

  position: relative;
  z-index: 8;

  padding-bottom: 60px;
}

#section-gallery-images {
  display: flex;
  justify-content: center;

  background-color: var(--smokey-white);
  background-image: url("../_media/img/bg_fabric.png");

  box-shadow: var(--bs1);

  width: 100%;

  position: relative;
  z-index: 9;
}

#lightgallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;

  padding: 80px 0;
}

#lightgallery a {
  width: 100%;
  cursor: zoom-in;
}

/* Main - Section History */

#section-history-about {
  display: flex;
  justify-content: center;

  background-color: var(--blue-green);
  background-image: url("../_media/img/bg_fabric.png");

  width: 100%;

  position: relative;
  z-index: 8;

  padding-bottom: 60px;
}

#section-history-timeline {
  display: flex;
  justify-content: center;

  padding-top: 20px;

  background-color: var(--smokey-white);

  z-index: 9;

  position: relative;

  box-shadow: var(--bs1);

  width: 100%;
}

/* Footer */

footer {
  width: 100%;

  background-color: var(--smokey-white);
  background-image: url("../_media/img/bg_fabric.png");

  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
    rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;

  z-index: 11;
}

#footer-contents-container {
  max-width: 100vw;

  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 20px;

  padding: 50px 10%;
}

#footer-contents-container h3 {
  text-align: right;

  margin: 0;
}

#footer-logo {
  max-width: 350px;
}

#section-footer-aco ul li,
#section-footer-features ul li {
  margin-top: 10px;
  list-style-type: none;
  text-align: right;
}

.button {
  border: 2px solid var(--rich-black);
  padding: 10px;
  border-radius: 40px;
}

.button:hover {
}

.link {
  font-family: inherit;
  font-size: inherit;
  background: linear-gradient(rgba(0, 0, 0, 0) 85%, var(--golden-yellow) 85%);
}