@charset "utf-8";
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}
:root {
    --color-lightest: hsl(350, 69%, 91%);
    --color-lighter: hsl(347, 56%, 85%);
    --color-light: hsl(347, 39%, 76%);
    --color-dark: hsl(346, 39%, 72%);
    --color-darker: hsl(347, 38%, 66%);
    --color-darkest: hsl(348, 35%, 56%);
    --color-white: hsl(17, 4%, 99%);
    --color-black: hsl(40, 18%, 20%);
    --color-header: hsl(0, 78.8%, 57.45%);
    --header-image: url(../images/header-hero.webp);
}
.envy {
    --color-light: hsl(144, 48%, 94%);
    --color-darker: hsl(135, 9%, 75%);
    --color-darkest: hsl(349, 24%, 32%);
    --color-header: hsl(349, 24%, 32%);
    --header-image: url(../images/envy-hero.webp);
}
.veerle {
    --color-white: hsl(17, 4%, 99%);
    --color-light: hsl(203, 100%, 92%);
    --color-darker: hsl(36, 98%, 77%);
    --color-dark: hsl(38, 98%, 80%);
    --color-header: hsl(8, 99%, 65%);
    --header-image: url(../images/veerle-hero.webp);
}
.coolors {
    --color-light: hsl(17, 4%, 99%);
    --color-darker: hsl(229, 100%, 59%);
    --header-image: url(../images/coolors-hero.webp);
    --color-header: hsl(230, 69%, 10%);
}
body {
    background: var(--color-light);
}
.wrapper {
    width: 1024px;
    margin: auto;
    border-radius: 30px;
    background: var(--color-white);
    padding: 30px 30px 30px 30px;
}
header {
    text-align: center;
    background: var(--header-image);
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
header a:link {
    font-size: 1.5em;
    text-decoration: none;
    color: var(--color-black);
}
h1 {
    text-align: center;
    color: var(--color-header);
 
}
div.at-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.at-item {
    color: red; font-weight:bold; font-size:3em;
    
    animation-name: focus-in-contract;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
        
    /* shorthand
    animation: focus-in-contract 1s linear 0s 1 normal none;*/
}
@keyframes focus-in-contract {
        
    0% {
        letter-spacing:1em;
        filter:blur(12px);
        opacity:0;
    }
    100% {
        filter:blur(0);
        opacity:1;
    }
}

div.link-animation {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
header a:hover {
    color: #3079ed; font-weight:bold; font-size:3em;
    
    animation-name: text-flicker-out-glow;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
        
    /* shorthand
    animation: text-flicker-out-glow 1s linear 0s 1 normal none;*/
}
@keyframes text-flicker-out-glow {
        
    0% {
        opacity:1;
        text-shadow:0 0 30px rgba(0,0,0,.6),0 0 60px rgba(0,0,0,.45),0 0 110px rgba(0,0,0,.25),0 0 100px rgba(0,0,0,.1);
    }
    13% {
        opacity:1;
        text-shadow:0 0 30px rgba(0,0,0,.6),0 0 60px rgba(0,0,0,.45),0 0 110px rgba(0,0,0,.25),0 0 100px rgba(0,0,0,.1);
    }
    14% {
        opacity:0;
        text-shadow:none;
    }
    15% {
        opacity:0;
        text-shadow:none;
    }
    16% {
        opacity:1;
        text-shadow:0 0 30px rgba(0,0,0,.55),0 0 60px rgba(0,0,0,.4),0 0 110px rgba(0,0,0,.2),0 0 100px rgba(0,0,0,.1);
    }
    22% {
        opacity:1;
        text-shadow:0 0 30px rgba(0,0,0,.55),0 0 60px rgba(0,0,0,.4),0 0 110px rgba(0,0,0,.2),0 0 100px rgba(0,0,0,.1);
    }
    23% {
        opacity:0;
        text-shadow:none;
    }
    24% {
        opacity:0;
        text-shadow:none;
    }
    25% {
        opacity:1;
        text-shadow:0 0 30px rgba(0,0,0,.55),0 0 60px rgba(0,0,0,.35),0 0 100px rgba(0,0,0,.1);
    }
    34% {
        opacity:1;
        text-shadow:0 0 30px rgba(0,0,0,.55),0 0 60px rgba(0,0,0,.35),0 0 100px rgba(0,0,0,.1);
    }
    35% {
        opacity:0;
        text-shadow:none;
    }
    39% {
        opacity:0;
        text-shadow:none;
    }
    40% {
        opacity:1;
        text-shadow:0 0 30px rgba(0,0,0,.55),0 0 60px rgba(0,0,0,.35);
    }
    42% {
        opacity:1;
        text-shadow:0 0 30px rgba(0,0,0,.55),0 0 60px rgba(0,0,0,.35);
    }
    43% {
        opacity:0;
        text-shadow:none;
    }
    44% {
        opacity:0;
        text-shadow:none;
    }
    45% {
        opacity:1;
        text-shadow:0 0 30px rgba(0,0,0,.45),0 0 60px rgba(0,0,0,.25);
    }
    50% {
        opacity:1;
        text-shadow:0 0 30px rgba(0,0,0,.45),0 0 60px rgba(0,0,0,.25);
    }
    54% {
        opacity:1;
        text-shadow:0 0 30px rgba(0,0,0,.45),0 0 60px rgba(0,0,0,.25);
    }
    55% {
        opacity:0;
        text-shadow:none;
    }
    69% {
        opacity:1;
        text-shadow:0 0 30px rgba(0,0,0,.45),0 0 60px rgba(0,0,0,.25);
    }
    70% {
        opacity:1;
        text-shadow:0 0 30px rgba(0,0,0,.45),0 0 60px rgba(0,0,0,.25);
    }
    71% {
        opacity:0;
        text-shadow:none;
    }
    78% {
        opacity:0;
        text-shadow:none;
    }
    79% {
        opacity:1;
        text-shadow:0 0 30px rgba(0,0,0,.25);
    }
    80% {
        opacity:0;
        text-shadow:none;
    }
    88% {
        opacity:0;
        text-shadow:none;
    }
    89% {
        opacity:1;
        text-shadow:none;
    }
    90% {
        opacity:0;
        text-shadow:none;
    }
    100% {
        opacity:0;
    }
}
nav {
    text-align: center;
}
nav ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
    background: var(--color-darker);
    height: 40px;
    
    
}
nav ul li {
    padding-right: 20px;
    padding-top: 10px;
    
    
}
nav ul li a {
    text-decoration: none;
    border: 1px solid white;
    padding: 5px 5px 5px 5px;
    border-radius: 5px;
    padding-right: 10px;
    
}
h2 {
    text-align: center;
}

.review h2 {
    margin: calc(var(--gap) + 2px) 0 calc((var(--gap) * 0.5) * -1) 0;
    position: relative;
    overflow: hidden;
}
main {
    animation-name: swirl-in-br-clock;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: none;
}
@keyframes swirl-in-br-clock {
			
    0% {
        transform:rotate(-540deg) scale(0);
        transform-origin:100% 100%;
        opacity:0;
    }
    100% {
        transform:rotate(0) scale(1);
        transform-origin:100% 100%;
        opacity:1;
    }
}
@keyframes fadeInSlideInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    40% {
        transform: translate3d(0, 0, 0);
    }

    60% {
        transform: translate3d(-20%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
[class*="stars"]:before {
    position: relative;
    z-index: 1;
    display: block;
    float: left;
    animation-name: fadeInSlideInLeft;
    animation-duration: 2000ms;
}

[class*="stars"]:after {
    content: "✪✪✪✪✪";
    color: rgba(167, 167, 167, 0.4);
    position: absolute;
    left: 0;
    top: 0;
}

.stars-5:before {
    content: "✪✪✪✪✪";
    padding-right: 10px;
}

.stars-4:before {
    content: "✪✪✪✪";
    padding-right: 32px;
}

.stars-3:before {
    content: "✪✪✪";
    padding-right: 54px;
}

.stars-2:before {
    content: "✪✪";
    padding-right: 76px;
}

.cards {
    padding-top: 50px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.card {
    border: 5px solid black;
    border-radius: 20px;
    
    padding: 15px 15px 15px 15px;
    width: 60%;
    justify-content: center;
}
p {
    text-align: center;
    padding-bottom: 10px;
}
section {
    text-align: center;
}
section a {
    background: var(--color-lightest);
    padding: 10px 10px 10px 10px;
    border: 2px solid black;
    border-radius: 10px;
}
section a:link{
    text-decoration: none;
    color: black;
}
section a:hover {
    font-size: 15px;
}
section img {
    width: 360px;
}
footer {
    padding-top: 50px;
    text-align: center;
    
}
footer a {
    text-decoration: none;
}
.review {
    display: flex;
    flex-direction: row;
}
.review-featured-image {
    max-width: 100%;
    
}

.review-content {
    text-align: justify;
}

@media screen and (min-width: 768px) {
   
    .review {
        flex: 0 1 calc(50% - 8px);
        flex-direction: row;
    }
    .wrapper {
        width: 768px;
        margin: auto;
    }
}

@media screen and (min-width: 1025px) {
    .review {
        flex-direction: row;
    }
    .wrapper {
        width: 1025px;
        margin: auto;
    }
    }