@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;700&display=swap');

/* VARIABLES */
body {
     --accent-main: hsla(210, 76%, 45%, 1.00); /* image background + shadow, link background */
     --accent-lighter: hsla(210, 52%, 91%, 1.00); /* body background */
     --accent-lightest: hsla(0, 100%, 100%, 0.5); /* wrapper background */
}

body.envy {
     --accent-main: hsla(155, 76%, 45%, 1.00); /* image background + shadow, link background */
     --accent-lighter: hsla(155, 52%, 91%, 1.00); /* body background */
}

body.veerle {
     --accent-main: hsla(4, 98%, 75%, 1.00); /* image background + shadow, link background */
     --accent-lighter: hsla(4, 100%, 95%, 1.00); /* body background */
}

body.apple {
     --accent-main: hsla(240, 1%, 19%, 1.00); /* image background + shadow, link background */
     --accent-lighter: hsla(218, 4%, 81%, 1.00); /* body background */
}

#wrapper {
     margin: 0 auto;
     padding: 20px;
     max-width: min(960px, 96%);
     background-color: var(--accent-lightest);
}

::selection {
     background-color: var(--accent-lighter);
}

html {
     box-sizing: border-box;
     scroll-behavior: smooth;
}

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

body {
     font-family: 'Inter', sans-serif;
     background-color: var(--accent-lighter);
}

body.envy header {
     background-image: url(images/header-envy.png);
}

body.veerle header {
     background-image: url(images/header-veerle.png);
}

body.apple header {
     background-image: url(images/header-apple.png);
}

header {
     text-align: center;
     position: relative;
     height: 200px;
     border-radius: 5px;
     background-size: cover;
     background-position: center;
     padding: 20px;
}

header a {
     position: absolute;
     text-align: right;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 10px;
     line-height: 1.2;
     border-radius: 0px 0px 5px 5px;
}

header, nav, main, footer {
     margin: 0px;
}

h1 {
     text-transform: uppercase;
     padding: 20px;
     border-radius: 5px;
     background-color: hsla(0, 100%, 100%, 0.8);
}

h2 {
     margin-top: 80px;
     clear: both;
     font-size: 1.3em;
     position: relative;
     overflow: hidden;
     line-height: 1.5;
}

p {
     line-height: 1.5;
}

ul {
     list-style-type: circle;
     width: auto;
}

li {
     line-height: 2.5;
     width: auto;
}

img {
     float: right;
     width: 100%;
     padding: 10px;
     margin: auto auto 30px 30px;
     border-radius: 5px;
     background-color: var(--accent-main);
     box-shadow: 0px 0px 10px var(--accent-main);
}

a {
     text-decoration: none;
     color: white;
     background-color: var(--accent-main);
     padding: 5px 10px;
     border-radius: 5px;
     transition: opacity 0.5s ease-out;
}

a:hover {
     opacity: .7;
}

/* NAVIGATION */
nav ul {
     list-style-type: none;
     padding: 0px;
     display: flex;
}

nav ul li:first-child {
     margin-right: auto;
}

nav ul li:last-child {
     margin-right: 0px;
}

nav ul li {
     display: flex;
     line-height: 2;
     margin-right: 10px;
}

body footer {
     height: 40px;
     padding: 20px 0px;
     clear: both;
     margin-bottom: 40px;
}

a[href="/"] {
     float: left;
}

a[href^=javascript] {
     float: right;
     margin-left: 10px;
}

/* STAR SYSTEM */

[class*=stars]:before {
    position: relative;
    z-index: 1;
    display: block;
    float: right;
    animation-name: fadeInSlideInLeft;
    animation-duration: 2000ms;
}

[class*=stars]:after {
    content: '☆☆☆☆☆';
    color: rgba(167, 167, 167, 0.6);
    position: absolute;
    right: 0;
    top: 0;
}

.stars-5:before {
    content: '★★★★★';
    padding-right: 0px;
}

.stars-4:before {
    content: '★★★★';
    padding-right: 21px;
}

.stars-3:before {
    content: '★★★';
    padding-right: 42px;
}

.stars-2:before {
    content: '★★';
    padding-right: 63px;
}

.stars-1:before {
    content: '★';
    padding-right: 84px;
}

/* RESPONSIVE */
@media only screen and (min-width: 960px) {
     img {
          width: 380px;
     }

     header, nav, main, footer {
          margin: 10px;
     }
}

/* END */