분류 css

CSS Grid: Style Guide

컨텐츠 정보

  • 조회 101 (작성일 )

본문

https://codepen.io/oliviale/pen/GbmyYx 


HTML : 



<input class="variation" id="bluepurple" type="radio" value="1" name="color" checked="checked"/>

<label for="bluepurple"></label>

<input class="variation" id="sunset" type="radio" value="2" name="color"/>

<label for="sunset"></label>

<input class="variation" id="godiva" type="radio" value="3" name="color"/>

<label for="godiva"></label>

<input class="variation" id="dark" type="radio" value="4" name="color"/>

<label for="dark"></label>

<input class="variation" id="pinkaru" type="radio" value="5" name="color"/>

<label for="pinkaru"></label>

<main>

  <section class="forms">

    <h6>Form</h6>

    <h1>Login for more aww-someness.</h1>

    <form class="form-login">

      <div class="input__wrapper">

        <label class="label-form">Email</label>

        <input class="input-form" type="text" placeholder="email@email.com"/>

      </div>

      <div class="input__wrapper">

        <label class="label-form">Password</label>

        <input class="input-form" type="password" placeholder="Password (At least 8 characters)"/>

      </div>

      <div class="checkbox">

        <input id="checkbox-rem" type="checkbox"/>

        <label for="checkbox-rem">Remember Me<span class="box"></span></label>

      </div><a class="button" id="login">Login</a>

      <div class="spinner__wrapper">

        <div class="spinner-1">

          <div class="spinner" data-loading="Loading..."></div>

          <label>Logging you in...</label>

        </div>

      </div>

    </form>

  </section>

  <section class="filter-section">

    <h6>Filters</h6>

    <div class="filters">

      <h5 class="filters__title">Dog Type</h5>

      <div class="filters__item">

        <div class="checkbox">

          <input id="checkbox-1" type="checkbox"/>

          <label for="checkbox-1">Puppy<span class="box"></span>

            <div class="tooltip top" data-tooltip="Younger than 18 months."><span><i class="icon-info"></i></span></div>

          </label>

        </div><span class="badge status-primary">10</span>

      </div>

      <div class="filters__item">

        <div class="checkbox">

          <input id="checkbox-2" type="checkbox" checked="checked"/>

          <label for="checkbox-2">Young<span class="box"></span></label>

        </div><span class="badge status-primary">5</span>

      </div>

      <div class="filters__item">

        <div class="checkbox">

          <input id="checkbox-3" type="checkbox"/>

          <label for="checkbox-3">Adult<span class="box"></span></label>

        </div><span class="badge status-primary">20</span>

      </div>

      <div class="filters__item">

        <div class="checkbox">

          <input id="checkbox-4" type="checkbox"/>

          <label for="checkbox-4">Senior<span class="box"></span></label>

        </div><span class="badge status-primary">8</span>

      </div>

    </div>

    <div class="filters">

      <h5 class="filters__title">Dog Size</h5>

      <div class="filters__item">

        <div class="checkbox">

          <input id="checkbox-5" type="checkbox"/>

          <label for="checkbox-5">Small<span class="box"></span></label>

        </div><span class="badge status-primary">9</span>

      </div>

      <div class="filters__item">

        <div class="checkbox">

          <input id="checkbox-6" type="checkbox" checked="checked"/>

          <label for="checkbox-6">Medium<span class="box"></span></label>

        </div><span class="badge status-primary">12</span>

      </div>

      <div class="filters__item">

        <div class="checkbox">

          <input id="checkbox-7" type="checkbox"/>

          <label for="checkbox-7">Large<span class="box"></span></label>

        </div><span class="badge status-primary">17</span>

      </div>

      <div class="filters__item">

        <div class="checkbox">

          <input id="checkbox-8" type="checkbox"/>

          <label for="checkbox-8">XL<span class="box"></span></label>

        </div><span class="badge status-primary">3</span>

      </div>

    </div>

  </section>

  <section class="well-cta-1">

    <h6>Call-to-action well: dark</h6>

    <div class="well-cta">

      <div class="well-cta__text">

        <h2>Having a "ruff" life?</h2>

        <p>Adopt a friend that will love you unconditionally as long as you give it food and snuggles. </p><a class="button medium">Find your life companion</a>

      </div>

      <div class="well-cta__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pug.png" alt="Picture of Pug"/></div>

    </div>

  </section>

  <section class="well-cta-2">

    <h6>Call-to-action well: light</h6>

    <div class="well-cta--form">

      <div class="well-cta--form__text">

        <h3>Subscribe to our newsletter!</h3>

        <p>Get the latest news on doggodoption. We are pawsitive we will not spam you.</p>

      </div>

      <div class="well-cta--form__input">

        <input class="input-form input--lg" type="text" placeholder="Your Email Here"/>

      </div>

      <div class="well-cta--form__cta"><a class="button secondary">Subscribe</a></div>

    </div>

  </section>

  <section class="tables">

    <h6>Table</h6>

    <div class="table__wrapper">

      <table class="table">

        <thead class="table__header">

          <tr>

            <td>Live?</td>

            <td>ID</td>

            <td>Name</td>

            <td>Breed</td>

            <td>Last Updated</td>

            <td>Status</td>

            <td> </td>

          </tr>

        </thead>

        <tbody class="table__body">

          <tr>

            <td> 

              <div class="checkbox-toggle">

                <input id="toggle-checkbox" type="checkbox" checked="checked"/>

                <label for="toggle-checkbox"></label>

              </div>

            </td>

            <td>0045</td>

            <td>Doggo Dogg</td>

            <td>Shiba Inu</td>

            <td>20 June 2019</td>

            <td><span class="badge status-primary">Available</span></td>

            <td> <span class="icon-options-vertical"></span></td>

          </tr>

          <tr>

            <td> 

              <div class="checkbox-toggle">

                <input id="toggle-checkbox-2" type="checkbox" checked="checked"/>

                <label for="toggle-checkbox-2"></label>

              </div>

            </td>

            <td>0044</td>

            <td>Labra-thor, Strongest Avenger</td>

            <td>Labrador Retriever</td>

            <td>20 June 2019</td>

            <td><span class="badge status-error">Pending</span></td>

            <td> <span class="icon-options-vertical"></span></td>

          </tr>

          <tr>

            <td> 

              <div class="checkbox-toggle">

                <input id="toggle-checkbox-3" type="checkbox"/>

                <label for="toggle-checkbox-3"></label>

              </div>

            </td>

            <td>0043</td>

            <td>Branch Manager</td>

            <td>Poodle</td>

            <td>20 June 2019</td>

            <td><span class="badge status-success">Adopted</span></td>

            <td> <span class="icon-options-vertical"></span></td>

          </tr>

        </tbody>

      </table>

    </div>

  </section>

  <section class="comments">

    <h6>Comments</h6>

    <div class="comment">

      <div class="comment__image"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Chris_Evans_SDCC_2014.jpg/330px-Chris_Evans_SDCC_2014.jpg" alt="Chris Evans lol"/></div>

      <div class="comment__info">

        <h5> <span>Chris Evans</span><span class="badge status-success"> <i class="icon-trophy"></i>Top Commenter </span></h5>

        <p class="comment__info__time">5 months ago</p>

      </div>

      <div class="comment__text">This dog may be the second cutest dog ever! After my dog, Dodger, of course.</div>

      <div class="comment__reaction"><a class="comment__reaction__heart"><i class="icon-heart"></i><span>25 hearts</span></a></div>

    </div>

  </section>

  <section class="modals">

    <h6>Modal</h6>

    <div class="panel">

      <div class="panel__image"><img src="https://images.pexels.com/photos/1498925/pexels-photo-1498925.jpeg?auto=format%2Ccompress&amp;cs=tinysrgb&amp;dpr=2&amp;w=500" alt="Human and Dog"/></div>

      <div class="panel__info">

        <h2>You are a trooper!</h2>

        <p>

           Thank you for your interest in <strong>Doggo Dogg. </strong>We will get back to you in 3 to 5 business days. </p>

        <!--p We would also like to take the oppawtunity to thank you for choosing to adopt, not shop.-->

        <!--.alert.status-error.non-collapsible

        strong Important: 

        | Please do not email us before we get back to you. You will be automatically be placed at the back of the email queue if you do so.

        -->

      </div>

      <div class="panel__cta"><a class="button secondary">Got it!</a></div>

    </div>

  </section>

  <section class="media-card-1">

    <h6>Media Card I</h6>

    <div class="profile profile-imgonly">

      <div class="profile__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/dog.png" alt="Doggo"/></div>

      <div class="profile__info">

        <h3>Doggo Dogg</h3>

        <p class="profile__info__extra">A very good boi that loves playing fetch and ice-cream! Gentle with everyone. Scared of the rain.</p>

      </div>

      <div class="profile__stats">

        <p class="profile__stats__title">Type</p>

        <h5 class="profile__stats__info">Puppy</h5>

      </div>

      <div class="profile__stats">

        <p class="profile__stats__title">Size</p>

        <h5>Medium</h5>

      </div>

      <div class="profile__stats">

        <p class="profile__stats__title">Weight</p>

        <h5 class="profile__stats__info">45.85 lbs</h5>

      </div>

      <div class="profile__cta"><a class="button">Adopt Doggo!</a></div>

    </div>

  </section>

  <section class="media-card-2">

    <h6>Media Card II</h6>

    <div class="profile profile-default">

      <div class="profile__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/dog.png" alt="Doggo"/></div>

      <div class="profile__info">

        <h3>Doggo Dogg</h3>

        <p class="profile__info__extra">A very good boi that loves playing fetch and ice-cream! Gentle with everyone. Scared of the rain.</p>

      </div>

      <div class="profile__stats">

        <p class="profile__stats__title">Type</p>

        <h5 class="profile__stats__info">Puppy</h5>

      </div>

      <div class="profile__stats">

        <p class="profile__stats__title">Size</p>

        <h5>Medium</h5>

      </div>

      <div class="profile__stats">

        <p class="profile__stats__title">Weight</p>

        <h5 class="profile__stats__info">45.85 lbs</h5>

      </div>

      <div class="profile__cta"><a class="button">Adopt Doggo!</a></div>

    </div>

  </section>

  <section class="media-card-3">

    <h6>Media Card III</h6>

    <div class="profile profile-long">

      <div class="profile__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/dog.png" alt="Doggo"/></div>

      <div class="profile__info">

        <h3>Doggo Dogg</h3>

        <p class="profile__info__extra">A very good boi that loves playing fetch and ice-cream! Gentle with everyone. Scared of the rain.</p>

      </div>

      <div class="profile__stats">

        <p class="profile__stats__title">Type</p>

        <h5 class="profile__stats__info">Puppy</h5>

      </div>

      <div class="profile__stats">

        <p class="profile__stats__title">Size</p>

        <h5>Medium</h5>

      </div>

      <div class="profile__stats">

        <p class="profile__stats__title">Weight</p>

        <h5 class="profile__stats__info">45.85 lbs</h5>

      </div>

      <div class="profile__cta"><a class="button">Adopt Doggo!</a></div>

    </div>

  </section>

</main>

<footer>

  <div class="explanation">Part of the  <a href="https://codepen.io/collection/DQvYpQ" target="_blank">CSS Grid collection here</a>. A continuation of <a href="https://codepen.io/oliviale/full/mgWjpq" target="_blank">Part I</a> and <a href="https://codepen.io/oliviale/full/WqwOzv" target="_blank">Part II</a>.</div>

  <div class="social"><a href="https://twitter.com/meowlivia_" target="_blank"><i class="icon-social-twitter icons"></i></a><a href="https://github.com/oliviale" target="_blank"><i class="icon-social-github icons"></i></a><a href="https://dribbble.com/oliviale" target="_blank"><i class="icon-social-dribbble icons"></i></a></div>

</footer>


CSS : 


:root {

  --canvasColor: #f9f9f9;

}


body {

  background: var(--canvasColor);

  font-family: "Poppins", sans-serif;

  font-weight: 300;

  line-height: 1.5;

  font-size: 16px;

  text-align: center;

  transition: all .3s ease;

}


* {

  box-sizing: border-box;

}


main {

  --neutralShade0: #f8f8f8;

  --neutralShade1: #f2f2f2;

  --neutralShade2: #e8e9e9;

  --neutralShade3: #d1d3d4;

  --neutralShade4: #babdbf;

  --neutralShade5: #808488;

  --neutralShade6: #666a6d;

  --neutralShade7: #4d5052;

  --neutralShade8: #212122;

  --grayColor: #999;

  --lightGrayColor: #ddd;

  --borderRadius: 6px;

  --boxShadow: 0 2px 5px rgba(#333, 0.2);

}


/*overall layout*/

main {

  width: 90%;

  max-width: 1050px;

  margin: 3em auto 0;

  border: 1px solid var(--accentColor);

  display: grid;

  grid: repeat(5, fit-content(300px))/100%;

  color: var(--foregroundColor);

  text-align: left;

}


main section {

  border: 1px solid var(--accentColor);

  position: relative;

  padding: 40px 40px 50px;

}

main section > h6 {

  color: var(--accentColor);

  background: var(--canvasColor);

  position: absolute;

  top: -10px;

  left: 20px;

  padding: 0 10px;

}

main section h6.subheader {

  color: var(--grayColor);

  margin-top: 20px;

  margin-bottom: 20px;

  width: 100%;

}


@media (max-width: 992px) {

  section:not(:last-child) {

    border-width: 0 0 1px;

  }


  section:last-child {

    border-width: 0;

  }

}

@media (min-width: 992px) {

  main {

    grid: repeat(9, auto)/45% 1fr 45%;

    grid-auto-flow: dense;

  }


  .media-card-1 {

    grid-column: 1 / 2;

    border-width: 1px 0;

  }


  .media-card-2 {

    grid-column: 2 / 4;

    border-width: 1px 0 1px 1px;

  }


  .media-card-3 {

    grid-column: 1 / 4;

    border-width: 0;

  }


  .filter-section {

    grid-column: 3 / 4;

    grid-row: 1 / 2;

    border-width: 0 0 0 1px;

  }


  .well-cta-1 {

    grid-row: 3;

    grid-column: 1 / 3;

    border-width: 1px 1px 0 0;

  }


  .well-cta-2 {

    grid-row: 2;

    grid-column: 2 / 4;

    border-width: 1px 0 0;

  }


  .tables {

    grid-row: 4;

    grid-column: 1 / -1;

    border-width: 1px 0 0;

  }


  .forms {

    grid-column: 1 / 3;

    border-width: 0;

  }


  .comments {

    grid-row: 2;

    grid-column: 1 / 2;

    border-width: 1px 1px 0 0;

    padding-top: 60px;

  }


  .modals {

    grid-row: 3;

    grid-column: 3 / 4;

    justify-content: center;

    border-width: 1px 0 0;

  }

}

/*typography*/

strong {

  font-weight: 500;

}


em {

  font-style: italic;

}


h1 {

  font: 700 48px/1.2 "Poppins", sans-serif;

  margin-bottom: 10px;

}


h2 {

  font: 700 32px/1.2 "Poppins", sans-serif;

  margin-bottom: 10px;

}


h3 {

  font: 700 24px/1.2 "Poppins", sans-serif;

  margin-bottom: 10px;

}


h4 {

  font: 700 20px/1.2 "Poppins", sans-serif;

  margin-bottom: 10px;

}


h5 {

  font: 500 18px/1.2 "Poppins", sans-serif;

  margin-bottom: 10px;

}


h6 {

  font: 500 16px/1.2 "Poppins", sans-serif;

  text-transform: uppercase;

}


/*checkboxes*/

input:disabled ~ * {

  opacity: 0.3;

  user-select: none;

  pointer-events: none;

}


.checkbox-toggle input {

  display: none;

}

.checkbox-toggle label {

  outline: 0;

  display: block;

  width: 45px;

  height: 16px;

  background: var(--grayColor);

  position: relative;

  cursor: pointer;

  border-radius: 2em;

  padding: 2px;

  transition: all 0.4s ease;

  margin: 0;

}

.checkbox-toggle label:after {

  position: relative;

  display: block;

  content: "";

  width: 20px;

  height: 20px;

  border-radius: 50%;

  background: #fff;

  transition: all 0.2s ease;

  border: 1px solid var(--grayColor);

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

  left: -4px;

  top: -5px;

}

.checkbox-toggle input:checked + label {

  background: var(--accent2Color);

}

.checkbox-toggle input:checked + label:after {

  left: 52%;

}


.checkbox {

  position: relative;

  user-select: none;

  margin-bottom: 10px;

}

.checkbox input {

  display: none;

}

.checkbox label {

  position: relative;

  vertical-align: middle;

  cursor: pointer;

  font-weight: 500;

  padding-left: 35px;

}

.checkbox span.box {

  display: inline-block;

  width: 20px;

  border-radius: var(--borderRadius);

  border: 1px solid var(--grayColor);

  width: 24px;

  height: 24px;

  vertical-align: middle;

  margin-right: 3px;

  transition: 0.3s ease;

  position: absolute;

  left: 0;

}

.checkbox span.box:before, .checkbox span.box:after {

  content: "";

  position: absolute;

  width: 4px;

  height: 16px;

  border-radius: 40px;

  background: var(--backgroundColor);

  transition: all 0.3s ease;

}

.checkbox span.box:before {

  transform: rotate(45deg) translateY(-5px) translateX(10px) scale(0);

}

.checkbox span.box:after {

  height: 8px;

  transform: rotate(-45deg) translateY(10px) translateX(-4px) scale(0);

}

.checkbox input:checked + label span.box {

  background: var(--accent2Color);

  border-color: var(--accent2Color);

}

.checkbox input:checked + label span.box:before {

  transform: rotate(45deg) translateY(-5px) translateX(10px) scale(1);

}

.checkbox input:checked + label span.box:after {

  height: 8px;

  transform: rotate(-45deg) translateY(10px) translateX(-4px) scale(1);

}

.checkbox input:disabled:checked + span.box {

  background: var(--grayColor);

  border: var(--grayColor);

}

.checkbox input:disabled:checked ~ label:before, .checkbox input:disabled:checked ~ label:after {

  background: black;

}


/*buttons & links*/

.links__sec {

  margin: 10px 0 30px;

}

.links a.link {

  display: inline;

  margin: 10px 30px 5px 0;

  border-bottom: 2px dashed;

  font-weight: 500;

  line-height: 2.5;

  cursor: pointer;

  color: var(--neutralShade5);

}

.links a.link:hover, .links a.link.hover {

  color: var(--neutralShade6);

  border-bottom: 2px solid;

}

.links a.link.primary {

  color: var(--primaryColor);

}

.links a.link.primary:hover, .links a.link.primary.hover {

  color: var(--primaryShade5);

}

.links a.link.secondary {

  color: var(--secondaryColor);

}

.links a.link.secondary:hover, .links a.link.secondary.hover {

  color: var(--secondaryShade5);

}


.buttons {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

}

.buttons > * {

  flex: 1 1 calc(50% - 20px);

  margin-top: 20px;

}

.buttons > *:nth-child(odd) {

  margin-right: 20px;

}


a.button,

input.button,

button {

  outline: none;

  width: 100%;

  text-align: center;

  display: inline-block;

  border: none;

  font: 500 16px/1 "Poppins", sans-serif;

  padding: 20px;

  cursor: pointer;

  border-radius: var(--borderRadius);

  background: var(--primaryColor);

  color: var(--backgroundColor);

  position: relative;

  top: 0;

  transition: 0.2s ease;

}

a.button:hover, a.button.hover,

input.button:hover,

input.button.hover,

button:hover,

button.hover {

  top: -3px;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);

}

a.button:active, a.button.active,

input.button:active,

input.button.active,

button:active,

button.active {

  background: var(--primaryShade4);

  outline: none;

  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);

  top: 0;

}

a.button.disabled,

input.button.disabled,

button.disabled {

  opacity: 0.4;

  user-select: none;

  pointer-events: none;

}

a.button.medium,

input.button.medium,

button.medium {

  padding: 15px 18px;

  width: auto;

}

a.button.small,

input.button.small,

button.small {

  padding: 10px 12px;

  width: auto;

  font-size: 14px;

  font-weight: 500;

}

a.button.secondary,

input.button.secondary,

button.secondary {

  background: var(--secondaryColor);

}

a.button.secondary:active, a.button.secondary:focus, a.button.secondary.active,

input.button.secondary:active,

input.button.secondary:focus,

input.button.secondary.active,

button.secondary:active,

button.secondary:focus,

button.secondary.active {

  background: var(--secondaryShade4);

  outline: none;

}

a.button.accent,

input.button.accent,

button.accent {

  background: var(--accentColor);

}

a.button.accent:active, a.button.accent:focus, a.button.accent.active,

input.button.accent:active,

input.button.accent:focus,

input.button.accent.active,

button.accent:active,

button.accent:focus,

button.accent.active {

  background: var(--accentShade4);

}

a.button.accent2,

input.button.accent2,

button.accent2 {

  background: var(--accent2Color);

}

a.button.accent2:active, a.button.accent2:focus, a.button.accent2.active,

input.button.accent2:active,

input.button.accent2:focus,

input.button.accent2.active,

button.accent2:active,

button.accent2:focus,

button.accent2.active {

  background: var(--accent2Shade4);

}

a.button.accent3,

input.button.accent3,

button.accent3 {

  background: var(--accent3Color);

}

a.button.accent3:active, a.button.accent3:focus, a.button.accent3.active,

input.button.accent3:active,

input.button.accent3:focus,

input.button.accent3.active,

button.accent3:active,

button.accent3:focus,

button.accent3.active {

  background: var(--accent3Shade4);

}


/*inputs*/

.input__wrapper {

  margin-bottom: 30px;

}


.label-form {

  font-weight: 500;

  display: block;

  margin-bottom: 5px;

}


input.input-form,

select,

textarea {

  height: 50px;

  font-size: 16px;

  border: 2px solid var(--neutralShade3);

  width: 100%;

  padding: 12px;

  font-family: "Poppins";

  border-radius: var(--borderRadius);

  color: var(--foregroundColor);

  background: var(--backgroundColor);

}

input.input-form:focus, input.input-form.active,

select:focus,

select.active,

textarea:focus,

textarea.active {

  outline: none;

  border-color: var(--primaryColor);

}

input.input-form:disabled,

select:disabled,

textarea:disabled {

  cursor: not-allowed;

  background: var(--neutralShade1);

  opacity: 0.6;

}


input.input-form.input--lg {

  height: 56px;

  font-size: 18px;

  padding: 15px;

}


/*badges*/

.badge {

  display: inline-block;

  padding: 6px 12px;

  border-radius: 50px;

  font-weight: 500;

  text-transform: uppercase;

  line-height: 1;

}


.alert {

  margin-bottom: 15px;

  display: block;

  padding: 10px 15px;

  border-radius: var(--borderRadius);

  font-weight: 500;

  position: relative;

  cursor: pointer;

}

.alert.non-collapsible:before, .alert.non-collapsible:after {

  content: none;

}

.alert:before, .alert:after {

  content: "";

  position: absolute;

  width: 4px;

  height: 16px;

  border-radius: 40px;

  right: 30px;

  top: 8px;

}

.alert:before {

  transform: rotate(45deg) translateY(-5.5px) translateX(13.5px);

}

.alert:after {

  transform: rotate(-45deg) translateY(13.5px) translateX(5.5px);

}


.status-primary {

  background: var(--primaryShade1);

  color: var(--primaryShade5);

}

.status-primary:before, .status-primary:after {

  background: var(--primaryShade5);

}


.status-secondary {

  background: var(--secondaryShade1);

  color: var(--secondaryShade5);

}

.status-secondary:before, .status-secondary:after {

  background: var(--secondaryShade5);

}


.status-info {

  background: var(--accentShade1);

  color: var(--accentShade5);

}

.status-info:before, .status-info:after {

  background: var(--accentShade5);

}


.status-success {

  background: var(--accent2Shade1);

  color: var(--accent2Shade5);

}

.status-success:before, .status-success:after {

  background: var(--accent2Shade5);

}


.status-error {

  background: var(--accent3Shade1);

  color: var(--accent3Shade5);

}

.status-error:before, .status-error:after {

  background: var(--accent3Shade5);

}


/*tooltips*/

.tooltip {

  cursor: pointer;

  position: relative;

  display: block;

  width: 100%;

  text-align: center;

  z-index: 10;

}

.tooltip span {

  border-bottom: 1px dotted;

}

.tooltip:after {

  content: attr(data-tooltip);

  background: var(--neutralShade2);

  max-width: 90%;

  width: auto;

  position: absolute;

  left: 0;

  right: 0;

  margin: auto;

  opacity: 0;

  height: auto;

  font-size: 14px;

  padding: 10px;

  border-radius: var(--borderRadius);

  color: var(--foregroundColor);

  text-align: center;

}

.tooltip.dark:after {

  background: var(--neutralShade7);

  color: var(--backgroundColor);

}

.tooltip.top:after {

  bottom: 80%;

  transition: opacity 0.3s ease 0.3s, bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;

}

.tooltip.top:hover:after, .tooltip.top.hovered:after {

  bottom: 130%;

  opacity: 1;

}

.tooltip.bottom:after {

  top: 80%;

  transition: opacity 0.3s ease 0.3s, top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;

}

.tooltip.bottom:hover:after, .tooltip.bottom.hovered:after {

  top: 130%;

  opacity: 1;

}


/*spinner*/

.spinner + label {

  font-size: 14px;

  font-weight: 500;

  margin-top: 8px;

  display: inline-block;

  text-transform: uppercase;

  color: var(--primaryShade4);

}


.spinner-1 .spinner {

  max-width: 50px;

  margin: auto;

  height: 20px;

  position: relative;

}

.spinner-1 .spinner:after {

  content: "";

  position: absolute;

  width: 20px;

  height: 20px;

  left: -10%;

  background: var(--primaryColor);

  animation: spinnerLeftRight 1s infinite;

}

.spinner-1 .spinner:before {

  content: "";

  position: absolute;

  width: 20px;

  height: 20px;

  left: -10%;

  background: var(--primaryShade2);

  opacity: 1;

  animation: spinnerLeftRight 1s infinite 0.06s;

}


@keyframes spinnerLeftRight {

  0% {

    left: 85%;

  }

  50% {

    left: -10%;

  }

  100% {

    left: 85%;

  }

}

/*variations*/

input.variation {

  display: none;

}

input.variation + label {

  display: inline-block;

  width: 50px;

  height: 50px;

  margin: 30px 20px 0;

  border-radius: 50%;

  cursor: pointer;

  border: 6px solid #fff;

  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);

}


@media (min-width: 500px) {

  input.variation + label {

    margin: 70px 20px 20px;

  }

}

#bluepurple + label {

  background: linear-gradient(to left, #673ab7 50%, #03a9f4 50%);

}

#bluepurple:checked ~ main {

  --backgroundColor: #fff;

  --foregroundColor: #111;

  --primaryColor: #03a9f4;

  --primaryShade1: #e1f5fe;

  --primaryShade2: #b3e5fc;

  --primaryShade3: #4fc3f7;

  --primaryShade4: #0288d1;

  --primaryShade5: #0277bd;

  --secondaryColor: #673ab7;

  --secondaryShade1: #ede7f6;

  --secondaryShade2: #d1c4e9;

  --secondaryShade3: #9575cd;

  --secondaryShade4: #512da8;

  --secondaryShade5: #311b92;

  --accentColor: #009688;

  --accentShade1: #e0f2f1;

  --accentShade2: #b2dfdb;

  --accentShade3: #4db6ac;

  --accentShade4: #00796b;

  --accentShade5: #004d40;

  --accent2Color: #8bc34a;

  --accent2Shade1: #e7f6d5;

  --accent2Shade2: #c5e1a5;

  --accent2Shade3: #aed581;

  --accent2Shade4: #689f38;

  --accent2Shade5: #558b2f;

  --accent3Color: #f44336;

  --accent3Shade1: #ffdde0;

  --accent3Shade2: #ffcdd2;

  --accent3Shade3: #ef9a9a;

  --accent3Shade4: #d32f2f;

  --accent3Shade5: #b71c1c;

}


#sunset + label {

  background: linear-gradient(to right, #ff9557 50%, #ffcc67 50%);

}

#sunset:checked ~ main {

  --canvasColor: #f9f9f9;

  --backgroundColor: #fff;

  --foregroundColor: #111;

  --primaryColor: #ff9557;

  --primaryShade1: #ffe2d1;

  --primaryShade2: #ffceb2;

  --primaryShade3: #ffb184;

  --primaryShade4: #e88850;

  --primaryShade5: #d17a48;

  --secondaryColor: #ffcc67;

  --secondaryShade1: #fff1d5;

  --secondaryShade2: #ffde9e;

  --secondaryShade3: #ffd074;

  --secondaryShade4: #e8ba5e;

  --secondaryShade5: #ba954b;

  --accentColor: #4e5166;

  --accentShade1: #cecfd5;

  --accentShade2: #aeafb9;

  --accentShade3: #8e909d;

  --accentShade4: #6e7081;

  --accentShade5: #404354;

  --accent2Color: #588b8b;

  --accent2Shade1: #c2d4d4;

  --accent2Shade2: #a3bfbf;

  --accent2Shade3: #85aaaa;

  --accent2Shade4: #507f7f;

  --accent2Shade5: #497272;

  --accent3Color: #fe5f55;

  --accent3Shade1: #fec4c1;

  --accent3Shade2: #fea7a2;

  --accent3Shade3: #fe7c73;

  --accent3Shade4: #e7574e;

  --accent3Shade5: #b9463e;

}


#godiva + label {

  background: linear-gradient(to right, #a05793 50%, #a3d858 50%);

}

#godiva:checked ~ main {

  --canvasColor: #f9f9f9;

  --backgroundColor: #fff;

  --foregroundColor: #111;

  --primaryColor: #a05793;

  --primaryShade1: #e5d1e1;

  --primaryShade2: #d3b2cd;

  --primaryShade3: #b984b0;

  --primaryShade4: #925086;

  --primaryShade5: #834879;

  --secondaryColor: #a3d858;

  --secondaryShade1: #e5f4d1;

  --secondaryShade2: #cce9a3;

  --secondaryShade3: #bce285;

  --secondaryShade4: #95c550;

  --secondaryShade5: #779e41;

  --accentColor: #245e71;

  --accentShade1: #d7e1e5;

  --accentShade2: #afc4cb;

  --accentShade3: #7398a4;

  --accentShade4: #4b7b8a;

  --accentShade5: #1e4d5d;

  --accent2Color: #2aa5a1;

  --accent2Shade1: #d8eeed;

  --accent2Shade2: #9ed6d4;

  --accent2Shade3: #64bdba;

  --accent2Shade4: #279693;

  --accent2Shade5: #1f7976;

  --accent3Color: #92374d;

  --accent3Shade1: #ebdad3;

  --accent3Shade2: #cda4ae;

  --accent3Shade3: #af6d7d;

  --accent3Shade4: #853246;

  --accent3Shade5: #6b2939;

}


#dark + label {

  background: linear-gradient(to right, #367bc3 50%, #38bfa7 50%);

}

#dark:checked ~ main {

  --canvasColor: #111;

  --backgroundColor: #2a313b;

  --foregroundColor: #ebe8d8;

  --primaryColor: #367bc3;

  --primaryShade5: #b5cfe9;

  --primaryShade4: #91b7de;

  --primaryShade3: #5a93cd;

  --primaryShade2: #3270b2;

  --primaryShade1: #285a8e;

  --secondaryColor: #38bfa7;

  --secondaryShade5: #c8ede7;

  --secondaryShade4: #92dccf;

  --secondaryShade3: #6ed0be;

  --secondaryShade2: #33ae98;

  --secondaryShade1: #2e9d89;

  --accentColor: #586994;

  --accentShade5: #d1d6e1;

  --accentShade4: #a3adc4;

  --accentShade3: #7684a7;

  --accentShade2: #49567a;

  --accentShade1: #39435f;

  --accent2Color: #8fe1a2;

  --accent2Shade5: #d6f4dd;

  --accent2Shade4: #c1eecc;

  --accent2Shade3: #a3e6b2;

  --accent2Shade2: #82cd94;

  --accent2Shade1: #76b985;

  --accent3Color: #fe938c;

  --accent3Shade5: #fee1df;

  --accent3Shade4: #fec4c0;

  --accent3Shade3: #fea6a0;

  --accent3Shade2: #e78680;

  --accent3Shade1: #b96b66;

  color: #f1f2eb;

  border-color: #f1f2eb;

}

#dark:checked ~ main > section {

  border-color: #f1f2eb;

}

#dark:checked ~ main > section > h6 {

  color: #f1f2eb;

}


#pinkaru + label {

  background: linear-gradient(to right, #f95794 50%, #323da5 50%);

}

#pinkaru:checked ~ main {

  border-color: #fff;

  --canvasColor: #111;

  --backgroundColor: #2a313b;

  --foregroundColor: #e3f2fd;

  --primaryColor: #f95794;

  --primaryShade5: #fdd1e1;

  --primaryShade4: #fba3c4;

  --primaryShade3: #fa75a7;

  --primaryShade2: #e35087;

  --primaryShade1: #b6406c;

  --secondaryColor: #323da5;

  --secondaryShade5: #c7cae6;

  --secondaryShade4: #8f95cd;

  --secondaryShade3: #6971bd;

  --secondaryShade2: #2e3896;

  --secondaryShade1: #293288;

  --accentColor: #FFC729;

  --accentShade5: #ffefc4;

  --accentShade4: #ffe08a;

  --accentShade3: #ffd14f;

  --accentShade2: #e8b526;

  --accentShade1: #d1a322;

  --accent2Color: #53dd6c;

  --accent2Shade5: #d0f5d6;

  --accent2Shade4: #a1ecae;

  --accent2Shade3: #72e386;

  --accent2Shade2: #4cc963;

  --accent2Shade1: #3da14f;

  --accent3Color: #f52f57;

  --accent3Shade5: #fcc6d1;

  --accent3Shade4: #f98da3;

  --accent3Shade3: #f65475;

  --accent3Shade2: #df2b50;

  --accent3Shade1: #b32340;

}

#pinkaru:checked ~ main > section {

  border-color: #fff;

}

#pinkaru:checked ~ main > section > h6 {

  color: #fff;

}


#dark:checked ~ main h6.subheader,

#dark:checked ~ main .feedback-form,

#pinkaru:checked ~ main h6.subheader,

#pinkaru:checked ~ main .feedback-form {

  color: var(--neutralShade1);

}

#dark:checked ~ main ::placeholder,

#pinkaru:checked ~ main ::placeholder {

  color: var(--neutralShade4);

  opacity: 1;

}

#dark:checked ~ main :-ms-input-placeholder,

#pinkaru:checked ~ main :-ms-input-placeholder {

  color: var(--neutralShade4);

}

#dark:checked ~ main ::-ms-input-placeholder,

#pinkaru:checked ~ main ::-ms-input-placeholder {

  color: var(--neutralShade4);

}

#dark:checked ~ main .tooltip:after,

#pinkaru:checked ~ main .tooltip:after {

  color: var(--backgroundColor);

}

#dark:checked ~ main a.button,

#dark:checked ~ main input.button,

#dark:checked ~ main button,

#dark:checked ~ main .tooltip.dark:after,

#pinkaru:checked ~ main a.button,

#pinkaru:checked ~ main input.button,

#pinkaru:checked ~ main button,

#pinkaru:checked ~ main .tooltip.dark:after {

  color: var(--foregroundColor);

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

}

#dark:checked ~ main .button:active, #dark:checked ~ main .button.active,

#pinkaru:checked ~ main .button:active,

#pinkaru:checked ~ main .button.active {

  background: var(--primaryShade1);

}

#dark:checked ~ main .button.secondary:active, #dark:checked ~ main .button.secondary.active,

#pinkaru:checked ~ main .button.secondary:active,

#pinkaru:checked ~ main .button.secondary.active {

  background: var(--secondaryShade1);

}

#dark:checked ~ main .button.accent,

#pinkaru:checked ~ main .button.accent {

  background: var(--accentShade2);

}

#dark:checked ~ main .button.accent:active,

#pinkaru:checked ~ main .button.accent:active {

  background: var(--accentShade1);

}

#dark:checked ~ main .button.accent2,

#pinkaru:checked ~ main .button.accent2 {

  background: var(--accent2Shade2);

}

#dark:checked ~ main .button.accent2:active,

#pinkaru:checked ~ main .button.accent2:active {

  background: var(--accent2Shade1);

}

#dark:checked ~ main .button.accent3,

#pinkaru:checked ~ main .button.accent3 {

  background: var(--accent3Shade2);

}

#dark:checked ~ main .button.accent3:active,

#pinkaru:checked ~ main .button.accent3:active {

  background: var(--accent3Shade1);

}

#dark:checked ~ main a.link,

#pinkaru:checked ~ main a.link {

  color: var(--neutralShade2);

}

#dark:checked ~ main a.link:hover, #dark:checked ~ main a.link.hover,

#pinkaru:checked ~ main a.link:hover,

#pinkaru:checked ~ main a.link.hover {

  color: var(--neutralShade1);

  border-bottom: 2px solid;

}

#dark:checked ~ main a.link.primary,

#pinkaru:checked ~ main a.link.primary {

  color: var(--primaryShade4);

}

#dark:checked ~ main a.link.primary:hover, #dark:checked ~ main a.link.primary.hover,

#pinkaru:checked ~ main a.link.primary:hover,

#pinkaru:checked ~ main a.link.primary.hover {

  color: var(--primaryShade5);

}

#dark:checked ~ main a.link.secondary,

#pinkaru:checked ~ main a.link.secondary {

  color: var(--secondaryShade4);

}

#dark:checked ~ main a.link.secondary:hover, #dark:checked ~ main a.link.secondary.hover,

#pinkaru:checked ~ main a.link.secondary:hover,

#pinkaru:checked ~ main a.link.secondary.hover {

  color: var(--secondaryShade5);

}

#dark:checked ~ main .profile-default img,

#pinkaru:checked ~ main .profile-default img {

  border-bottom: 7px solid var(--secondaryShade5);

}


/* PROFILE CARDS */

.profile {

  position: relative;

  background: var(--backgroundColor);

  color: var(--foregroundColor);

  box-shadow: 0 3px 15px rgba(51, 51, 51, 0.2);

  border-radius: 10px;

  overflow: hidden;

  transition: .2s ease;

  display: grid;

  grid: 200px repeat(5, auto)/100%;

}

.profile__image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-bottom: 7px solid var(--secondaryColor);

}

.profile__info {

  padding: 20px 25px 0;

}

.profile__stats {

  padding: 5px 25px;

}

.profile__stats__title {

  color: var(--grayColor);

  text-transform: uppercase;

  font-size: 16px;

}

.profile__cta {

  padding: 0 25px 25px;

}

.profile a:hover {

  top: 0;

  box-shadow: none;

  background: var(--primaryShade4);

}

.profile a:active, .profile a:focus {

  top: 0;

  box-shadow: none;

  background: var(--primaryShade5);

}


@media (min-width: 500px) {

  .profile-default {

    min-width: 500px;

    max-width: 450px;

    margin: auto;

    overflow: hidden;

    grid: 340px auto auto/repeat(3, minmax(80px, 1fr));

    grid-gap: 10px;

  }

  .profile-default .profile__image {

    grid-column: span 3;

  }

  .profile-default .profile__info {

    grid-column: span 3;

  }

  .profile-default .profile__stats {

    padding: 5px 25px;

  }

  .profile-default .profile__cta {

    grid-column: span 3;

  }

}

@media (min-width: 768px) {

  .profile-long {

    grid-template-columns: 150px repeat(3, 1fr) auto;

    grid-template-rows: auto auto;

    width: 100%;

    padding-right: 20px;

  }

  .profile-long .profile__image {

    grid-column: 1 / 2;

    grid-row: 1 / 3;

    margin-right: 20px;

  }

  .profile-long .profile__image img {

    border-radius: 10px 0 0 10px;

    border: none;

  }

  .profile-long .profile__info {

    grid-column: 2 / 6;

    grid-row: 1;

    padding: 20px 20px 15px 0;

  }

  .profile-long .profile__stats {

    min-width: 100px;

    padding: 15px 0;

    border-top: 0.5px solid var(--grayColor);

    grid-row: 2 / 3;

  }

  .profile-long .profile__stats:nth-child(3) {

    grid-column: 2 / 3;

  }

  .profile-long .profile__stats:nth-child(4) {

    grid-column: 3 / 4;

  }

  .profile-long .profile__stats:nth-child(5) {

    grid-column: 4 / 5;

  }

  .profile-long .profile__cta {

    grid-row: 2 / 3;

    grid-column: 5 / 6;

    border-top: 0.5px solid var(--grayColor);

    padding: 15px 0 0;

  }

}

.profile-imgonly {

  border-radius: 10px;

  overflow: hidden;

  min-width: 250px;

  width: 100%;

  grid: 480px 0px / 100%;

}

.profile-imgonly:hover {

  grid: 434px 56px / 100%;

}

.profile-imgonly .profile__image, .profile-imgonly .profile__info {

  grid-row: 1 / 2;

  grid-column: 1 / 2;

}

.profile-imgonly .profile__image {

  position: relative;

}

.profile-imgonly .profile__image:after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 30%;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));

}

.profile-imgonly .profile__image img {

  border: none;

}

.profile-imgonly .profile__stats {

  display: none;

}

.profile-imgonly .profile__info {

  z-index: 5;

  grid-row: 1 / 2;

  align-self: end;

  margin: 0 0 15px;

  color: #fff;

  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);

}

.profile-imgonly .profile__info p {

  display: none;

}

.profile-imgonly .profile__cta {

  padding: 0;

}

.profile-imgonly .profile__cta a {

  border-radius: 0;

}


#dark:checked ~ main a.button,

#pinkaru:checked ~ main a.button {

  color: var(--foregroundColor);

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

}

#dark:checked ~ main .button:hover,

#pinkaru:checked ~ main .button:hover {

  background: var(--primaryShade2);

}

#dark:checked ~ main .button:active,

#pinkaru:checked ~ main .button:active {

  background: var(--primaryShade1);

}

#dark:checked ~ main .profile-default img,

#pinkaru:checked ~ main .profile-default img {

  border-bottom: 7px solid var(--secondaryShade5);

}


/*FILTERS*/

.filters__title {

  font-size: 18px;

  color: var(--grayColor);

  margin: 25px 0;

}

.filters__item {

  display: grid;

  grid-template-columns: 1fr auto;

  align-items: center;

  margin-bottom: 10px;

}

.filters__item .checkbox {

  position: relative;

  margin: 0;

}

.filters__item .checkbox .tooltip {

  display: inline-block;

  margin-left: 10px;

  width: auto;

  vertical-align: middle;

}

.filters__item .checkbox .tooltip span {

  border: none;

}

.filters__item .checkbox .tooltip:after {

  min-width: 100px;

  margin-left: -50px;

}

.filters:not(:first-of-type) {

  border-top: 0.5px solid var(--lightGrayColor);

  margin-top: 25px;

}


/* WELL CTA */

.well-cta {

  border-radius: 10px;

  background: var(--secondaryColor);

  color: var(--foregroundColor);

  overflow: hidden;

}

.well-cta__text {

  padding: 30px;

}

.well-cta__text p {

  font-size: 18px;

  line-height: 1.5;

}

.well-cta__text a {

  margin: 25px 0 0;

}

.well-cta__image {

  padding: 30px 0 0;

}

.well-cta img {

  width: 100%;

  max-height: 300px;

  object-fit: contain;

  margin-bottom: -7px;

}


@media (min-width: 768px) {

  .well-cta {

    display: grid;

    grid: auto / 1fr 250px;

  }

  .well-cta__image {

    align-self: flex-end;

    padding: 15px 0 0;

  }

}

#bluepurple:checked ~ main .well-cta__text {

  color: var(--backgroundColor);

}


.well-cta--form {

  display: grid;

  grid-gap: 10px;

  padding: 30px;

  background: var(--primaryShade1);

  border-radius: 10px;

}

.well-cta--form__text {

  margin-bottom: 10px;

}

.well-cta--form h3 {

  color: var(--primaryShade5);

}


@media (min-width: 768px) {

  .well-cta--form {

    grid-template-columns: 1fr auto;

  }

  .well-cta--form__text {

    grid-column: span 2;

  }

}

/*TABLE*/

.table {

  background: var(--backgroundColor);

  border-radius: 10px;

}

.table__wrapper {

  width: 100%;

  overflow-y: hidden;

  overflow-x: auto;

  border-radius: 10px;

  box-shadow: 0 3px 15px rgba(51, 51, 51, 0.2);

}

.table tr {

  display: grid;

  grid: auto/80px 80px repeat(2, minmax(150px, 2fr)) repeat(2, minmax(120px, 1.5fr)) 50px;

  align-items: center;

}

.table td {

  padding: 15px;

}

.table__header {

  color: var(--neutralShade5);

  font-weight: 500;

  text-transform: uppercase;

  border-bottom: 0.5px solid var(--lightGrayColor);

}

.table__body tr:nth-child(even) {

  background: var(--neutralShade0);

}


#dark:checked ~ main .table__body tr:nth-child(even),

#pinkaru:checked ~ main .table__body tr:nth-child(even) {

  background: var(--neutralShade8);

}


/*FORMS*/

.form-login {

  border-radius: 10px;

  padding: 30px;

  box-shadow: 0 3px 15px rgba(51, 51, 51, 0.2);

  background: var(--backgroundColor);

  margin-top: 30px;

  position: relative;

  overflow: hidden;

}

.form-login .checkbox {

  margin-bottom: 30px;

}

.form-login .spinner__wrapper {

  display: grid;

  place-items: center;

  position: absolute;

  width: 100%;

  height: 100%;

  left: 0;

  top: 0;

  background: rgba(255, 255, 255, 0.85);

  opacity: 0;

  z-index: -1;

}


@media (min-width: 768px) {

  .form-login {

    display: grid;

    grid: auto / 1fr 40%;

  }

  .form-login .input__wrapper {

    grid-column: span 2;

  }

  .form-login .checkbox {

    align-self: center;

    margin-bottom: 0;

  }

}

#dark:checked ~ main .spinner__wrapper,

#pinkaru:checked ~ main .spinner__wrapper {

  background: rgba(20, 20, 20, 0.85);

}


/*COMMENT ITEM*/

.comment {

  display: grid;

  grid: auto / 60px 1fr;

  grid-gap: 12px;

}

.comment__image {

  grid-row: 1 / 4;

}

.comment__image img {

  width: 60px;

  height: 60px;

  object-fit: cover;

  border-radius: 50%;

}

.comment__info h5 {

  margin-bottom: 0;

}

.comment__info h5 span {

  vertical-align: middle;

}

.comment__info h5 .badge {

  margin-left: 8px;

  font-size: 80%;

}

.comment__info h5 .badge i {

  font-size: 80%;

  margin-right: 6px;

}

.comment__info__time {

  color: var(--grayColor);

}

.comment__reaction i {

  margin-right: 8px;

  font-size: 85%;

}

.comment__reaction__heart {

  cursor: pointer;

  transition: .3s ease;

}

.comment__reaction__heart.toggled {

  color: var(--accent3Shade5);

  font-weight: 500;

}


/*PANEL*/

.panel {

  display: grid;

  grid: 200px auto min-content / 100%;

  border-radius: 10px;

  overflow: hidden;

  background: var(--backgroundColor);

  box-shadow: 0 3px 15px rgba(51, 51, 51, 0.2);

  max-width: 480px;

  margin: auto;

}

.panel__image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.panel__info {

  padding: 30px 30px 20px;

}

.panel__info h1 {

  margin-bottom: 25px;

}

.panel__info p {

  font-size: 20px;

  margin: 15px 0;

}

.panel__info .alert {

  font-weight: 300;

  margin-top: 30px;

}

.panel__cta {

  padding: 0 30px 30px;

  text-align: center;

}


footer {

  display: grid;

  grid: min-content / 1fr max-content;

  text-align: left;

  width: 90%;

  margin: 1em auto 4em;

  max-width: 1050px;

  align-items: center;

}

footer a {

  text-decoration: none;

  color: #333;

  padding: 3px 0;

  border-bottom: 1px dashed;

}

footer a:hover {

  border-bottom: 1px solid;

}

footer .social a {

  text-decoration: none;

  margin-left: 10px;

}

footer .social a .icons {

  display: inline-block;

  font-size: 20px;

}

footer.dark, footer.dark a {

  color: #f9f9f9;

}



Javascript : 


//the alert is collapsible yay

$(".alert").on("click", function() {

$(this).hide("slow");

});


//apprearance

$("input.variation").on("click", function() {

if ($(this).val() > 3) {

$("body").css("background", "#111");

$("footer").attr("class", "dark");

} else {

$("body").css("background", "#f9f9f9");

$("footer").attr("class", "");

}

});


//login works

$("#login").on("click", function() {

$(".form-login .spinner__wrapper").css({ opacity: 1, "z-index": 5 });

});


//heart button works

$('a.comment__reaction__heart').on('click',function(){

$(this).toggleClass('toggled');

if ($(this).hasClass('toggled')) {

$(this).find('span').html('26 hearts');

} else {

$(this).find('span').html('25 hearts');

}

});