html {
  --white: #fafafa;
  --primary-dark: #96076b;
  --primary-light: #ed7acb;
  --secondary-dark: #1c76a2;
  --secondary-light: #52baed;
  background-color: var(--white);
}

body {
    max-width: 850px;
    margin: 0em auto;
    background-color: var(--white);
    color: #444444;
    font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;  
    box-shadow: 0px 0px 15px rgb(100, 100, 100);
    min-height: 100vh;
}

h1 {
    font-size: 1.5em;
    font-family: "Slabo 27px", serif;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 0;
    color: var(--primary-dark);
    width: 100%;
}

h2 {
    font-size: 1.3em;
    margin: 0.2em 0;
    font-family: "Slabo 27px", serif;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 1em;
    color: var(--primary-dark);
    width: 100%;
}

h3 {
    font-size: 1.1em;
    margin: 1.3em 0 0.3em 0;
}

article {
    width: 100%;
}

p, ul {
  width: 80%;
}

img {
  cursor: pointer;

  &:hover {
    box-shadow: 0px 0px 7px rgb(100, 100, 100);
  }
}

header {
    padding-left: 5%;
    display: flex;
    background-color: var(--primary-dark);
    border-bottom: 3px solid var(--primary-light);

    > a {
      margin-bottom: -3px;
      padding: 13px 10px 18px 10px;
      color: var(--white);
      text-decoration: inherit;
      font-weight: bold;
      font-size: 1em;

      &:hover {
        padding: 13px 10px 10px 10px;
        color: var(--primary-light);
        border-bottom: 4px solid var(--primary-light);
      }
      
      &.current {
          padding: 13px 10px 10px 10px;
          color: var(--white);
          font-weight: bolder;
          background-color: var(--secondary-dark);
          border-bottom: 4px solid var(--secondary-light);
      }
    }
}

main {
    padding: 1em 5%;
    width: 90%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}

#price {
    background-color: #444488;
    color: #eeeeee;
    padding: 0.5em;
    border-radius: 15px;
}

.viewer-large {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
}

.viewer-large > img {
    margin: 3px;
}

.viewer-compact {
    max-width: 640px;
    margin: auto;
}

.viewer-compact > img {
    width: 100px;
    height: 100px;
    margin: 3px;
    overflow: hidden;
}

.rooms {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

  > h3 {
      width: 100%;
  }
  
  > p {
      width: 380px;
  }
}