/**************
|  style.css  |
**************/

:root {

  /* We talked about creating CSS variables in our text 
    but we never showed you how to do it. We also created 
    a color we called bubblegum and we wanted to find a 
    way to use that color name in our CSS stylesheet. We 
    do this by defining it as a CSS variable here in the 
    document's root. And then when we want to use it we 
    simply use var(--bubblegum) when we want to use that
    color. */

  --bubblegum: rgb(237, 103, 142);
  --stone: rgb(245, 229, 210);
}

html {
  background-color: black;
}

body {
  font-family: -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    'Open Sans', 'Helvetica Neue', sans-serif;

  background-image: url(the-stone-bridge-of-arta.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;

  /* The RGB value for the foreground color was
    sampled from this photo using the ColorZilla 
    extension for Chrome. This color appears in 
    the stones of this bridge. Add I added it as 
    a CSS variable so I can now call it stone. */

  color: var(--stone);

  box-sizing: border-box;
  text-align: center;
  margin: 0 auto;
  padding: 0;
}

#veiled-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  margin: 0;
  height: 100vh;
  width: 500px;
}

#top-text {
  margin-top: 0;
  padding: 12px 18px;
  text-align: left;
  font-size: 22px;
  color: var(--stone);
  width: 370px;
}

#bottom-text {
  margin-top: 120px;
  padding: 12px 18px;
  text-align: left;
  font-size: 22px;
  color: var(--stone);
  width: 370px;
}

button {
  background-color: var(--bubblegum);
  border-radius: 11px;
  color: var(--stone);
  padding: 10px 20px;
  cursor: pointer;
  font-size: 22px;
  display: block;
  outline: none;
  margin: 25px 10px 10px 25px;
}

#btn1 {

  /* Bubblegum Button 1 has 
    a transparent border. */

  border: 3px solid transparent;
}

#btn1:hover {
  border: 3px solid var(--stone);
  background-color: transparent;
}

#btn2 {

  /* Bubblegum Button 2 does not 
    have a transparent border. */

  border: none;

  /* We added some padding to
    make it the same size as the
    other button. */

  padding: 13px 23px;
}

#btn2:hover {
  border: 3px solid var(--stone);
  background-color: transparent;
}

#photo-credit {
  color: var(--stone);
  font-size: 22px;
  position: fixed;
  bottom: 0rem;
  right: 2rem;
}