html,
body{
  height: auto;
  width: auto;
  padding: 0;
  margin: 0 auto;
  background: rgb(198,201,208) !important;
}

canvas{
    padding: 0;
    margin: 0 auto;
    display: block;
}


.container-canvas {
  position: relative;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.table-container {
  border-radius: 5px; /* Add rounded corners to the container */
  border:3px; 
  color: rgba(13,21,44); 
  border-style:solid; 
  border-color:rgba(13,21,44); 
  background-color: rgba(237,237,239); 
  border-collapse: collapse;
  margin: auto; 
  margin-bottom:20px;
  padding: 4px;
  
}


table.wind-table {
  padding: 0.1em;
  width: 160px;
  height: 30px;
  font-size: medium;
}


.small-column {
  width: 20%;
}
.medium-column {
  width: 33%;
}

.large-column {
  width: 60%;
}

.arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgb(3, 32, 120);
  transition: transform 0.3s ease-in-out;
  transform: translate(-50%, -50%);
}

#knotsMean {
  margin-top: 10px;
}

.windContainer {
  position: absolute;
  display: flex;
  flex-direction: column;
  right:3%;
}


h1,h2{ 
  font-weight: bold !important; 
  /* font-family: Arial !important; */
  text-align: center;
  color: rgba(13,21,44);
}
p{
  text-align: center;
  font-size: 20px;
  color: rgba(13,21,44);
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}
p a {
  text-align: center;
  font-size: 20px;
  color: #000000;
  text-decoration: none;
  pointer-events: none;
}

li a{
  font-size: 20px;
}
li a.active{
  /* color: rgba(226,10,19) !important; */
  color:white !important;
  font-size: 20px;
  border-bottom:3px solid white;
}
.footer {
  position: fixed;
  left: 0px;
  bottom: 0px;
  padding-top: 20px;
  width: 100%;
  height: auto;
  min-height: 100px;
  background-color: rgba(13,21,44);
  color: white;
  text-align: center;
}
.page-wrapper{
  min-height: 100%;
  min-width: 100%;
  margin: 0 auto;
}

.data{
  margin: auto; 
  color: rgba(13,21,44); 
  border:3px; 
  border-radius: 5px;
  border-style:solid; 
  border-color:rgba(13,21,44); 
  background-color: rgba(237,237,239); 
  padding: 0.1em;
  width:150px;
  margin-bottom:20px;
}
.dataMedium{
  margin: auto; 
  color: rgba(13,21,44); 
  border:3px; 
  border-radius: 5px;
  border-style:solid; 
  border-color:rgba(13,21,44); 
  background-color: rgba(237,237,239); 
  padding: 0.1em;
  width:200px;
  font-size: medium;
}
.dataSmall{
  margin: auto; 
  color: rgba(13,21,44); 
  border-radius: 5px;
  border-color:rgba(13,21,44); 
  padding: 0.1em;
  width:80px;
  font-size: medium;
}
.windSpeed{
  margin: auto; 
  width:80px;
  font-size: medium;
}
.smallArrowBox{
  position: absolute;
  margin: auto; 
  width:50px;
}
.smallArrow {
  position: relative;
  top: 50%;
  left: 50%;
  color: rgb(3, 32, 120);
  transition: transform 0.3s ease-in-out;
  transform: translate(-50%, -50%);
}
.dirLetter{
  margin: auto; 
  font-size: small;
}


.hidden {
  display: none;
}

@media screen and (max-width: 720px) {
  .small-column,
  .large-column {
    display: block;
    width: 100% !important;  /* force full‐width so they stack */
    box-sizing: border-box;
    margin-bottom: 0.5rem; 
    }
  .windContainer {
      margin-right: auto;
      margin-left:auto;
      width: 50%;
      position: inherit;
  }
  .windContainer h5 {
    text-align: center;
  }
}

body {
  padding-bottom: 120px;
}