/*
Theme Name: Design Responsivo, Flex Box & Grid e TailwindCSS | SoftSummit
Theme URI:	https://softsummit.ape1001.com.br/
Author: Rafael Forcadell
Version: 1.0
*/


/* 
Tipografia
--------------------------------------------
*/

:root {

	--ff: 'Inter', sans-serif;
	
	/*clamp(MIN, VAL, MAX)*/

	--fs-900: 72px;
	--fs-800: 48px;
	--fs-700: 36px;
	--fs-600: 30px;
	--fs-500: 20px;
	--fs-400: 18px;

	/*--fs-900: clamp(0px, 5vw, 96px);
	--fs-800: clamp(0px, 3.3333vw, 64px);
	--fs-600: clamp(0px, 1.875vw, 36px);
	--fs-500: clamp(20px, 1.25vw, 24px);
	--fs-300: clamp(16px, 0.9375vw, 18px);
	--fs-200: clamp(14px, 0.8333vw, 16px);
	--fs-100: 14px;*/
	
	--fw-extrabold: 800;
	--fw-regular: 400;
	--fw-extralight: 200;
	

}


/* 
Configurações
--------------------------------------------
*/

* { position: relative; margin: 0; box-sizing: border-box; cursor: default; appearance: none; }
img { display: block; margin: 0; max-width: 100%; height: auto; }

html, body {
  scroll-snap-type: y proximity;
}

body {
	max-width: clamp(0px, 100vw, 1920px); 
	min-height: 100vh;
	margin: 0 auto; 
	font-family: var(--ff); 
	font-weight: var(--fw-regular); 
	font-size: var(--fs-400); 
	line-height: 1.333em;
	color: #000; 
	background-color: #FFF;
	-webkit-font-smoothing: antialiased; 
    overflow: hidden;
    overflow: overlay;
	overflow-x: hidden; 
	box-shadow: 0 0 50px rgba(0,0,0,.3);
}
body::-webkit-scrollbar { width: 15px; }
body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,.1); }


h1 { font-size: var(--fs-900); letter-spacing: -0.025em; line-height: 1em; }
h2 { font-size: var(--fs-900); letter-spacing: -0.025em; line-height: 1em; }
h3 { font-size: var(--fs-800); letter-spacing: -0.025em; line-height: 1em; }
h4 { font-size: var(--fs-700); letter-spacing: -0.025em; line-height: 1em; }




/*
Bloco
--------------------------------------------
*/

.bloco { z-index: 1; display: flex; align-items: center; justify-content: space-between;  width: 100vw; height: 100vh; padding: 0 10%; scroll-snap-align: start; }

.vertical { flex-direction: column; align-items: flex-start; justify-content: center; }
.invertido { color: #FFF; background-color: #000; }



/*
Slides
--------------------------------------------
*/

.capa {}

.o-design-responsivo h3 { max-width: 50%; }

.a-grade {}

/*.citacao { align-items: flex-end; text-align: right; }*/
.citacao h4 { max-width: 65%; margin-bottom: 2rem; }

.grade-em-movimento { align-items: center; }

.o-box-model { align-items: center; }
.o-box-model .grade div { display: grid; place-items: center; /*width: 500px;*/ /*height: 500px;*/ padding: 50px; border: 4px solid #000; margin: 50px; font-size: var(--fs-900); font-weight: var(--fw-extrabold); letter-spacing: -0.025em; line-height: 1em; }

.display-block .grade { width: 500px; }
.display-block .grade div { height: 100px; border: 4px solid #000; margin-bottom: -4px; }

.display-inline .texto { width: 500px; font-size: var(--fs-900); font-weight: var(--fw-extralight); letter-spacing: -0.025em; line-height: 1em; }

.display-inline-block .grade { width: 500px; }
.display-inline-block .grade div { display: inline-block; vertical-align: top; width: 33.3333%; height: 300px; border: 4px solid #000; margin-right: -4px; }

.flex-box-modelo { justify-content: center; font-size: var(--fs-900); font-weight: var(--fw-extralight); letter-spacing: -0.025em; line-height: 1em; }
.flex-box-modelo .grade { display: flex; }

.grid-modelo { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; padding: 0; font-size: var(--fs-900); font-weight: var(--fw-extralight); letter-spacing: -0.025em; line-height: 1em; background-color: #EFEFEF; }
.grid-modelo div { display: grid; place-items: center; height: 100vh; border-right: 4px dashed #000; text-align: center; background-color: #FFF; }
.grid-modelo div:last-child { border-right: 0; }

.tailwindcss a { color: #FFF; text-decoration: none; cursor: pointer; }

.bonus h2 { margin-bottom: 2rem; }
.bonus ul { list-style: none; padding: 0; margin: 0; font-size: var(--fs-600); font-weight: var(--fw-extrabold); letter-spacing: -0.025em; line-height: 1.5em; }
.bonus a { color: #000; cursor: pointer; }