/* --> Safe Stream <<<-----*/

/* -------> Colors <<<--------------*/

:root {
  --white:#ffffff;
}

/* -------> Fonts <<<--------------*/


/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url( "../images/lato-thin.woff2") format('woff2');
    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;
}

/* latin*/
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../images/lato-normal.woff2")  format('woff2');
 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;
}

/* latin*/
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../images/lato-bold.woff2")  format('woff2');
    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;
}


/* --------> Resets and overrides <<<------------*/
	
*{margin:0; padding:0;} 
body, p, div, h1, h2, h3, h4, h5, h6, ul, ol, li, pre, blockquote, address, cite{ margin:0; padding:0;}
*, *:after, *:before {margin:0; padding:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility;}
html body {width:100%; height:100%;  background:var(--cream);} 
html {overflow-x: hidden !important}
body {font-family: "Lato", sans-serif; font-size:1.000em; color:var(--white); font-weight: 400; font-style: normal; }
.clearfix {clear:both; height:0px; font-size:1px;}
:focus {outline:0;}
img, iframe {border:none; text-decoration:none;}
ol, ul {list-style:none;}
a {color:var(--white); text-decoration:none; font-display: swap;}
p {line-height: normal; font-display: swap;}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display:block;}

/*accessibility*/
a:focus-visible, button:focus-visible {outline: 2px solid var(--brown); outline-offset: 4px; border-radius: 15px;}


/* --------> Landing <<<------------*/

.wrapper {width: 100%; height: 100vh; background-image: url("../images/background.jpg"); background-position: center center; background-size: cover; display: flex; justify-content: center; align-items:center; }
.wrapper .content {justify-content: center; text-align: center;}

.wrapper h2 { font-weight: 100!important; font-size: 8em; margin: 40px 0 40px;}
.wrapper a {border: 1px solid var(--white); display: inline-block; padding: 10px 20px; font-weight: 700!important; font-size: 1.5em;}
.wrapper a:hover {opacity: 0.6; }


/* --------> Mediaqueries <<<------------*/

@media (max-width: 1024px) {
	
	.wrapper .content {padding: 0 40px 0 40px;}
	.wrapper h1 img {width: 100%; max-width:450px; height: auto; }
	.wrapper h2 {font-size: 6em; line-height: 0.9em;}
	.wrapper a {font-size: 1.1em;}
	
}


@media (max-width: 768px) {
	
	.wrapper h1 img {width:70%;}
	.wrapper h2 {font-size: 5em; }
	.wrapper a {font-size: 1.5em; font-weight: bold!important; }
	
}