@font-face {
	font-family: poppins-font; 
	src:	local('Poppins Regular'), local('Poppins-Regular'),
			url('../fonts/poppins-regular.woff2') format('woff2'),
			local("Arial"),
			local("Verdana"),
			local("Helvetica");
	ascent-override: 105%;
	descent-override: 35%;
	line-gap-override: 10%;
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: poppins-font; 
	src:	local('Poppins Italic'), local('Poppins-Italic'),
			url('../fonts/poppins-italic.woff2') format('woff2'),
			local("Arial"),
			local("Verdana"),
			local("Helvetica");
	ascent-override: 105%;
	descent-override: 35%;
	line-gap-override: 10%;
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: poppins-font; 
	src:	local('Poppins Bold'), local('Poppins-Bold'),
			url('../fonts/poppins-bold.woff2') format('woff2'),
			local("Arial"),
			local("Verdana"),
			local("Helvetica");
	ascent-override: 105%;
	descent-override: 35%;
	line-gap-override: 10%;
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: poppins-font; 
	src:	local('Poppins Bold Italic'), local('Poppins-BoldItalic'),
			url('../fonts/poppins-bolditalic.woff2') format('woff2'),
			local("Arial"),
			local("Verdana"),
			local("Helvetica");
	ascent-override: 105%;
	descent-override: 35%;
	line-gap-override: 10%;
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: poppins-font; 
	src:	local('Poppins Black'), local('Poppins-Black'),
			url('../fonts/poppins-black.woff2') format('woff2'),
			local("Arial"),
			local("Verdana"),
			local("Helvetica");
	ascent-override: 105%;
	descent-override: 35%;
	line-gap-override: 10%;
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: poppins-font; 
	src:	local('Poppins Black Italic'), local('Poppins-BlackItalic'),
			url('../fonts/poppins-blackitalic.woff2') format('woff2'),
			local("Arial"),
			local("Verdana"),
			local("Helvetica");
	ascent-override: 105%;
	descent-override: 35%;
	line-gap-override: 10%;
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: inter-font;
	src: 	local('Inter Regular'), local('Inter-Regular'),
			url('../fonts/inter-regular.woff2') format('woff2'),
			local("Arial"),
			local("Verdana"),
			local("Helvetica");
	ascent-override: 96.875%;
	descent-override: 24.14772727%;
	line-gap-override: 0;
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: inter-font;
	src: 	local('Inter Italic'), local('Inter-Italic'),
			url('../fonts/inter-italic.woff2') format('woff2'),
			local("Arial"),
			local("Verdana"),
			local("Helvetica");
	ascent-override: 96.875%;
	descent-override: 24.14772727%;
	line-gap-override: 0;
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: inter-font;
	src: 	local('Inter Bold'), local('Inter-Bold'),
			url('../fonts/inter-bold.woff2') format('woff2'),
			local("Arial"),
			local("Verdana"),
			local("Helvetica");
	ascent-override: 96.875%;
	descent-override: 24.14772727%;
	line-gap-override: 0;
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: inter-font;
	src: 	local('Inter Bold Italic'), local('Inter-BoldItalic'),
			url('../fonts/inter-bolditalic.woff2') format('woff2'),
			local("Arial"),
			local("Verdana"),
			local("Helvetica");
	ascent-override: 96.875%;
	descent-override: 24.14772727%;
	line-gap-override: 0;
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: inter-font;
	src: 	local('Inter Black'), local('Inter-Black'),
			url('../fonts/inter-black.woff2') format('woff2'),
			local("Arial"),
			local("Verdana"),
			local("Helvetica");
	ascent-override: 96.875%;
	descent-override: 24.14772727%;
	line-gap-override: 0;
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: inter-font;
	src: 	local('Inter Black Italic'), local('Inter-BlackItalic'),
			url('../fonts/inter-blackitalic.woff2') format('woff2'),
			local("Arial"),
			local("Verdana"),
			local("Helvetica");
	ascent-override: 96.875%;
	descent-override: 24.14772727%;
	line-gap-override: 0;
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: pacifico-font; 
	src:	local('Pacifico Regular'), local('Pacifico-Regular'),
			url('../fonts/pacifico-regular.woff2') format('woff2'),
			local("Comic Sans MS"),
			local("Brush Script MT");
	ascent-override: 130.3%;
	descent-override: 45.3%;
	line-gap-override: 0;
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* Reset browser defaults ------------------- */
button,hr,input{overflow:visible}*,::after,::before,legend{box-sizing:border-box}html{-webkit-text-size-adjust:100%;font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.15;-webkit-text-size-adjust:100%;tab-size:4}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}hr{box-sizing:content-box;height:0}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}button,select{text-transform:none}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]::-webkit-search-decoration{-webkit-appearance:none}[hidden],template{display:none}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace}sub,sup{line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

html {
	background: #00061c url(../img/bg.jpg) center no-repeat;
	background-size: cover;
	height: 100%;
}

body {
	font: 16px/24px inter-font, sans-serif;
	text-align: center;		
	color: #fff;
	padding: 24px;
}

strong {
	font-weight: 700;
}

.responsive-img {
	max-width: 100%;
	height: auto;
	display: block;
}

.sr-only {
	clip: rect(0,0,0,0);
	position: absolute;
	overflow: hidden;
	margin: -1px;
	height: 1px;
	width: 1px;	
	padding: 0;   
	border: 0;
}

.container {
	margin: 0 auto;
	background: #0d1225;
    max-width: 480px;
    width: 100%;
	padding: 24px;
	border-radius: 12px;

	.header {

		h1 {
			font: 700 1.8em/48px poppins-font, sans-serif;

			&&::before {
				content: '';
				width: 96px;
				height: 96px;
				margin: 0 auto 24px;
				border-radius: 100px;
				border: 2px solid #08bdc9;
				display: block;
				background: url(../img/avatar.jpg) center no-repeat;
				background-size: cover;
			}
		}

		.bio {
			margin-bottom: 24px;

			strong {
				border-bottom: 2px solid #f4a710;
			}
		}
	}

	main {
		p {
			margin-bottom: 24px;
		}

		strong {
			border-bottom: 2px solid #f4a710;
		}

		a{
			color: #08bdc9;
			font-weight: 700;
		}
	}

	.links {

		li {
			display: block;
			margin-bottom: 24px;

			a {
				background-color: #f1c40f;
				border-radius: 12px;
				padding: 12px;
				text-decoration: none;
				color: #1a181d;
				transition: all 0.2s ease-in-out;
				font-weight: 700;
				display: block;
				position: relative;

				&&:is(:hover,:focus,:active) {background-color:#ffff00;}
				&&:active {top: 1px;}

				&&.icon {
					text-align: left;
					padding-left: 48px;

					&&::before {
						content: "";
						background: url(../img/sprites.svg) 0 0 no-repeat;
						height: 24px;
						width: 24px;
						position: absolute;
						inset: 50% 0 0 12px;
						top: 50%;
						margin-top: -12px;
					}

					&&.is-instagram {
						background-color: #e924a4;
						color: #fff;
						&&:is(:hover,:focus,:active) {
							background-color: #cd0085;
						}
						&&::before {background-position: -228px 0;}
					}

					&&.is-whatsapp {
						background-color: #00a120;
						color: #fff;
						&&:is(:hover,:focus,:active) {
							background-color: #007317;
						}
						&&::before {background-position: -76px 0;}
					}
				}
			}
		}
	}
}


/* leemark / better-simple-slideshow */
.bss-slides{
  position: relative;
  display: block; 
  line-height: 0;/*removes the gap if you put a border on the slideshow div*/
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 48px;
}
figcaption {
  line-height: 1.5; /* restores line-height to the child element*/
}
.bss-slides:focus{
 outline: 0;
}
.bss-slides figure{
  position: absolute;
  top: 0;
  width: 100%;
}
.bss-slides figure:first-child{
  position: relative;
}
.bss-slides figure img{
  opacity: 0;
  -webkit-transition: opacity 1.2s;
  transition: opacity 1.2s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.bss-slides .bss-show{
  z-index: 2;
}
.bss-slides .bss-show img{
  opacity: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative; 
}

.bss-slides figcaption{
  position: absolute;
  font-family: sans-serif;
  font-size: .8em;
  bottom: .75em;
  right: .35em;
  padding: .25em;
  color: #fff;
  background: #000;
  background: rgba(0,0,0, .25);
  border-radius: 2px;
  opacity: 0;
  -webkit-transition: opacity 1.2s;
  transition: opacity 1.2s;
}
.bss-slides .bss-show figcaption{
  z-index: 3;
  opacity: 1;
}
.bss-slides figcaption a{
  color: #fff;    
}
.bss-next, .bss-prev{
  color: #fff;
  position: absolute;
  background: #000;
  background: rgba(0,0,0, .6);
  top: 50%;
  z-index: 4;
  font-size: 2em;
  margin-top: -1.2em;
  opacity: .3;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.bss-next:hover, .bss-prev:hover{
  cursor: pointer;
  opacity: 1;
}
.bss-next{
  right: -1px;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.bss-prev{
  left: 0;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.bss-fullscreen{
  display: block;
  width: 32px;
  height: 32px;    
  background: rgba(0,0,0,.4) url(../img/arrows-alt_ffffff_64.png); 
  -webkit-background-size: contain; 
  background-size: contain;
  position: absolute;
  top: 5px;
  left: 5px;   
  cursor: pointer;    
  opacity: .3;
} 
.bss-fullscreen:hover{
  opacity: .8;   
}
:-webkit-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}
:-moz-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:-ms-fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}
:-webkit-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}
:-moz-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:-ms-fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}