/* "Patua One" Font (Google Font) */
@import url("https://fonts.googleapis.com/css?family=Patua+One&display=swap");

:root {
  /* CSS Variables */
  --mainColor: hotpink;
}

html {
  scroll-behavior: smooth;
}
.main-header {
  font-family: "Patua One", Arial, Helvetica, sans-serif, cursive;
  color: white;
  font-weight: bold;
  background-color: black;
}
.sport {
  color: var(--mainColor);
  font-style: italic;
}
.motto {
  font-family: "Patua One", Arial, Helvetica, sans-serif, cursive;
  color: white;
  text-transform: uppercase;
  background-color: var(--mainColor);
  border-bottom: 6px solid grey;
}
p {
  font-size: 25px;
  line-height: 2em;
}
.video {
  border: 3px solid var(--mainColor);
}
.photo {
  width: 500px;
  height: 500px;
  margin: auto;
  border: 3px solid var(--mainColor);
}
.social {
  background-color: var(--mainColor);
  border-top: 6px solid grey;
  color: white;
  padding: 20px;
}
.social a {
  width: 200px;
  color: white;
  font-size: 20px;
}
.social a:hover {
  text-decoration: none;
  color: white;
}
.footer-copyright {
  color: hotpink;
  background-color: black;
  font-size: 20px;
}
.button-top {
  position: sticky;
  bottom: 50px;
  margin-left: 20px;
  border: none;
}
.map {
  width: 100%;
  filter: grayscale(100%);
}
.clear {
  clear: both;
}

 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {
  #main-title {
    font-size: 80px;
  }
  .sport {
    font-size: 50px;
  }
 }

 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
  
 }
 
 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {
  
 }
 
 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px) {

 }
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {

 }