@font-face {
    font-family: 'TERMINABOLD';
    src: url('../fonts/TerminaTest-Bold.woff') format('woff'),


}

@font-face {
    font-family: 'TERMINADEMI';
    src: url('../fonts/TerminaTest-Demi.woff') format('woff'),


}


@font-face {
    font-family: 'TERMINAMEDI';
    src: url('../fonts/TerminaTest-Medium.woff') format('woff'),


}



@font-face {
    font-family: 'TERMINA';
    src: url('../fonts/TerminaTest-Regular.woff') format('woff'),


}


@font-face {
    font-family: 'PROXIMAREG';
    src: url('../fonts/ProximaNova-Regular.woff') format('woff'),


}

@font-face {
    font-family: 'PROXIMASEMI';
    src: url('../fonts/ProximaNova-Semibold.woff') format('woff'),


}

@font-face {
    font-family: 'PROXIMALIGHT';
    src: url('../fonts/ProximaNova-Light.woff') format('woff'),


}


@font-face {
    font-family: 'POPPINSMEDI';
    src: url('../fonts/Poppins-Medium.woff') format('woff'),


}


@font-face {
    font-family: 'POPPINSREG';
    src: url('../fonts/Poppins-Regular.woff') format('woff'),


}

.container {
  margin: 0 auto;
  max-width: 1272px;
  min-width: 420px;
  padding-left: 30px;
  padding-right: 30px;
  height: 100vh;

}



body{
    overflow-x: clip;

  background-image:url('../images/tennis.jpg'); 

  background-repeat: no-repeat;


  background-position: center center;

  background-size: cover;

  min-height: 100vh;
  margin: 0;

      background-color: #81D3F0;
    background-blend-mode: soft-light;
}


.header {
    
    height: 5rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
    

}



.headerText{
font-family: PROXIMASEMI;
font-size: 0.875rem;
display: flex;
padding-top: 1.3rem;
align-items: center;






}


.mainHolder{
    display: grid;
  justify-content: center;
  align-items: center;
  height: 86%;
  position: relative;


}


a{
color: #6B1134;
text-decoration: none;
transition: color 300ms ease-in;

}


.logo{
    background-image:url('../images/logo.png'); 
    background-repeat: no-repeat;
    background-size:contain;
    width: 3rem;
    height: 3rem;
    display: flex;
    
     

}


ul{
    display: flex;
    margin-left: auto;
    align-content: center;
    gap: 3.75rem;


    


}

a:hover {
  color: #FF746C;
}



.logo:hover{

	mix-blend-mode: hue;

}

.textSection{
	max-width: 1272px;
  min-width: 420px;
  margin: 0 auto;
  position: relative;
  display: flex;
  place-content: center;
  align-items: center;


}



.groupText{
	max-width: 39em;
  min-width: 20em;
  display: grid;
  row-gap: 30px;
  position: relative;






}


.fieldHolderOne{
	display: flex;
	justify-content: center;
	

}

.fieldHolderTwo{
	display: flex;

	justify-content: center;

}


.fieldHolderThree{
	display: flex;

	justify-content: center;

}

.fieldHolderFour{
	display: flex;

	justify-content: center;

}

h1{
  font-size: clamp(4rem, 6vw, 5.4rem);
  font-family: TERMINABOLD;


  

}


#firstName{
	margin-left: 30px;
  font-family: 'POPPINSREG';
  mix-blend-mode: hard-light;
  background-color: #6B1234;
  border: none;
  color: lightblue;
  border-radius: 5px;


}



#email{
	margin-left: 30px;
  font-family: 'POPPINSREG';
  mix-blend-mode: hard-light;
  background-color: #6B1234;
  border: none;
  color: lightblue;
  border-radius: 5px;
  width: 100%;


}


#password{
		margin-left: 30px;
  font-family: 'POPPINSREG';
  mix-blend-mode: hard-light;
  background-color: #6B1234;
  border: none;
  color: lightblue;
  border-radius: 5px;


}

#retype{
margin-left: 30px;
  font-family: 'POPPINSREG';
  mix-blend-mode: hard-light;
  background-color: #6B1234;
  border: none;
  color: lightblue;
  border-radius: 5px;

}



h2{
	font-family: 'POPPINSMEDI';
	font-size: clamp(1rem, 3vw, 1.5rem);
	color: #6B1234;


}


.newButton{
	font-family: 'POPPINSREG';
    width: 100%;
    height: 3.438em;
    background-color:#6B1234;
    border-radius: 5px;
    display: block;
    color: #81D3F0;
    text-align: center;
    align-content: center;
    position: relative;
    transition: color 300ms ease-out ;
}



.googleButton{
	background-image:url('../images/googlebutton.png'); 
	width: 12em;
	height: 2.688em;
	position: relative;
	display: flex;
	align-content: center;
	justify-content: center;



}


.signUp{
 color: #6B1234;
  writing-mode: vertical-lr;
  position: absolute;
  transform: rotate(180deg);


}


.newButton:hover{
	color: #6B1234;
	background-color:#81D3F0 ;
}