@charset "UTF-8";
/* ::::::::::::::::::::::::::::::::::::
  style for blursday.zone landing page
  designed by reed o'beirne.
  :::::::::::::::::::::::::::::::::::: */


{ box-sizing: border-box; }

html{
 /*background-image: linear-gradient(#262626, #f5f5f5); */
 background-color: #3f3f3f;
}

/* Body */
body {
  background-image: linear-gradient(#262626, #3f3f3f);
  /*background-color: #262626;*/ /* Slate */
  color: #f5f5f5; /* Whitish */
  letter-spacing: 1.2px;
	margin: 3px;
  margin: auto; 
	padding-top: 10vh;
	padding-bottom: 20px;
/*    max-width: 60%;
  margin: auto; */
}


/* ::::::::::::: My Fontz ::::::::::::::: */
@font-face {
   font-family: mySpaceFont;
   src: url("../fontz/Mandatory-Plaything.otf") format("opentype");
}

@font-face {
   font-family: myCleanFont;
   src: url("../fontz/AvenirLTProBook/font.woff2") format('woff2'), url(./fontz/AvenirLTProBook/font.woff) format('woff');
}

.my-font{
  font-family: mySpaceFont, sans-serif;
}

.my-font2{
  font-family: myCleanFont, Montserrat, sans-serif;
}

/* ::::::: MY Button Stlye ::::::::: */
.my-button-style{
  background-color: #f5f5f5; 
  border: 10px solid #3f3f3f;
  color: #262626;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 5.5vw;
  cursor: pointer;
  border-radius: 50px;
  font-family: myCleanFont, Montserrat, sans-serif;
}

.my-button-style:hover {
  background: #fff;
  border: 1px dotted #3f3f3f;
    /*color: #262626;*/
  color: #262626;
}

.my-button-style:active{
  background: #262626;
  outline-color: #f5f5f5;
  border: 1px dotted #f5f5f5;
  color: #dcdcdc;
}

.my-button-style:focus{  /* state following 'active' which persists if the button link opens in a new window */
  outline-style: dotted;
  outline-color: #3f3f3f; /* makes outline disappear because this is the same as background colour */
  border: #dcdcdc; 
  color: #dcdcdc;
}


.button-position1{
  position: absolute;
  top: 120%;
  left: 10%;
}

.button-position2{
  position: absolute;
  top: 120%;
  right: 10%;
}

/* ::::::: eMail-Form Button Stlye ::::::::: */
.my-signup-button{
  background-color: #f5f5f5; 
  border: 3px solid #3f3f3f;
  color: #262626;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 2.0vw;
  cursor: pointer;
  border-radius: 5px;
  font-family: myCleanFont, Montserrat, sans-serif;
}

.my-email-form{
  background-color: #f5f5f5; 
  border: 1px solid #3f3f3f;
  color: #262626;
  padding: 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 2.0vw;
  cursor: pointer;
  border-radius: 5px;
  font-family: myCleanFont, Montserrat, sans-serif;
}


/* ::::::: Text Style  :::::::: */

.mytitle {  
  position: relative;
	font-size: 9.0vw;
	text-align: center;
  margin: auto;
  padding: 0.5em;
	text-shadow: 4px 2px 1px #3f3f3f; 	
	font-weight: lighter;
/*	letter-spacing: 4.5px;     spaces the B L U R S D A Y */
}

.fly-in-text {
	margin-top: 35%;
/*margin-top: calc(20vh + 20vw);*/
	font-size: calc(8px + 2vw);
	letter-spacing: 1.2px;
  text-align: center;
}

.blurry-text {
   color: rgba(0,0,0,0.1);
   text-shadow: 0 0 15px #dcdcdc; 
}

.my-gradient{   
      /*display: flex;*/
    /*transform: rotateX(0deg);   can be used to flip text*/
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .0) 10%, rgba(255, 255, 255, .3));
    -webkit-background-clip: text;
    color: transparent;
}

/*.my-full{
  height: 100%;
  color: red;
}*/

/* ::::::::::::::::::::::::::::::::::: */
/* :::::::: RESPONSIVE ::::::::::::::: */
/* ::::::::::::::::::::::::::::::::::: */


/*  */
@media (max-width: 800px) {

.my-button-style{
  border: 10px solid #3f3f3f;
  padding: 8px;
  }

.button-position1{ /* 360 films */
  top: 140%;
  left: 50%;
  transform: translate(-50%, -50%);
  }

.button-position2{ /* interactive */
  top: 250%;
  left: 50%;
  transform: translate(-50%, -50%);
  }

.fly-in-text{
  margin-top: 65%;
  font-size: 1.15em;
/*  color: blue;  test  */
  }

}