*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color:#0075A2;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}




h2{
   margin-top: 20px;
   margin-bottom: 20px;
}

h2:hover{
    text-decoration: underline;
}
nav {
    position: absolute; /* Allows precise positioning */
    top: 0; /* Anchors the nav to the top of the viewport */
    right: 0; /* Anchors the nav to the right of the viewport */
    display: flex; /* Ensures flexibility for child items */
    flex-flow: row wrap;
    gap: 25px; /* Adds space between nav items */
    padding: 10px;
    min-width: 200px;
}

h1,h2,h3,p{
    color: #EFE6DD;
}
.proPlayer{
  /*  background-color: #272635;*/
  background-color: #191919;
    width: 13%;
    height: 17rem;
  /*  border:5px solid#F3DFA2;*/
  border:5px solid#D5A021;
    border-radius: 75px;
    min-width: 200px;

    

}

.proPlayer:hover{
    color: #272635;
    background-color: #3E505B;
    border:8px solid#F3DFA2; /*Fix boucning affect with the rest of the page*/
    cursor:pointer ;
}

/*.proPlayer:active{
    border:8px solid#A675A1
}*/

img{
    border-radius: 50px;
}
h1{
    text-align: left;
  
}
.upper{
    text-align: left;
}
header{
   
    padding: 10px;
   /* background-color: #3E505B;*/
     background-color: #011936;
    width: 100%;
    border: 10px solid #0000;
    /*border-radius: 12px;*/
    /*background: linear-gradient(#131219, #131219) padding-box, linear-gradient(
          var(--angle),
          #070707,
          #687aff
        ) border-box;
    animation: 8s rotate linear infinite;
  }
  
  @keyframes rotate {
    to {
      --angle: 360deg;
    }
  }
  
  @property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }*/
}

.playerImg{
   /* margin: 25px;*/
   display:block;
   margin: auto;
   margin-top: 20px;
}

.playerName{
  /*  margin:0px 65px;*/
  text-align: center;
  margin-top: 25px;
}

#row1{
    margin-top: 25px;
}
.row{
    margin: auto;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    flex-flow: row wrap;
    max-width: 1500px;
}

a,a:hover,a:visited{
    text-decoration: none;
}


footer{
    margin-top: 15px;
    height: 140px;
    width: 100%;
    background-color: gray;
    text-align: center;
}

footer p {
    margin-top: 5px;
    margin-bottom: 20px;
    font-size: .75em;
}

footer a {
    display: table;
    margin: 5px auto 20px auto; /* Centers the block horizontally */
    text-align: center; /* Centers the text within the block */
    font-size: 1em;
}

footer a:hover{
    text-decoration: underline;
    cursor:pointer ;
    
}
footer a:visited {
    text-decoration: none; 
    color: whitesmoke; /* Inherit the color from its parent, or set a specific color */
}

a{
    color: whitesmoke;
}

#toTop{
    float: right;
}

#upperPara{
   
}

.box {
    width: 100%;
    height: 50px;
    background-color: #3E505B;
    display: flex; /* Use Flexbox for alignment */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
}

input {
    height: 40px;
    width: 200px;
    border-radius: 5px;
    text-align: center;
    border: 2px solid black; /* Fixes bouncing effect with the rest of the page */
    text-transform: uppercase;
}

/* Center the input element horizontally */


.proPlayer{
    display: none;;
}

.btn {
    font-size: 1rem;
    height: 50px;
    width: 100px;
    margin: 0 auto; /* Center horizontally in its container */
    display: block; /* Ensures margin auto works on the button */
    position: relative; /* Required for parent container alignment if necessary */
   /* background-color: #92DCE5;*/
   background-color: #F71735;
   color: white;
   border-radius: 10px;
   border:3px solid black;
   cursor: pointer;
}




    .toTop {
        margin-top: -52px;
        height: 50px;
    width: 75px;
    margin-left:  auto; /* Center horizontally in its container */
    margin-right:10px;
    display: block; /* Ensures margin auto works on the button */
    position: relative; /* Required for parent container alignment if necessary */
   /* background-color: #92DCE5;*/
   background-color: white;
   color: black;
   border-radius: 10px;
   border:3px solid black;
   cursor: pointer;
    
    }


    @media all and (max-width: 1210px) {
        header {
            margin: auto;
            justify-content: center;
            display: block; /* Makes the header a block-level element */
            width: 100%; /* Ensures it spans the full width */
            text-align: center; /* Optional: Centers content within the header */
        }
    
        nav {
            position: relative; /* Adjusts the nav to flow with the header */
            margin-top: 10px; /* Adds some spacing between header content and nav */
            justify-content: center; /* Centers nav items in the new block layout */
        }
    }