body{
  overflow-x:scroll;
  background-color:#121212;
}
*{
  padding:0px;
  margin:0px;
  box-sizing: border-box;
  
}


.container{
  width:60%;
  max-width:1152px;
  padding:0;
  background-color:rgb(255, 255, 255);
  height:90vh;
  min-height:800px;
  min-width:1080px;
  margin:auto;
  display:grid;
  

  /*fix columns widths so they are equal*/
  grid-template-columns: 1fr 1fr;
  
  grid-template-rows: repeat(5, minmax(150px,1fr));
  
  gap:0px;;
  grid-template-areas:
  "main-photo  descriptive-text" 
  "main-photo  descriptive-text" 
  "main-photo  sizes"
  "main-photo  sizes"
  "selection-photos  shop-btn ";
  border-style:solid;
  border-width:10px;
  border-color:white;
  
  
}
.main-photo{
  grid-area: main-photo;
  border: 2px solid white;
  aspect-ratio: 235 / 266;
  background-color:rgba(0, 128, 0, 0);
  background-size: cover;
  background-repeat: no-repeat;
  background-position:center bottom;
  height:100%;
  width:100%;
  transition: background-image 0.5s
  
  
}


.selection-photos{
  grid-area:selection-photos;
  align-items:flex-end;
  
  display:flex;
  justify-content:center;
  
  column-gap:10px;
  
}
.selection-photos div{
  width:100%;
  
  
  aspect-ratio: 235 / 266;
  background-color:rgba(236, 9, 9, 0);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-style:solid;
  border-color:rgba(255, 0, 0, 0);
  transition:0.15s;/*for hover effect*/
  
  
}
.selection-photos div:hover{
  border-style:solid;
  border-color:rgb(255, 34, 0);
  cursor:pointer;
  
}
.descriptive-text{
  grid-area: descriptive-text;
  padding:1em;
  width:100%;
  color:black;
  font-family:'Roboto Condensed', sans-serif;
  text-transform: uppercase;
  background-color:rgba(255, 217, 0, 0);
  
}
.shoe-brand{
  color:black;
  width:fit-content;
  font-weight:700;
  font-size:clamp(70px, 4.5vw, 70px);
  
  
}
.shoe-name{
  font-size:clamp(30px, 1.5vw, 30px);
  width:fit-content;
  
}
.shoe-colour{
  font-size:clamp(17px, 1.3vw, 30px);
  color:#5e5e5e;
  
}

.shoe-price{
  color:#5e5e5e;
  font-size:clamp(20px, 1.5vw, 30px);
  font-weight:bold;
  font-family:'roboto';
  
}

.shoe-copy{
  text-transform:none;
  display:flex;
  justify-content: center;
  align-items: flex-end;
  font-size:16px;;
}
.sizes{
  grid-area: sizes;
  background-color:rgba(255, 255, 0, 0);
  padding:1em;
  display:flex;
  flex-direction:column;
  align-items: center;
 
  
}


.size-table {
  border-collapse:separate;
            border-spacing:8px 8px;
  
  font-size:1em;
  
  background-color:rgba(255, 255, 0, 0);
  font-family:'Roboto Condensed', sans-serif;
  color:#a8a8a8;
  height:fit-content;
  width:fit-content;
  
  
  
  
  
  
}

th, td {
  border: 1px solid #a8a8a8;
  text-align: center;
  padding: 10px;
  
  width:90px;
  
  max-height:10px;
  transition: background-color 0.1s ease;
  border-radius:10px;
}

td:hover {
  background-color: #cce5ff; /* Add your preferred background color here */
}
#women-only{
  display:none;
}
#men-only{
  display:none;
}
#kids-only{
  display:none;
}
#kids-women{
  display:none;
}
table td:hover{
  cursor:pointer
}
.declaration{
  
  font-family:'Roboto Condensed', sans-serif;
  text-align: center;
  display:flex;
  background-color:rgba(255, 0, 13, 0);
  justify-content: center;
  align-items:center;
  flex-basis:1px;
  margin-top:5px;
  flex-grow:2
}
.shop-btns{
  grid-area:shop-btn;
  background-color:rgba(255, 192, 203, 0);
  padding:1em;
  display:flex;
  flex-direction: column;
  justify-content:flex-start;
  margin-bottom:10px;
  

}
.shop-btns p{
  font-size:1em;
  font-family:'roboto';
  padding:25px;
}
.btn{
  height:50px;
  width:100%;
  border: 1px solid #a8a8a8;
  display:flex;
  justify-content: center;
  align-items: center;
  font-family:'Roboto Condensed', sans-serif;
  font-size:1.5em;
  border-radius: 25px;
}
#add-to-basket{
  
  color:#a8a8a8;;
  transition: all 0.2s;
}
#add-to-basket:hover{
  background-color:grey;
  color:white;
  cursor:pointer;
}
#add-to-basket:active{
  color:red;
  border-style:solid;
  border-color:red;
}
#view-basket{
  
  
  background-color:#005dc6;
  color:white;
  
}
#view-basket:hover{
  cursor:pointer;
  background-color:#000000;
  
  
}

@media  (max-width:500px) and (min-width:0px){
  /*phone*/
  .container{
    border: none;
    /*phone*/
    background-color:rgb(255, 255, 255);
    /*-------------------------------------*/
    
    min-width:100px;
    width:100%;
    height:auto;
    gap:0;
    display:flex;
    flex-direction:column;
    justify-content: flex-start;
    
    
    
    
  }
  .main-photo{
    
    /*phone*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center center;
    flex-basis:114vw;
    order:2;
    width:100vw;
    height:114vw;
    
  }
  
  .selection-photos{
    
    display:flex;
    justify-content:center;
    align-items: flex-start;
    column-gap:10px;
    background-color: rgba(12, 251, 171, 0);
    /*phone*/
    flex-basis:130px;
    order:3;
  }
 
  .descriptive-text{
   /*phone*/
    background-color:rgba(255, 255, 255, 0);
    order:1;
    
  }
 
  .sizes{
    
    
    padding:1em;
    width:100%;
    /*phone*/
    order:4
    
  }
  
  th, td {
    /*phone*/
    border: 1px solid #a8a8a8;
    text-align: center;
    padding: 10px;
    min-width:10px;
    
    
    
    width:calc((100vw - 32px)/5);
    height:65px;
  
    transition: background-color 0.1s ease;
   font-size:1.2em;
  }
  
  table {  
    /*phone*/
    width:fit-content;
    margin-right: auto;  
    margin-left: auto;
    margin-top:auto;
    margin-bottom:auto;
    margin:auto;
    }
    .sizes{
      /*phone*/
      display:flex;
      flex-direction:column;
      justify-content: flex-start;
    }
    .shop-btns{
      /*phone*/
      order:5;
    }
}
@media  (max-width:280px) and (min-width:0px){
  th, td {
    /*very thin phone*/
    border: 1px solid #a8a8a8;
    text-align: center;
    padding: 0px;
    min-width:1em;
    min-height:1em;
    
    
    
  max-height:10px;
    transition: background-color 0.1s ease;
   font-size:12px;
  }
}


@media  (max-width:1080px) and (min-width:501px){
  .container{
    
    background-color:rgb(255, 255, 255);
    
    
    padding:0;
    
    
    min-height:800px;
    min-width:501px;
    margin:auto;
    
    min-width:100px;
    width:90%;
    height:auto;
    gap:0;
    display:flex;
    flex-direction:column;
    justify-content: flex-start;
   }
   .main-photo{
    
    /*phone*/
    
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center bottom;
    flex-basis:content;
    order:2
    
  }
  
  .selection-photos{
    
    display:flex;
    justify-content:center;
    align-items: flex-start;
    column-gap:10px;
    
    /*phone*/
    flex-basis:200px;
    order:3;
    
  }
 
  .descriptive-text{
   /*phone*/
    background-color:rgba(255, 255, 255, 0);
    order:1;
    
  }
 
  .sizes{
    
    
    padding:1em;
    width:100%;
    /*phone*/
    order:4
    
  }
  
  th, td {
    /*phone*/
    border: 1px solid #a8a8a8;
    text-align: center;
    padding: 10px;
    min-width:10px;
    min-height:7px;
    width:calc((100vw - 32px)/5);
    height:65px;
    
  
    transition: background-color 0.1s ease;
   font-size:1.2em;
  }
  
  table {  
    /*phone*/
    width:fit-content;
    margin-right: auto;  
    margin-left: auto;
    margin-top:auto;
    margin-bottom:auto;
    margin:auto;
    }
    .sizes{
      /*phone*/
      display:flex;
      flex-direction:column;
      justify-content: flex-start;
    }
    .shop-btns{
      /*phone*/
      order:5;
    }
}