@import url('../karla_font.css');
@import url('../nunito_font.css');
@import url('../open-sans_font.css');
@import url('../poppins_font.css');
@import url('../roboto_font.css');
@import url('../roboto-mono_font.css');
@import url('../roboto-slab_font.css');
@import url('../rosarivo_font.css');
@import url('../source-sans_font.css');
@import url('../titillium-web_font.css');
@import url('../work-sans_font.css');
@import url('../merriweather_font.css');
@import url('../segoe_font.css');
@import url('../quicksand_font.css');
@import url('../trebuchet_ms_font.css');
@import url('../liberation_font.css');
@import url('../barlow_font.css');
@import url('../raleway_fonts.css');
@import url('../manrope_font.css');
@import url('../calibri_font.css');
@import url('../mooli_font.css');
@import url('../encode_sans.css');
body {
  font-family: 'Karla', sans-serif;
  font-weight: 200;
  min-height: 100vh;
  background: linear-gradient(to right, #636363, #d48b03);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.karla {font-family: 'karla';}
.nunito {font-family: 'nunito';}
.open-sans {font-family: 'open sans';}
.poppins {font-family: 'poppins';}
.roboto {font-family: 'roboto';}
.roboto-mono {font-family: 'roboto mono';}
.roboto-slab {font-family: 'roboto slab';}
.rosarvio {font-family: 'Rosarivo';}
.source-sans {font-family: 'Source Sans 3';}
.titillium-web {font-family: 'titillium web';}
.work-sans {font-family: 'Work Sans';}
.merriweather {font-family: 'Merriweather';}
.segoe {font-family: 'Segoe';}
.quicksand {font-family: 'Quicksand';}
.trebuchet-ms {font-family: 'Trebuchet MS';}
.liberation {font-family: 'Liberation';}
.barlow {font-family: 'Barlow';}
.raleway {font-family: 'Raleway';}
.manrope {font-family: 'Manrope';}
.calibri {font-family: 'Calibri';}
.mooli {font-family: 'Mooli';}
.encode_sans{font-family:'Encode Sans'};

.fw-200 {font-weight:200;}
.fw-300 {font-weight:300;}
.fw-400 {font-weight:400;}
.fw-500 {font-weight:500;}
.fw-600 {font-weight:600;}
.fw-700 {font-weight:700;}
.fw-800 {font-weight:800;}
.fw-900 {font-weight:900;}

.uppercase-text {text-transform: uppercase;}
.lowercase-text {text-transform: lowercase;}
.capitalize-text {text-transform: capitalize;}

.italic {font-style: italic;}
.normal {font-style: normal;}

.wrapper {
  width: 600px;
  background: rgba(255, 255, 255, .5);
  padding: 4rem;
  border-radius: 2rem;
  position: relative;
}

/* .wrapper::before {
  content: "";
  position: absolute;
  background-color: rgba(255, 255, 255, .15);
  inset: 0;
  transform: rotate(-5deg);
  z-index: -1;
  border-radius: 2rem;
} */

.wrapper.preview {
  width: 900px;
}

.preview h1{
  font-size: 3rem;
}
.preview h2{
  font-size: 2.5rem;
}
.preview p{
  font-size: 1.75rem;
}

.fontsSelectBox-button {margin-top: 10px; }
select {width: 200px;}
fieldset {
	border: 0;
}
label {
	display: block;
	margin: 10px 0 0 0;
}

input {
  padding: 0;
  font-size: 72px;
  border: 0;
  width: 100%;
}

.checkbox-label {
	display: flex;
	gap: .5rem;
	flex-direction: column;
	align-content: center;
	align-items: center;
}
	
.flex {
  display: flex;
  justify-content: space-between;
}

.grid {
  margin: -10px;
  padding: 0;
  letter-spacing: -0.286em;
  position: relative;	
}

.grid-cell {
  padding: 10px;
  list-style: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  letter-spacing: 0;
  direction: ltr;
}

.size1of1 {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.size1of2 {
	width: 50%;
}




@media (max-width: 900px) {
  body {
    flex-direction: column!important;
  }
  .wrapper.preview,
  .wrapper {
    width: 100%;
    padding: 0;
  }
	.wrapper > * {
    margin-inline: 1rem;
  }
  .flex {
    flex-direction: column;
  }
}