/* *********************************************************************** */
/* *** COMMON / RESET **************************************************** */
/* *********************************************************************** */


*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

:root, html {
  box-sizing: border-box;
  font-size: 62.5%; /* Sets REM to 10px */

  --link-color: #999;
  --barcolor: #F0F0F0;
  --bodycolor: white;
  --maincolor: #FAFAFA;
  --coasterbg: #F5F5F5;
  --okorange: #fbd150;

  --coaster_element_margin: 2rem;
}



.p--underline {
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--barcolor); 
}

ul {
  padding-left: 1rem;

  li {
    padding: 1rem 0;
    list-style-type:  "- ";
  }
}

body {
  margin: 0 auto;
  font-family: "Sintony", sans-serif;
  background-image: url("/images/backgrounds/bg.gif");
 /* font-weight: 300;
  font-style: normal;
  font-size: clamp(1.6rem, 1rem + 1vw, 3em);
  line-height: 1.4; */
}

main {
  min-height: 50vh;
  background-color: var(--pagecolor);
  display: flex;
  flex-wrap: wrap;
  flex: 1 0 auto;
  flex-direction: column;
  background-color: var(--maincolor);
}

.main--gradient {
  border-radius: 2% 0 0 0;
  background-image: linear-gradient(
    to bottom right,
   rgba(255, 0, 0, 0.8),
   rgba(255, 255, 0, 0.649)
  );
}

.page {
  background-color: var(--bodycolor);
  margin: 2rem;
  padding: 2px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

header, footer {
  padding: 0.5rem 2rem;
  flex-wrap: wrap;
  background-color: var(--barcolor);
}

header {
  border-radius: 5px 5px 0 0;
  border-bottom: 2px solid var(--bodycolor);
  nav {
    display: flex;
    justify-content: space-between;
  }
}

footer {
  border-top: 2px solid var(--bodycolor);
  border-radius: 0 0 5px 5px;
  text-align: right;
}

.motd {
    font-weight: lighter;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: left;
    padding: 1rem;
    font-size: smaller;
    /* border-radius: 50% 50% 0% 0% / 1% 1% 10% 10%; */
}


.coaster {
  justify-self: center;
  background-image:
   linear-gradient(to right, var(--coasterbg), var(--maincolor));
  margin: 1rem 0;
  padding: 1rem;
  
  .coaster__text--linklike {
    color: var(--link-color);
    letter-spacing: 1px;
  }
  &>img {
    margin: 1rem 0;
    border: 2px solid white;
    border-radius: 10px;
  }
  p:not(:first-of-type) {
    margin-top: 1rem;
  }

  &.coaster--half {
   /* background-image: none;*/
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-around;
    padding: 2rem;

    div {
      flex: 1 0 30%;
      height: fit-content;

      p {
        background-color: var(--coasterbg);
        margin-bottom: 1rem;
        border-radius: 5px;
        padding: 1rem;
      }
    }
  }
}

.coaster__message {
  background-color: pink;
  padding: 1rem;
  border-radius: 5px;
  
  &::before {
    content: "❗"
  }
}

.coaster--framed {
  color: var(--link-color);
  border-radius: 10px;
  background-color: var(--okorange);
}

.coaster--gradient {
  color: var(--link-color);
  border-radius: 10px;
  background-image: linear-gradient(
    to right, var(--okorange), var(--maincolor)
  );
}

.coaster--gradient-greenish {
  color: var(--link-color);
  border-radius: 10px;
  background-image: linear-gradient(
    to right, #7ca909, var(--maincolor)
  );
}


.deco {
  width: fit-content;
  /*  margin: var(--coaster_element_margin); */
  max-height: 100%;

  img {
    filter: contrast(30%);
    transition:ease-in-out 300ms;
    &:hover {
      filter: none;
    }
    display: block; /* fit-content doesn't work as expected without this! */
    clip-path: inset(1% 1% 1% 1% round 2%);
  }
}

.discovered {
  img {
    filter: none;
  }
}

/* *********************************************************************** */
/* *** Forms ************************************************************* */
/* *********************************************************************** */

.formline {
  display: flex;
  align-items: center;
  gap: 1rem;

  input {
    flex-grow: 1;
    font-size: inherit;
    border-radius: 5px;
    border: none;
    padding: 0.5rem;
  }
}

form button {
  font-size: inherit;
  padding: 1rem;
  border-radius: 10px;
  border: none;
  box-shadow: inset 0 -3em 3em rgb(0 200 0 / 30%), 0 0 0 2px white;
}



/* *********************************************************************** */
/* *** Picture card  ***************************************************** */
/* *********************************************************************** */


.tiltframe {

  margin: 2rem 1rem;
  padding: 1rem;
  background-color: white;
  background-image: linear-gradient(150deg, var(--coasterbg), white);
  border: 1px solid #cccccc;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.3);

  &:hover {
    transform:scale(1.2);
  }
}

/* *********************************************************************** */
/* *** Modifiers for Inline Elements ************************************* */
/* *********************************************************************** */

a {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
  &:link, &:visited {
      color: var(--link-color);
      letter-spacing: 1px;
  }
}

.a--flip {
  text-decoration: none;
  padding: 0.1rem 1rem;
  margin-top: 1rem;
  letter-spacing: 1px;
  font-size: smaller;
  background-color: #211;
  font-weight: 400;
  display: inline-block;
  border-radius: 3px;
  color: var(--okorange);

  &.a--flip:hover {
    transform: rotate(-5deg);
  }
  &:link, &:visited {
      color: var(--okorange);
  }
}

.email-link::after {
  content: "📩";
}

.menu__main--link {
  margin-top: 1rem;

  a {
    padding: 0 1rem;
    background-color: white;
  }
}

.icon {
  vertical-align: text-bottom;
  opacity: 0.3;
}

.pic-title {
  font-variant: small-caps;
  font-size: larger;
}

.pic-tags {
  font-family: 'Courier New', Courier, monospace;
  font-size: smaller;
}

.pic-links {
  font-family: 'Courier New', Courier, monospace;
  font-size: smaller;
  
  a::before {
    content: "► ";
  }
}

/* *********************************************************************** */
/* *** MOBILE ************************************************************ */
/* *********************************************************************** */


@media screen and (width < 800px) {

  .coaster {
    margin: 1rem;
  }

  body {
    font-size: 2rem;
    line-height: 1.4;
    max-width: 480px;
    background-image: none;
  }

  .page {
    margin: 1rem 0;
  }

  footer {
      text-align: center;
  }

  button.coaster {
    margin-left: 2rem;
  }

  .deco {
    align-self: center;
  }

  .tiltframe {
    transform:rotate(0); 
  }

}

/* *********************************************************************** */
/* *** DESKTOP  ********************************************************** */
/* *********************************************************************** */


@media screen and (width >= 800px) {
  body {
    font-size: 2rem;
    line-height: 1.4;
    max-width: 1024px;
  }
  .coaster {
    margin: 2rem;
    border-radius: 5px;
  }
}