@charset "UTF-8";

html{
font-size:10px;
}

*{
box-sizing:border-box;
}

@font-face{
font-family:Oswald;
src:url("https://tennisracketsocial.org/fonts/Oswald-VariableFont_wght.woff") format("woff");
font-display:swap;
}

@font-face{
font-family:Teko;
src:url("https://tennisracketsocial.org/fonts/Teko-VariableFont_wght.woff") format("woff");
font-display:swap;
}

body{
background-color:#0466075e;
background-image:url("../images/tennis-racket-silhouette.webp");
background-repeat:repeat;
background-position:top left;
}

#wrapper{
background-color:#2b7b86;
max-width:1000px;
min-height:100vh;
padding:.75%;
display:grid;
grid-template-columns:100%;
grid-template-rows:repeat(4,auto);
margin:0 auto;
}

header,
nav,
main{
margin-bottom:1%;
}

header{
grid-row:1/2;
grid-column:1/2;
min-height:140px;
height:auto;
background-color:azure;
display:grid;
grid-template-columns:30% 70%;
grid-template-rows:100%;
place-items:center;

}

#image-backdrop-home{
grid-row:1/2;
grid-column:1/2;
background-color:#088128d1;
width:97%;
height:95%;
display:flex;
justify-content:center;
align-items:center;
}

#image-backdrop-home img{
max-width:120px;
max-height:100%;
}

header h1{
grid-row:1/2;
grid-column:2/3;
color:#088128d1;
font-size:6rem;
line-height:1;
height:6rem;
margin:0;
padding:0;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
}

nav{
grid-row:2/3;
grid-column:1/2;
min-height:60px;
height:auto;
background-color:#fff;
}

nav ul{
height:100%;
display:flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:center;
align-items:center;
list-style:none;
gap:6%;
margin:0;
padding:0 15%;
}

nav a{
font-size:1.6rem;

text-decoration:none;
color:#000;
font-weight:700;
}

nav a:hover{
color:#190ae9;
}

.skip-link{
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

.skip-link:focus{
position:static;
width:auto;
height:auto;
}

#contact-main{
place-items:center;
place-content:center;
}

#contact-main form{
background-color:#ca9228;
width:100%;
height:auto;
padding:2%;
display:grid;
grid-template-columns:100%;
grid-template-rows:auto auto auto auto 180px auto;
}

#contact-main h2{
grid-row:1/2;
grid-column:1/2;
font-size:4rem;

text-align:center;
margin:0 0 1rem;
padding:0;
}

#parent-full-name,
#parent-contact-user-email,
#parent-contact-phone-number{
padding:0 20%;
grid-template-columns:4fr 5fr;
grid-template-rows:auto;
margin:0 0 10px;
display:grid;
}

#parent-full-name{
grid-row:2/3;
grid-column:1/2;
}

#parent-contact-user-email{
grid-row:3/4;
grid-column:1/2;
}

#parent-contact-phone-number{
grid-row:4/5;
grid-column:1/2;
}

#label-full-name,
#label-contact-user-email,
#label-contact-phone-number{
grid-row:1/2;
grid-column:1/2;
}

#full-name,
#contact-user-email,
#contact-phone-number{
grid-row:1/2;
grid-column:2/3;
}

.contact-label-name{
margin:auto 0;
font-size:2rem;
font-weight:700;
}

.contact-text-field{
width:auto;
margin:auto 0;
font-size:2rem;
font-weight:700;
height:40px;
border:2px solid #000;

padding-inline:10px;
outline:0;
}

#parent-message{
grid-row:5/6;
grid-column:1/2;
display:grid;
grid-template-columns:100%;
grid-template-rows: 40px 140px;
padding: 0 15%;
}

#label-message{
grid-row:1/2;
grid-column:1/2;
}

#message{
grid-row:2/3;
grid-column:1/2;
height:140px;
width:auto;
margin:0;
font-size:2rem;
font-weight:700;
font-family:sans-serif;
}

#contact-submit{
cursor:pointer;
height:50px;
border:3px solid #000;
padding:0;
margin:30px auto auto;
font-size:2.75rem;
font-weight:700;
background-color:#23c45ce9;
color:#000;
width:60%;

}

#google-maps-border{
height:auto;
background-color:#50b4f7;
justify-items:center;
}

#google-maps{
margin:10px 1%;
width:98%;
aspect-ratio:4/3;
}

#map-container{
width:100%;
height: 100%;
}

#load-map-button {
  display:block;
  width: 120px;
  height: 120px;
  background-color:#000000;
  color: #ffffff;
  font-size: 1.75rem;
  margin: 10px auto;
}

header {
  font-family: Teko, Impact, Arial Narrow, sans-serif;
}

nav,
main,
footer {
  font-family: Oswald, Arial Narrow, Arial, sans-serif;
}

footer{
grid-row:4/5;
grid-column:1/2;
background-color:#4ce782e9;
height:auto;
padding:3%;
display:grid;
grid-template-columns:38.5% 58.5%;
grid-template-rows:repeat(2,1fr);

}

footer h2{
font-size:2.25rem;
padding:0;
margin:0;
}

footer h3{
font-size:1.5rem;
margin:0;
padding:0;
font-weight:400;
}

footer p{
font-size:1.5rem;
padding:0;
margin:0;
}

footer a{
font-size:1.5rem;
font-weight:400;
text-decoration:none;
color:#000;
}

footer a:hover{
color:#190ae9;
}

#social-media{
display:grid;
grid-template-columns:repeat(5,auto);
grid-template-rows:1fr;
align-items:center;
justify-content:left;
list-style:none;
gap:1%;
margin:0;
padding:0;
}

#contact-email,
#contact-phone,
#social-media{
margin-top:2%;
}

@media (max-width:700px){

#load-map-button {
  display:block;
  width: 70px;
  height: 70px;
  font-size: 1.25rem;
  margin: 5px auto;
  background-color:#000000;
  color: #ffffff;
}

header,
nav,
main{
margin-bottom:2%;
}

header h1{
font-size:4rem;
line-height:1;
height:4rem;
}

#image-backdrop-home img{
max-width:80px;
max-height:100%;
}

nav ul{
gap:3.5%;
padding:0 2%;
text-align:center;
}

nav a{
font-size:1.1rem;
}

#contact-main h2{
font-size:3rem;
}

#parent-full-name,
#parent-contact-user-email,
#parent-contact-phone-number{
padding:0 5%;
grid-template-columns:1fr 1fr;
}

#parent-message{
padding:0 10%;
justify-items:center;
}

#message{
width:100%;
font-size:1.5rem;
}

.contact-label-name,
.contact-text-field{
font-size:1.5rem;
}

#google-maps{
margin:5px 1%;
}

#contact-submit{
font-size:2rem;
}

footer{
grid-template-columns:100%;
grid-template-rows:repeat(4,auto);
}

footer h2{
font-size:2.2rem;
}

footer h3,
footer p,
footer a{
font-size:1.7rem;
}
}