@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

@font-face {
  font-family: 'japanese2020';
  src: url("../fonts/JAPANESE_2020.otf");
}

body {
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;

	display: flex;
	flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

@media screen and (min-width: 951px) {
	body {
		background-image: url(../images/background.png);
		background-size: 100% 100%;
	}

	.popup {
		position: fixed;
		right: 20px;
		top: 20px;
		display: flex;
		align-items: center;
		gap: 10px;
		display: none;
		opacity: 0;
		transition: opacity 0.5s ease;
	}

	#popup {
		display: flex;
		align-items: center;
		gap: 15px;

		width: 240px;
		height: 90px;

		border-radius: 80px;
		border: 2px solid #FFF616;
		background: #1C1C1C;
	}

	#popup img {
		margin: 0;
		padding-left: 15px;
		width: 35px;
		height: 35px;
	}

	#popup p {
		margin: 0;
		text-align: center;
		width: 150px;
		font: normal 500 13px 'Inter', sans-serif;
		color: #FFF;
	}

	.popupLogo {
		margin: 0;
		width: 90px;
		height: 90px;
		border-radius: 100px;
		border: 2px solid #FFD700;
	}

  main {
		margin-top: 3vw;
    display: flex;
		flex-direction: column;
		align-items: center;

    width: 424px;
    height: 600px;

		background-image: url(../images/backgroundSinais.jpg);
		background-size: 100% 100%;
	}

	.div_sinais {
		position: relative;
		top: 200px;
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;

		width: 350px;
		height: 260px;

		font-family: 'japanese2020', 'Inter', sans-serif;
		color: #FFF616;

		background-color: rgba(34, 34, 34, 0.3);
		border-radius: 10px;
	}

	.div_sinais h2 {
    line-height: 10px;

    font-size: 34px;

    visibility: hidden
	}

	#probabilidadeDeGanho {
		font: normal 400 18px 'japanese2020', 'Inter', sans-serif;
		color: #FFF616;
	}

	.btn_gerarSinal {
		position: relative;
		top: 270px;

		cursor: pointer;

		width: 360px;
		height: 46px;

		font: normal 400 16px 'japanese2020', 'Inter', sans-serif;
		color: #FFF616;

		background: #790001;
		border: 1px solid #FFDA7D;
		border-radius: 10px;
	}

	.btn_gerarSinal h2 {
		margin: 0;
	}

	iframe {
		margin-top: 5vw;
		width: 90vw;
		height: 45vw;
	}

	.contatos {
		position: fixed;
		bottom: 40px;
		right: 20px;

		display: flex;
		flex-direction: column;
		align-items: end;
		gap: 20px;

		z-index: 100;
	}

	.floatWhatsApp, .floatTelegram, .floatInstagram {
		margin: 0;

		width: 60px;
		height: 60px;
		cursor: pointer;
		
		border-radius: 50px;
		border: 2px solid #FFF;
	}

	.div_fixed{
    padding: 12px;
    box-sizing: border-box;

    display: flex;
		justify-content: center;
    align-items: center;

    font: normal 600 0.9em 'Inter', sans-serif;

    width: 170px;
    height: 65px;

    border-radius: 10px;
    background: #FFF616;
  }
}

@media screen and (max-width: 950px) {
	body {
		background-image: url(../images/background-mobile.png);
		background-size: 100% 100%;
	}

	.popup {
		position: fixed;
		right: 20px;
		top: 20px;
		display: flex;
		align-items: center;
		gap: 10px;
		display: none;
		opacity: 0;
		transition: opacity 0.5s ease;
	}

	#popup {
		display: flex;
		align-items: center;
		gap: 12px;

		width: 155px;
		height: 65px;

		border-radius: 80px;
		border: 2px solid #FFF616;
		background: #1C1C1C;
	}

	#popup img {
		margin: 0;
		padding-left: 10px;
		width: 22px;
		height: 22px;
	}

	#popup p {
		margin: 0;
		text-align: center;
		width: 90px;
		font: normal 500 9px 'Inter', sans-serif;
		color: #FFF;
	}

	.popupLogo {
		margin: 0;
		width: 65px;
		height: 65px;
		border-radius: 100px;
		border: 2px solid #FFD700;
	}


	main {
		margin-top: 10vh;
    display: flex;
		flex-direction: column;
		align-items: center;

    width: 350px;
    height: 495px;

		background-image: url(../images/backgroundSinais.jpg);
		background-size: 100% 100%;
	}

	.div_sinais {
		position: relative;
		top: 160px;
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;

		width: 290px;
		height: 220px;

		font-family: 'japanese2020', 'Inter', sans-serif;
		color: #FFF616;

		background-color: rgba(34, 34, 34, 0.3);
		border-radius: 10px;
	}

	.div_sinais h2 {
    line-height: 8px;

    font-size: 26px;

    visibility: hidden
	}

	#probabilidadeDeGanho {
		font: normal 400 16px 'japanese2020', 'Inter', sans-serif;
		color: #FFF616;
	}

	.btn_gerarSinal {
		position: relative;
		top: 218px;

		cursor: pointer;

		width: 300px;
		height: 38px;

		font: normal 400 14px 'japanese2020', 'Inter', sans-serif;
		color: #FFF616;

		background: #790001;
		border: 1px solid #FFDA7D;
		border-radius: 10px;
	}

	.btn_gerarSinal h2 {
		margin: 0;
	}

	iframe {
		margin-top: 5vw;
		width: 90vw;
		height: 90vh;
	}

	.contatos {
		position: fixed;
		bottom: 30px;
		right: 20px;

		display: flex;
		flex-direction: column;
		align-items: end;
		gap: 20px;

		z-index: 100;
	}

	.floatWhatsApp, .floatTelegram, .floatInstagram {
		margin: 0;

		width: 30px;
		height: 30px;
		cursor: pointer;
		
		border-radius: 50px;
		border: 2px solid #FFF;
	}

	.div_fixed {
    padding: 12px;
    box-sizing: border-box;

    display: flex;
		justify-content: center;
    align-items: center;

    font: normal 600 0.5em 'Inter', sans-serif;

    width: 100px;
    height: 35px;

    border: none;
    border-radius: 10px;
    background: #FFF616;
  }
}