/* General */
:root{
  --helmet-red:#a50000;
  --black:#141414;
  --white:#f7f7f7;
  --gray:#2e2e2e;
  --red:#f24949;
}
body{
  background-color:var(--black);
  font-family:NotoSansJP;
  color:var(--white);
  font-size:16px;
  padding:0;
  margin:0;
}
h1{
  font-family:Dreamwalker;
}
a{
  text-decoration:none;
  color:var(--red);
}
a:hover{
  text-decoration:underline;
}
.center{
  text-align:center;
}
@font-face{
  font-family:"Dreamwalker";
  src:url("./res/Dreamwalker.otf");
}
@font-face{
  font-family:"NotoSansJP";
  src:url("./res/NotoSansJP-Regular.otf");
}
@font-face{
  font-family:"NotoSansJP";
  src:url("./res/NotoSansJP-Bold.otf");
  font-weight:bold;
}

/* Header */
.header{
  background-image:url("./res/racket.jpeg");
  background-blend-mode:multiply(0.8);
  background-color:rgba(0,0,0,0.3);
  background-blend-mode:multiply;
  background-position:top;
  background-size:cover;
  padding:25px 0;
}
.header h1{
  text-align:center;
  font-weight:bold;
  font-size:60px;
}

/* About */
.about{
  grid-template-columns:50% 50%;
  padding:5px 0;
  display:grid;
}
.about iframe{
  min-height:28vw;
  height:100%;
  width:100%;
}
.about > div{
  padding:25px 45px;
}
.about .icon{
  border:solid 5px var(--helmet-red);
  margin:20px 20px 20px 0;
  shape-outside:circle();
  border-radius:50%;
  height:120px;
  float:left;
}
@media only screen and (max-width:1000px){
  .about{
    grid-template-columns:100%;
  }
  .about iframe{
    height:56vw;
  }
}

/* Social */
.socials{
  background-color:var(--gray);
  text-align:center;
  padding:15px 0;
}
.socials-wrapper{
  grid-template-columns:50% 50%;
  font-weight:bold;
  padding:15px 10%;
  font-size:18px;
  display:grid;
}
.socials-wrapper > a{
  margin-bottom:15px;
  position:relative;
}
.socials-wrapper span{
  transform:translateY(-50%);
  color:var(--white);
  position:absolute;
  margin-left:15px;
  font-size:20px;
  top:50%;
}
.socials-wrapper > a:hover span{
  text-decoration:underline;
}
.socials-wrapper img{
  background-color:var(--black);
  border:solid 5px var(--white);
  border-radius:15px;
  padding:5px;
  height:50px;
}
@media only screen and (max-width:800px){
  .socials-wrapper{
    grid-template-columns:100%;
    text-align:left;
  }
}

/* Resources */
.resources-wrapper{
  grid-template-columns:50% 50%;
  text-align:center;
  padding:15px 10%;
  font-size:18px;
  display:grid;
}
.resources-wrapper h3{
  text-decoration:underline;
}
.resources-wrapper a{
  margin-bottom:7px;
  display:block;
}
@media only screen and (max-width:800px){
  .resources-wrapper{
    grid-template-columns:100%;
  }
}

/* Footer */
.footer{
  border-top:solid 2px var(--gray);
  text-align:center;
  font-weight:bold;
  padding:20px 0;
}