:root{/*Default settings are here and will always be followed unless overwritten*/
  font:normal 1.8vh 'Roboto', Verdana, sans-serif;/*font-weight, -size, and -family combined*/
  color:rgb(244,226,197);/*conforms to color palette of background picture*/
}

* {
  margin: 0;
  padding: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
/*using the above @import as alternative to <link> inside html...will see if this is better option,
because if it doesn't work, then I'd just switch back into using <link> inside HTML*/

a{
    color:inherit;
    text-decoration:none;
    font-weight:600;
}
body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  width:100vw;
 background-image: url(../images/bg-index-desktop.jpg);
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position:center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
 background-size: cover;
}

div.blurme{
  display: flex;
  flex-direction:row;
  justify-content:space-around;
  align-items: center;
  text-align:center;
  background:inherit;
  border-radius:12%;
  position:relative;
  width:40vw;
  height:50vh;
  overflow:hidden;
}

div.blurme:before{
 content: "";
 background: inherit; 
 position: absolute;
 left: -25px;  /*giving minus -25px left position*/
 right: 0;
 top: -25px;  /*giving minus -25px top position*/
 bottom: 0;
 box-shadow: inset 0 0 0 500px rgba(105, 69, 53, 0.25);
 filter: blur(8px);
}

div.buttonz{
  display:flex;
  align-items:center;
  justify-content:center;
  border-style:dashed;
  border-color:rgba(244,226,197,0.25);
  border-radius:12%;
  text-align:center;
  height:12vh;
  width:12vw;
  position:relative;
  overflow:hidden;
}

div.buttonz:hover{
  transform:scale(1.08);
}
div.buttonz:active{
  box-shadow:2px 2px 5px 1px rgba(244, 226, 197, 0.8); 
  transform: translateY(4px);
}



@media screen and (max-device-width: 450px) { 
body{/*put another body section here because mobile has different BG image*/
  min-height:100vh;
  width:100vw;
 background-image: url(../images/bg-index-mobile.jpg);
 /*Gratis image from https://unsplash.com/photos/Siuwr3uCir0  */
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position:center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
 background-size: cover;
}

div.blurme{
  display: flex;
  flex-direction:column;
  justify-content:space-around;
  align-items: center;
  text-align:center;
  background:inherit;
  border-radius:12%;
  position:relative;
  font-size:100%;
  width:70vw;
  height:50vh;
  overflow:hidden;
  color:black;
}


div.blurme:before{
 content: "";
 background: inherit; 
 position: absolute;
 left: -25px;  /*giving minus -25px left position*/
 right: 0;
 top: -25px;  /*giving minus -25px top position*/
 bottom: 0;
 box-shadow: inset 0 0 0 500px rgba(203, 217, 218, 0.25);
 filter: blur(12px);
}

div.buttonz{
  display:flex;
  align-items:center;
  justify-content:center;
  border-style:dashed;
  border-color:rgba(42, 63, 23, 0.77);
  border-radius:12%;
  text-align:center;
  height:15vh;
  width:35vw;
  position:relative;
  overflow:hidden;
}

}