php-gallery/css/master.css

@import "nav.css";
@import "footer.css";

:root {
  --bg: #151515df;
  --bg-1: #242621;
  --bg-2: #1D1E1C;

  --fg:#E8E3E3;
  --fg-dark: #151515;

  --red: #B66467;
  --orange: #FF7700;
  --green: #8C977D;
  --black: #151515;
  --white: #E8E3E3;

  --shadow: 6px 6px 10px #15151588;
  --rad: 5px;

  --square: 33.33%;
}

* {
  font-weight: 521;
  color: var(--fg);
  font-family: "Fira Code", monospace;
}
html {
  margin: 0; padding: 0;

  min-height: 100vh; max-width: 100vw;

  position: relative;

  background-color: var(--bg-2);
  background-image: url("../assets/bg2.svg");

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;

  scroll-behavior: smooth;

  overflow: auto;
}
body {
  margin: 0 auto; padding: 1rem;

  min-height: calc(100vh - 2rem); max-width: 1000px;

  display: flex;

  flex-direction: column;
  justify-content: space-between;
}

/*
  -=-=-= BACK TO TOP BUTTON =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/
#back-to-top {
  margin: 0; padding: 0.5rem;

  position: fixed;
  right: -2.5rem; bottom: 1rem;

  object-position: center;

  background-color: var(--bg);

  border-radius: 50%;
  box-shadow: var(--shadow);

  transition: right 0.15s cubic-bezier(.19,1,.22,1);
}
#back-to-top:hover {
  outline: 0.2rem solid var(--green);
}

#back-to-top * {
  margin: 0; padding: 0;
  width: 1.5rem; height: 1.5rem;

  display: block;

  object-position: center;
}

/*
  -=-=-= DIV DECORATIONS =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/
.default-window {
  margin: 0 0 2rem; padding: 0.5rem;

  width: auto;

  background-color: var(--bg);

  outline: 0.5rem solid var(--bg);

  border-radius: var(--rad);
  box-shadow: var(--shadow);

  text-overflow: ellipsis;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
}

.password-reset-root {
  border: 0.2rem solid var(--red);
}
.edit-root {
  border: 0.2rem solid var(--red);
}

.upload-root {
  border: 0.2rem solid var(--green);
}
.signup-root {
  border: 0.2rem solid var(--green);
}
.account-root {
  border: 0.2rem solid var(--green);
}
.login-root {
  border: 0.2rem solid var(--green);
}
.about-root {
  border: 0.2rem solid var(--green);
}

/*
  -=-=-= GALLERY =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/
.info-text {
  margin: 0 0 2rem;
}

.gallery-root {
  margin: 0 0 2rem; padding: 0.25rem;

  background-color: var(--bg); color: var(--fg);

  border: 0.2rem solid var(--green);
  outline: 0.5rem solid var(--bg);

  border-radius: var(--rad);
  box-shadow: var(--shadow);
}

.gallery-item {
  margin: 0.25rem; padding: 0;

  height: auto; max-width: 350px;

  background-color: var(--bg-2);
  border-radius: var(--rad);

  position: relative;

  flex: 1 0 150px;

  transition: transform 0.15s cubic-bezier(.19,1,.22,1);
}
.gallery-item:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: var(--shadow);

  z-index: 999;
}
.gallery-item:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.gallery-image {
  margin: 0; padding: 0;

  width: 100%; height: 100%;

  top: 0; bottom: 0; left: 0; right: 0;

  position: absolute;

  object-fit: cover;
  object-position: center;

  border-radius: var(--rad);
}

/*
  -=-=-= IMAGE FULLSCREEN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/
.image-container {
  margin: 0 0 2rem; padding: 0;

  width: calc(100vw - var(--space-medium));
  height: 69vh;

  position: relative;

  transition: height 0.15s cubic-bezier(.19,1,.22,1);
}

@media (max-width: 600px) {
  .image-container {
    height: 35vh;
  }
}

.image {
  max-width: 100%;
  width: auto;
  max-height: 100%;
  height: auto;

  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);

  border-radius: var(--rad);
}

.image-description {
  border: 0.2rem solid var(--green);

  word-wrap: break-word;
}
.image-detail {
  border: 0.2rem solid var(--green);
}
.danger-zone {
  border: 0.2rem solid var(--red);
}

.tags-root {
  border: 0.2rem solid var(--green);
}
.tag {
  margin: 0.25rem; padding: 0.5rem;

  display: block;

  border-radius: var(--rad);
}
.tag::before {
  content: '#';
}
/*
  -=-=-= UNIVERSAL =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/
.flex-left {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.flex-down {
  display: flex;
  flex-direction: column;
}

.between {
  justify-content: space-between;
}
.around {
  justify-content: space-around;
}
.center {
  text-align: center;
}

.space-bottom-small {
  margin-bottom: 0.5rem;
  margin-top: 0;
}
.space-top-small {
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.space-bottom {
  margin-bottom: 1rem;
  margin-top: 0;
}
.space-top {
  margin-top: 1rem;
  margin-bottom: 0;
}
.space-bottom-large {
  margin-bottom: 2rem;
}
.space-top-large {
  margin-top: 2rem;
}

.svg {
  margin: 0 0.2rem 0.1rem 0;
  width: 19px; height: 18px;

  vertical-align: middle;

  display: inline;
}

.text-box {
  padding: 0.5rem;

  display: block;

  font-size: 16px;

  text-decoration: none;

  border: none;
  border-radius: var(--rad);
}

/*
  -=-=-= ALERT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/
.alert {
  padding: 1rem;

  width: auto;

  text-align: center;

  display: block;

  border-radius: var(--rad);

  outline: 0.5rem solid var(--bg);
}
.alert-high {
  background-color: var(--green);
}
.alert-low {
  background-color: var(--red);
}
.alert-default {
  background-color: var(--black);
}

/*
  -=-=-= FORM =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/
form {
  width: 100%;
  box-sizing: border-box;
}
form * {
  width: 100%;
  box-sizing: border-box;
}

/*
  -=-=-= BUTTONS =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/
.btn {
  padding: 0.5rem;

  display: block;

  font-size: 16px;

  text-decoration: none;

  border: none;
  border-radius: var(--rad);

  transition: outline 0.1s cubic-bezier(.19,1,.22,1);
}
.btn:hover {
  outline: var(--white) 3px solid;
  color: var(--fg);
}
a.btn {
  margin-bottom: 0;
  text-align: center;
}

/*
  -=-=-= FLYOUT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/
.flyout {
  margin: 0; padding: 0.5rem 0.5rem 1.5rem;

  max-width: 621px; width: calc(100% - 2.5rem + 3px);
  max-height: 20rem; height: auto; min-height: 10rem;

  bottom: -20rem; left: 50%;

  transform: translateX(-50%) scale(0.8);

  position: fixed; z-index: 99999;

  overflow-y: auto;

  border: 0.2rem solid var(--green);
  border-bottom: none;
  border-radius: inherit inherit none none;

  word-wrap: break-word;

  transition: bottom 0.5s cubic-bezier(.19,1,.22,1), transform 0.5s cubic-bezier(.19,1,.22,1);
}

.flyout-dim {
  margin: 0; padding: 0;

  width: 100vw; height: 100vh;

  left: 0; top: 0;

  position: fixed; z-index: 99998;

  opacity: 0.8;

  display: none;

  background: var(--bg);
}

/*
  -=-=-= FONT SIZES =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/
h1, h2, h3, h4 {
  margin: 0 0 0.5rem 0;
  font-family: "Lexend Deca", sans-serif;
}
h1 {
  font-size: 30px;
}
h2 {
  font-size: 27px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 21px;
}

p, a {
  margin: 0 0 0.5rem 0;
  font-family: "Fira Code", monospace;
}
a {
  text-decoration: none;
}
a:hover {
  color: var(--orange);
}