@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;
    

}



.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;


  

}


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


}



#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;
  width: 100%;


}

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

}



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 ;
}



#retype::file-selector-button{
    background-color: #81D3F0;
    border: none;
    border-radius: 5px;
    color: #6B1234;
}