* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: sans-serif, fantasy;
}
:root {
    --black: #000;
    --gray: #6d6969;
    --dark: #adaaaa;
    --white: #fff;
    --tertiary_white: #ebe9e5;
    --botton: #E30713;
    --background: #f6f7f8;
    --footer:#151925;
}

body {
    background-color: var(--background);
    overflow-x: hidden;
}

nav {
    background-color: var(--botton);
    width: 100%;
    height: 6.5vh;
    position: relative;
    display: inline-block;
 }

 nav .logo{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    margin-top: 0.25rem;
    margin-left: 0.5rem;
    overflow: hidden;
 }

nav .nav,
 .activities{
    display: flex;
    flex-direction: row;
    margin-top: -2rem;
    margin-left: 2rem;
 }
.nav p{
   margin-left: 1.5rem;
   color: var(--black);
   font-weight: bolder;
}
 .nav li, 
 li a{
    margin-inline-start: 3rem;
    color: var(--tertiary_white);
    font-size: 1.2rem;
    font-family: sans-serif;
 }
 
 li a:focus{
    color: var(--gray);
    height: 10px;
    border-bottom: 2px solid var(--gray);
 }
 nav .join{
   float: inline-end;
   margin-top: -1.8rem;
   margin-right: 1rem;
   width: 6dvw;
   height: 4dvh;
   border: 1.5px solid var(--tertiary_white);
   background-color: var(--botton);
 }
 nav .join a{
   text-decoration: none;
   color: var(--background);
 }

header{
    width: 100%;
    height: auto;
}

main{
    min-height: 50vh;
    width: 100%;
    background-image: url(images/cube.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-top: auto;
}

.join{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--white);
}

.title{
    color: var(--tertiary_white);
    font-size: 1.2rem;
    font-family: calibri;
}

.spot_gallery{
    position: absolute;
    font-size: 1em;
    color: var(--black);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
}

 .activities{
    width: 100%;
    overflow-x:auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 10px 0;
    margin-left: -2.5rem;    
}

 .container{
    width: 30dvh;
    height: 45vh;
    padding: 5rem;
    margin-top: 2rem;
    margin-inline-start: 3rem;
    background-color: var(--background);
    border-radius: 5px;
    box-shadow: hsl(0, 1%, 58%) 0 0 10px;
 }
.container .inner{  
    width: 30dvh;
    height: 50dvh;
    overflow: hidden;
    border-radius: 5px;
    margin-inline-start: -5rem;
    margin-top: -5rem;
}

.container .inner h4{
   color: var(--botton);
   margin-top: 0.3rem;
   padding-left: 0.3rem;
}

.inner img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin-top: -6.3rem;
 }

  .caption{
    width: 100%;
    height: auto;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
    position:relative;
    margin-top: -6rem;
    border: none;
    box-shadow: -1px -0px 0px 0px rgb(35, 34, 35) ;
 }

 
 .caption h3{
    color: var(--black);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    font-size: 1.1rem;
    margin-left: 0.2rem;
 }

 .caption p{
    color: var(--black);
    font-family: calibri;
    font-weight: 400;
    font-size: 1.1rem;
    margin-top: 0rem;
    margin-left: 0.2rem;
    width: 70%;
 }

 hr{
    color: var(--botton);
    background-color: var(--botton);
    border: 1px solid var(--gray);
 }

 section{
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    background-color: var(--white);
    width: 99%;
    height: 52dvh;
    margin: 0.5rem;
    padding-left: 10rem;
 }

 section .box {
    width: 90%;
    height: 100%;
    margin-left: 5px;
    overflow: hidden;
    background: var(--white);
 }
 .box p{
    margin-top: 10px;
    color: var(--black);
    font-family: calibri;
    font-weight: bold;
    font-size: 1.1em;
 }

 .box h6{
    margin-top: 3px;
    color: var(--gray);
    font-size: 1em;
    font-family: calibri;
    font-weight: bold;
 }

 .box h4{
    float: right;
    margin-top: -40px;
    color: var(--black);
    font-family: calibri;
    font-weight: bold;
    font-size: 1.1em;
 }

.box h5{
    float: right;
    margin-top: -15px;
    color: var(--gray);
    font-family: calibri;
    font-weight: bold;
    font-size: 1em;
 }

.box h2{
    margin-left: 30px;
    color: var(--black);
    font-family: calibri;
    font-weight: bold;
    font-size: 1.1em;
}
.box .clubs{
    display: flex;
    height: auto;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 5em;
}
 .box .clubs .logo{
    width: 5dvw;
    height: 10dvh;
    margin-top: 3rem;
 }

 .box button{
    width: 90%;
    height: 4dvh;
    border-radius: 20px;
    border: none;
    background-color: var(--gray);
    margin-top: 1.3rem;
    margin-left: 3rem;
 }

 .box .news a{
   color: var(--black);
   font-weight: bold;
   font-family: calibri;
   font-size: 1.1em;
 } 
 
 .box .sync a{
    color: var(--tertiary_white);
    font-weight: bold;
    font-family: calibri;
    font-size: 1.1em;
 }
 
 .box .sync{
   width: 100%; 
   margin-left: 0rem;
    background-color: var(--botton);
 }

 footer{
   width: 100%;
   height: auto;
   background-color: var(--footer);
   margin-top: -0.5rem;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word; 
 }

footer h1,
footer h4{
   font-family: monospace;
   font-size: 2.5em;
   padding-left: 45%;
   padding-top: 1%;
   color: var(--background);
}

footer h4{
   padding-left: 1%;
   font-family: calibri;
   font-size: 1.5em;
   text-align: center;
   color: var(--dark);
}

.social_media {
  color: var(--dark);
  margin-left: 1.5rem;
  font-size: 2em;
}

footer ul{
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   gap: 0.5em;
}

 @media screen and (max-width: 450px) {
   html{
      overflow-x: hidden;
   }
   body{
      width: 100%;
      overflow-x: hidden;
   }
   nav {
      position: fixed;
      z-index: 1000;
      width: 100%;
      height: 7vh;
      overflow: hidden;
   }
   nav  .logo{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-top: 0.7rem;
   }
   nav .nav{
        display: flex;
        align-items: center;
   } 
   .nav p{
     display: none;
   }
   .nav li a {
      font-size: 0.8em;
      margin-inline: -1em;
   }
   .nav .none{
      display: none;
   }
   
  nav .join {
      width: 20.5dvw;
      height: 4dvh;
      margin-top: -1.6rem;
      margin-right: 0.2rem;
   }
   
  main {
        with: 100%;
        margin-top: 8dvh;
    }

   .sport_gallery {
      font-size: 1.5em;
   }
   
   .activities{
      width: auto;
      height: 57dvh;  
   }
   .container {
      width: 30dvh;
      height: 100%;
   }
   .inner  {
      height: 100%;
      width: auto;
   }
   
   .container .inner h4{
   color: var(--botton);
   margin-top: 0.3rem;
   padding-left: 0.3rem;
   }

   .inner img{
    margin-top: -5.5rem;
   }

   .caption h3{
       margin-top: 0.4rem;
       font-weight: bolder;
   }

   .caption p{
    margin-top: 0.4rem;
    font-weight: 400;
    color: var(--black);
   }

   section {
      width: 100%;
      height: 95dvh;
      grid-template-columns: 1fr;
      justify-content: center;
      overflow-y: hidden;
      margin:  0;
      padding-left: 1.5rem;
   }
  
   section .box{
      margin-inline: 0rem;
   }


   .box h4 {
      margin-top: -45px;
      font-size: 1.2em;
      margin-left: 1rem;
   }
   .box h5 {
   font-size: 1em;
   }

   hr {
      margin-top: -1rem;
   }
   .box .clubs .logo {
      width: 13dvw;
      height: 7dvh;
      border-radius: 50%;
      margin-inline: 1em;
      margin-top: 1rem;
   }
   .box h2 {
      position: absolute;
      margin-left: -0.5rem;
      margin-top: 2.5rem;
      font-size: 1.5em;
   }
   .clubs p {
      margin-inline: -6rem;
   }
   .box button{
      width: 75%;
      height: 3.5dvh;
      border-radius: 15px;
      margin-top: 2rem;
   }
   .box .training {
      width: 75%;
      height: 3.5dvh;
      border-radius: 15px;
   }
   .box .sync { 
      position: relative;
      margin-top: 0.2rem;
      margin-left: 0rem;
      height: 3.5dvh;
      border-radius: 15px;
    }
   .inner_box {
      margin-top: 3.2rem;
   }
   footer {
      height: auto;
      width: 100%;
      margin-top: -22rem;
      position: relative;
      overflow: hidden;
   }
   footer h1 {
      font-size: 1.4em;
      margin-left: -1.3rem;
   }
   footer h4{
      margin-left: 1%;
      font-size: 1em;
   }
   .social_media{
   margin-inline: -2rem;
   font-size: 1em;
}
 }