/* ICONS */
/* basic settings for icons.
Contains all icons in a small library at the end */

.icon, i{
    position:                           relative;
    display:                            block;
    height:                             4rem;
    width:                              4rem;
    margin:                             0.5rem 0;
    border-radius:                      var(--iconsize);
    z-index:                            1;
    transition:                         var(--quick);
}

.icon::after, i::after{
    content:                            url(icons/cross.svg);
    position:                           absolute;
    top:                                50%;
    left:                               50%;
    transform:                          translate(-50%,-50%);
    width:                              100%;
    height:                             100%;
    transition:                         var(--normal);
}

/* modificators */
.icon.dark::after, i.dark::after{
    filter:                             invert(1);
}

.icon.big, i.big{
    width:                              calc(var(--iconsize) * 2);
    height:                             calc(var(--iconsize) * 2);
}

.icon.big::after, i.big::after{
    width:                              60%;
    height:                             60%;
}

.icon.caption, i.caption{height:        auto;}

/* icon caption */
.icon.caption > p, i.caption > p {
    position:                           relative;
    display:                            block;
    text-align:                         center;
    font-size:                          1.5rem;
    margin-top:                         100%;
}

/* working clock icon */
.icon.clock::after, i.clock::after{
    content:                            url(icons/clockface.svg);
}

.icon.clock > div, i.clock > div {
    position:                           absolute;
    display:                            block;
    width:                              100%;
    height:                             100%;
    top:                                0;
    left:                               0;
}

.icon.clock > div::after, i.clock > div::after{
    content:                            '';
    top:                                50%;
    left:                               50%;
    transform:                          translate(-50%,-50%) rotate(0deg);
    position:                           absolute;
    background:                         center no-repeat;
    background-size:                    cover;
    width:                              50%;
    height:                             50%;
    transition:                         filter var(--quick), transform 10000ms;
}

.icon.clock:hover > div::after, i.clock:hover > div::after{
    transform:                          translate(-50%,-50%) rotate(360deg);
}
.icon.clock:hover > .minutes::after, i.clock:hover > .minutes::after{
    transform:                          translate(-50%,-50%) rotate(calc(360deg*12));
}

.clock .hours::after{content:      url(icons/clockhours.svg);}
.clock .minutes::after{content:    url(icons/clockminutes.svg);}
.clock .seconds::after{content:    url(icons/clockseconds.svg);}
/* icons */

.icon.home::after{content:          url(icons/home.svg);}
.icon.bin::after{content:           url(icons/bin.svg);}
.icon.location::after{content:      url(icons/position.svg);}
.icon.mail::after{content:          url(icons/mail.svg);}
.icon.phone::after{content:         url(icons/phone.svg);}
.icon.info::after{content:          url(icons/info.svg);}
.icon.close::after{content:         url(icons/cross.svg);}
.icon.gear::after{content:          url(icons/gear.svg);}
.icon.wlan::after{content:          url(icons/wlan.svg);}
.icon.vote::after{content:          url(icons/vote.svg);}
.icon.chat::after{content:          url(icons/chat.svg);}
.icon.bottle::after{content:        url(icons/bottle.svg);}
.icon.threestar::after{content:     url(icons/threestar.svg);}
.icon.silverware::after{content:    url(icons/silverware.svg);}
.icon.megaphone::after{content:     url(icons/megaphone.svg);}
.icon.wlan::after{content:          url(icons/wlan.svg);}
.icon.copy::after{content:          url(icons/copy.svg);}
.icon.check::after{content:         url(icons/check.svg);}
.icon.casual::after{content:         url(icons/casual.svg);}
.icon.formal::after{content:         url(icons/formal.svg);}
.icon.download::after{content:         url(icons/download.svg);}


.scroll-hint {
    cursor: pointer;
    display: block;
    position: absolute;
    width: 14rem;
    height: 14rem;
    bottom: 5rem;
    right: 0;
    z-index: 1;
    background: 0 0;
    border: none;
    transform: translateX(-50%);
}

.scroll-hint::after, .scroll-hint::before{
    content: url(icons/scrollhint-arrow.svg);
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.scroll-hint::before{
    content: url(icons/scrollhint-caption.svg);
    opacity: .7;
    animation: spin 8s infinite linear;
}

@keyframes spin {
    from{transform: rotate(0deg)}
    to{transform: rotate(360deg)}
}