*,
*::before,
*::after {
    box-sizing: border-box;
}
* {
  border: none;
}
img {
  display: block;
  max-width: 100%;
}
a{
  text-decoration: none;
  
}

@media (prefers-reduced-motion: no-preference) {
  html {
        scroll-behavior: smooth;
  }
}

a:hover{
  text-align: none;
  transform: scale(110%);
}


:root{
  --header-font-family:'Archivo Black', sans-serif;
  --quote-font-family:'Caprasimo', cursive;
  --translucent-white:rgba(255,255,255,0.85);
}


html {
  font-size: 62.5%; /* (62.5/100) * 16px = 10px */
  color: var(--translucent-white);
}
body{
margin:0;
}
h1{
  font-family:var(--header-font-family);
  font-size: clamp(3.5rem, 5vw, 8rem); 
  margin:0;
  padding:1em 1em 0 1em;
}
blockquote{
  font-family: var(--quote-font-family);
  font-size: clamp(3rem, 5vw, 4.5rem); 
  text-shadow:0.1em 0.1em 2em var(--translucent-white); 
  height:60vh;
  height: calc(var(--vh, 1vh) * 60);
  display:flex;
  flex-direction: column;
  place-content: center;
  margin-top: 0;
}
.quote::before{
  content:"\201C";
}
.quote::after{
  content:"\201D";
}
.quote{
place-self: center;
}
figcaption{
  font-family: var(--header-font-family);
  font-size: clamp(2rem, 5vw, 4.5rem); 
  margin-bottom: 1em;;
}
.clickable{
  font-family: var(--quote-font-family);
  font-size: clamp(3.1rem, 5vw, 5rem); 
  background-color: rgba(255,255,255,0.3);
  border-radius: 0.3em;
  padding: 0.3em;
  margin: 0.5em;
  color:white;
  cursor: pointer;
}

.quote-box{
  width:min(90%,800px); 
  margin:auto;
}

.flex-container{
  display:flex;
  flex-direction: column;
  align-content: center;
  justify-content: flex-end;
  text-align: center;
  height:100vh;
  height: calc(var(--vh, 1vh) * 100);
}