@font-face {
  font-family: 'Rubik Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/rubik:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
    --dark-gray: #333;
    --dark-gray2: #111;
    --light-gray: #fff;
    --light-gray2: #eee;
    --black: #000;
    --transparent-hero: rgba(255,255,255,0.01);
    --transparent-shadow: rgba(0,0,0,0.33);
    --logo-hero-container: 192px;
    --logo-hero-image: 100%;
    --color-calendar: #1d5e2e;
    --color-instagram: #492065;
    --color-facebook: #0d4388;
    --color-telegram: #004466;
    --color-maps: #812d30;
    --hero: url('hero.png');
}

*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-family: 'Rubik Variable', sans-serif;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

body{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 0;
    background-color: var(--dark-gray2);
}

.bold-txt{
    font-weight: bold;
}

.content{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 578px;
    min-height: 100vh;
    overflow: hidden;
    box-shadow: 1px 1px 20px var(--transparent-shadow);
}

.content::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--hero);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: blur(25px);
    opacity: 0.15;
    transform: scale(1.2);
    z-index: -1;
}

.logo{
    width: var(--logo-hero-container);
    height: var(--logo-hero-container);
    margin: auto;
    margin: 15px 0 25px 0;
    overflow: visible;  
    background-image: var(--hero);
    background-size: var(--logo-hero-image);
    background-position: center calc(50% - 15%);
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}

.title{
    font-size: 2.4em;
    font-weight: 700;
    padding: 0 30px;
    color: var(--light-gray);
}

.subtitle{
    padding: 20px 30px;
    color: var(--light-gray);
}

.button-content{
    width: 96%;
}

.button-link{
	display: flex;
	flex-direction: column;
    align-items: center;
    padding: 5px 0;
}

.button-link a:link, .button-link a:active, .button-link a:visited{
    width: calc(100% - 32px);
	background-color: var(--black);
	padding: 15px 10px;
	margin: 4px 0;
	border-radius: 50px;
	text-decoration: none;
	font-weight: bold;
	color: var(--light-gray);
	transition: 300ms;
}

.button-link a:hover{
	background-color: var(--black);
	box-shadow: var(--transparent-shadow) 0 3px 3px;
	transition: 100ms;
	transform: scale(1.05);
}

.icon-left{
    width: 2em;
    height: 1.5em;
	background-size: 1.5em;
	background-repeat: no-repeat;
    margin: -0.2em -2.2em -5em 0.2em;
    float: left;
    z-index: -1;
}

.icon-instagram{
	background-image: url('images/icons/dark/instagram.svg');
}
 
.icon-facebook{
	background-image: url('facebook_white.svg');
}

.icon-telegram{
	background-image: url('telegram_white.svg');
}

.icon-maps{
	background-image: url('map_white.svg');
}

.icon-gps{
	background-image: url('gps_white.svg');
}

.icon-calendar{
	background-image: url('calendar_white.svg');
}

.button-calendar a:hover{
	background-color: var(--color-calendar);
    transition: 300ms;
}
.button-instagram a:hover{
	background-color: var(--color-instagram);
    transition: 300ms;
}

.button-facebook a:hover{
	background-color: var(--color-facebook);
    transition: 300ms;
}

.button-telegram a:hover{
	background-color: var(--color-telegram);
    transition: 300ms;
}

.button-maps a:hover{
	background-color: var(--color-maps);
    transition: 300ms;
}

footer{
    color: var(--light-gray);
    padding: 20px 60px 60px 60px;
}

.icon-cc{
    display: inline-block;
    background-image: url('cc_white.svg');
    background-repeat: no-repeat;
    margin-bottom: -0.1em;
    width: 1em;
    height: 1em;
}

/*  DARK MODE  */

@media (prefers-color-scheme: light){
    :root{
        --dark-gray: #ccc;
        --dark-gray2: #ddd;
        --light-gray: #000;
        --light-gray2: #111;
        --black: #fff;
        --transparent-hero: rgba(0,0,0,0.05);
        --transparent-shadow: rgba(0,0,0,0.25);
        --color-calendar: #b3debf;
        --color-instagram: #d1b5e3;
        --color-facebook: #a8ccfa;
        --color-telegram: #b8e7ff;
        --color-maps: #ffc1c3;
    }

    .icon-instagram{
        background-image: url('instagram.svg');
    }
        
    .icon-facebook{
        background-image: url('facebook.svg');
    }

    .icon-telegram{
        background-image: url('telegram.svg');
    }

    .icon-maps{
        background-image: url('map.svg');
    }

    .icon-gps{
        background-image: url('gps.svg');
    }

    .icon-calendar{
        background-image: url('calendar.svg');
    }

    .icon-cc{
        background-image: url('cc.svg');
    }
}

/*  HIDE / SHOW depending on OS  #  START  */
.ios-only,
.android-only {
    display: none;
}

.ios .ios-only {
    display: flex;
}

.non-ios .android-only {
    display: flex;
}
/*  HIDE / SHOW depending on OS  #  END  */

/*  LANGUAGE SELECTION  #  START  */
.lang-pt-only,
.lang-en-only {
    display: none;
}

.lang-pt .lang-pt-only {
    display: block;
}

.lang-en .lang-en-only {
    display: block;
}
/*  LANGUAGE SELECTION  #  END  */