@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@100&display=swap");
/* @media screen and (max-width: 850px){
  .container {
    width: 98.25vw !important;
  }
} */
 .container{
   background-color: #504100;
   color: #fff;
   overflow:hidden;
  }
  .column a{
   color: white;

 }
 ul {
    list-style: none;
  }
  .codidex{
    width: 90%;
    height: 50%;
    position: relative;
    display: flex;
    margin-top: 50px;
  }
  .codidex-logo{
    width: 60%;
    height: 100%;
    position: relative;
    top: -50px;
    left: -10px;
  }
 
@media screen and (min-width: 921px) {
  .container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    background-color: #504100;
    color: #fff;
    height: 40vh;
  }
  .column {
    width: 25%;
    margin-right: 120px;
    margin-left: 20px;
  }
  ul {
    list-style: none;
  }
  li {
    width: 100px;
    margin-bottom: 10px;
  }
  .column a {
    text-decoration: none;
    color: white;
    font-size: 14px;
  }
  h4 {
    font-size: 20px;
    margin-bottom: 7px;
  }
  .con {
    margin-left: 65px;
    margin-bottom: 8px;
  }
  .icons {
    display: flex;
    justify-content: space-evenly;
  }
  .icons img {
    width: 18px;
    height: 18px;
  }
  .cpr {
    font-size: 10px;
    margin-left: 10px;
    width: 200px;
  }
  a:hover {
    color: #fbbc05;
  }
  .footer-desc {
    width: 350px;
  }
  #about {
    margin-top: 20px;
  }
  
  .codidex-mobile, .codidex-logo-mobile{
    display: none;
    }
}
@media screen and (max-width: 920px) and (min-width: 861px) {
  .container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    background-color: #504100;
    color: #fff;
    height: 40vh;
    width: 140vw !important;
  }
  .column {
    width: 25%;
    margin-right: 120px;
    margin-left: 10px;
  }
  ul {
    list-style: none;
  }
  li {
    width: 100px;
    margin-bottom: 10px;
  }
  .column a {
    text-decoration: none;
    color: white;
    font-size: 16px;
  }
  h4 {
    font-size: 20px;
    margin-bottom: 7px;
  }
  #connect {
    position: relative;
    left:-20px;
  }
  .codidex{
    position: relative;
    top: 50px;
  }
  .codidex-logo{
    position: relative;
    top: -90px;
    left: 10px;
  }
  .codidex-mobile, .codidex-logo-mobile{
    display: none;
    }
  .con {
    margin-left: 30px;
    margin-bottom: 8px;
  }
  .icons {
    display: flex;
    justify-content: space-evenly;
    position: relative;
    left: -10px;
  }
  .icons img {
    width: 18px;
    height: 18px;
  }
  .cpr {
    font-size: 10px;
    margin-left: -40px;
    width: 200px;
  }
  a:hover {
    color: #fbbc05;
  }
  .footer-desc {
    width: 350px;
  }
  #about {
    margin-top: 20px;
  }
}
@media screen and (max-width: 860px) and (min-width: 769px) {
  .container {
    height: 60vh;
    width:99vw !important;
    background-color: #504100;
  }

  .column a {
    text-decoration: none;
    color: white;
    font-size: 20px;
  }
  ul {
    list-style: none;
  }
  li {
    margin-bottom: 10px;
  }
  #about {
    position: relative;
    left: 20px;
    top:30px;
    height: 20vh;
  
  }

  .codidex, .codidex-logo{
    display: none;
       }
       .codidex-mobile{
        display: flex;
        width: 30%;
        position: relative;
        top: 50px;
        left: -50px;
        }
  .codidex-logo-mobile{
    width: 60%;
    height: 100%;
    position: relative;
    top: -50px;
    left: -10px;
  }
  .footer-desc{
    width: 350px;
    color:white;
    font-size: 20px;
  }
  h4{
    font-size: 20px;
    margin-bottom: 7px;
    color: white;
  }
  #browse {
    /* margin-left: -45px; */
    position: relative;
    left: 450px;
    top: -190px;
    width: 25%;
    /* margin:0; */
  }
  
  .cpr {
    position: absolute;
    left: -25px;
    top: 250px;
    font-size: 8px;
  }
  #legal {
    position: relative;
    
    margin-left: 100px;
    left: 120px;
    top: -150px;
  }
  .legal  li{
 
    position: relative;
    top: 60px;
    left: -300px;
  }
   #legal ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
  
   }
  #connect {
    position: relative;
    margin-top: 30px;

    top: -100px;
    left: 320px;
    padding: 0px;
    
    height: 10vh;
  }
  .con {
    position: relative;
    left: 30px;
  }
  .column .icons {
    display: flex;
   
    gap: 20px;
    position: relative;
    top:20px;
    left: -20px;
  }
  .column .icons img {
    width: 20px;
    height: 20px;
  }
  .cpr {
    color: white;
    position: relative;
    left: -130px;
   top: 50px;
    font-size: 20px;
  }
  .codidex, .codidex-logo{
    display: none;
       }
}
/* adjustment blocks */
@media screen and (max-width: 768px) and (min-width: 651px) {
  .container{
    width: 100vw !important;
  }
  #legal{
    left:140px !important;
  }
  #connect{
    left:295px !important;
  }
  #legal ul li{
  left:-250px;
  }
}
@media screen and (max-width:740px) and (min-width: 650px){
  .container{
    width: 102vw !important;
  }
}
@media screen and (max-width: 650px) and (min-width: 601px) {
  .container{
    width: 103vw !important;
  }
  #browse{
    width:30% !important;
  }
  #legal{
    left:120px !important;
  }
  #connect{
    left: 250px !important;
  }
}
/* main style container */
@media screen and (max-width: 768px) and (min-width: 601px) {
  .container {
    height: 60vh;
    
    background-color: #504100;
  }

  .column a {
    text-decoration: none;
    color: white;
    font-size: 20px;
  }
  ul {
    list-style: none;
  }
  li {
    margin-bottom: 10px;
  }
  #about {
    position: relative;
    left: 20px;
    top:30px;
    height: 20vh;
  
  }

  .codidex, .codidex-logo{
    display: none;
       }
       .codidex-mobile{
        display: flex;
        width: 35%;
        position: relative;
        top: 50px;
        left: -50px;
        }
  .codidex-logo-mobile{
    width: 60%;
    height: 100%;
    position: relative;
    top: -50px;
    left: -10px;
  }
  .footer-desc{
    width: 350px;
    color:white;
    font-size: 20px;
  }
  h4{
    font-size: 20px;
    margin-bottom: 7px;
    color: white;
  }
  #browse {
    /* margin-left: -45px; */
    position: relative;
    left: 450px;
    top: -190px;
    width: 25%;
    /* margin:0; */
  }
  
  .cpr {
    position: absolute;
    left: -25px;
    top: 250px;
    font-size: 8px;
  }
  #legal {
    position: relative;
    
    margin-left: 100px;
    left: 180px;
    top: -150px;
  }
  .legal  li{
 
    position: relative;
    top: 60px;
    left: -220px;
  }
   #legal ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
  
   }
  #connect {
    position: relative;
    margin-top: 30px;

    top: -100px;
    left: 320px;
    padding: 0px;
    
    height: 10vh;
  }
  .con {
    position: relative;
    left: 30px;
  }
  .column .icons {
    display: flex;
   
    gap: 20px;
    position: relative;
    top:20px;
    left: -20px;
  }
  .column .icons img {
    width: 20px;
    height: 20px;
  }
  .cpr {
    color: white;
    position: relative;
    left: -130px;
   top: 50px;
    font-size: 20px;
  }
}
@media screen and (max-width: 700px) and (min-width: 601px) {
  .codidex-mobile{
    display: flex;
    width: 40%;
    position: relative;
    top: 50px;
    left: -50px;
    }

.codidex-logo-mobile{
width: 60%;
height: 100%;
position: relative;
top: -45px;
left: -10px;
}
}
@media screen and (max-width: 600px) and (min-width: 552px) {
  .container {
    width: 105vw !important;
    height: 60vh;
    background-color: #504100;
    color: #fff;
  }
  .column a {
    text-decoration: none;
    color: white;
    font-size: 20px;
  }
  ul {
    list-style: none;
  }
  li {
    margin-bottom: 10px;
  }
  #about {
    position: relative;
    left: 20px;
    top:30px;
    width: 30%;
  }
  .codidex, .codidex-logo{
    display: none;
    }
  .codidex-mobile{
    display: flex;
    width: 60vw;
    position: relative;
    top: 50px;
    left: -110px;
    }
  .codidex-logo-mobile{
    width: 40%;
    height: 100%;
    position: relative;
    top: -40px;
    left: -70px;
    margin:auto auto;
  }
  .footer-desc{
    width: 350px;

    font-size: 20px;
  }
  #browse {
    /* margin-left: -45px; */
    position: relative;
    left: 400px;
    top: -180px;
    width: 30%;
    /* margin:0; */
  }
  #legal {
    position: relative;
    /* width: 60%; */

    left: 210px;
    top: -150px;
  }
  .legal{
    /* width: 65%; */
  }
  .legal  li{
 
    position: relative;
    top: 60px;
    left: -260px;
  }
   #legal ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px;
   }
   #connect {
    position: relative;
    margin-top: 30px;
 width: 25%;
    top: -100px;
    left: 320px;
    padding: 0px;
    
    height: 10vh;
  }
  .con {
    position: relative;
    left: -2rem;
  }
  .column .icons {
    display: flex;
   
    gap: 20px;
    position: relative;
    top:20px;
    left: -6rem;
    width: 25%;
  }
  .column .icons img {
    width: 20px;
    height: 20px;
  }
  .cpr {
    color: white;
    position: relative;
    left: -10rem;
   top: 50px;
    font-size:16px;
    width: 100vw;
  }
}
@media screen and (max-width: 552px) and (min-width: 551px) {
  #legal{
    left:180px !important;
  }
  #connect{
    left:300px !important;
  }
}
@media screen and (max-width: 553px) and (min-width: 550px) {
.container{
  width:100vw !important;
}
}
@media screen and (max-width: 550px) and (min-width: 531px) {
.container{
    width: 100.5vw !important;
}
#legal ul li{
  left:-235px;
}
#legal{
  left: 185px !important;
}
}
@media screen and (max-width: 530px) and (min-width: 500px) {
  .container{
    width: 101vw !important;
  }
 
}
@media screen and (max-width: 515px) and (min-width: 505px) {
#browse{
  left: 350px !important;
}
}
@media screen and (max-width: 505px) and (min-width: 500px) {
  #browse{
    left:340px !important;
  }
  #legal{
    left:170px !important;
  }
  #connect{
    left:275px !important;
  }
}
@media screen and (max-width: 552px) and (min-width: 500px) {
  .container {
    height: 60vh;
    background-color: #504100;
    color: #fff;
  }
  .column a {
    text-decoration: none;
    color: white;
    font-size: 15px;
  }
  ul {
    list-style: none;
  }
  li {
    margin-bottom: 10px;
  }
  #about {
    position: relative;
    left: 20px;
    top:30px;
    width: 30%;
  }
  .codidex, .codidex-logo{
    display: none;
       }
       .codidex-mobile{
        display: flex;
        width: 60vw;
        position: relative;
        top: 50px;
        left: -110px;
        }
      .codidex-logo-mobile{
        width: 40%;
        height: 100%;
        position: relative;
        top: -40px;
        left: -50px;
        margin:auto auto;
      }
  .footer-desc{
    width: 250px;

    font-size: 13px;
  }
  #browse {
    /* margin-left: -45px; */
    position: relative;
    left: 370px;
    top: -120px;
    /* width: 30%; */
    /* margin:0; */
  }
  #legal {
    position: relative;
    /* width: 60%; */

    left: 200px;
    top: -150px;
  }
  .legal{
    /* width: 65%; */
  }
  .legal  li{
 
    position: relative;
    top: 60px;
    left: -230px;
  }
   #legal ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px;
   }
   #connect {
    position: relative;
    margin-top: 30px;
 width: 25%;
    top: -100px;
    left: 305px;
    padding: 0px;
    
    height: 10vh;
  }
  .con {
    position: relative;
    left: -2rem;
  }
  .column .icons {
    display: flex;
   
    gap: 20px;
    position: relative;
    top:20px;
    left: -6rem;
    width: 25%;
  }
  .column .icons img {
    width: 20px;
    height: 20px;
  }
  .cpr {
    color: white;
    position: relative;
    left: -10rem;
   top: 50px;
    font-size:16px;
    width: 100vw;
  }
}

@media screen and (max-width: 500px) and (min-width: 427px) {
  .column a {
    text-decoration: none;
    color: white;
    font-size: 12px;
  }
  ul {
    list-style: none;
  }
  li {
    margin-bottom: 10px;
  }
  #about {
    position: relative;
    left: 20px;
    top:30px;
    width: 30%;
  }
  .codidex, .codidex-logo{
    display: none;
       }
      
  .footer-desc{
    width: 250px;

    font-size: 10px;
  }
  #browse {
    /* margin-left: -45px; */
    position: relative;
    left: 330px;
    top: -120px;
    /* width: 30%; */
    /* margin:0; */
  }
  #legal {
    position: relative;
    /* width: 60%; */

    left: 210px;
    top: -150px;
  }
  .legal{
    /* width: 65%; */
  }
  .legal  li{
 
    position: relative;
    top: 60px;
    left: -230px;
  }
   #legal ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px;
   }
   #connect {
    position: relative;
    margin-top: 30px;
 width: 25%;
    top: -150px;
    left: 320px;
    padding: 0px;
    
    height: 10vh;
  }
  .con {
    position: relative;
    left: -2rem;
  }
  .column .icons {
    display: flex;
   
    gap: 20px;
    position: relative;
    top:20px;
    left: -6rem;
    width: 25%;
  }
  .column .icons img {
    width: 20px;
    height: 20px;
  }
  .cpr {
    color: white;
    position: relative;
    left: -12rem;
   top: 20px;
    font-size:12px;
    width: 100vw;
  }
}
/* design adjust block */
@media screen and (max-width: 500px) and (min-width: 471px) {
  .container {
    width: 100.5vw !important;
    height: 42vh;
  }
  .con{
    left:-25px;
  }
  #browse{
    top:-100px;
  }
  #legal{
    left:140px;
  }
  .legal  li{
    left:-210px;
  }
  #connect{
    top:-130px;
    left:240px;
  }
  .codidex-mobile{
    display: flex;
    width: 60vw;
    position: relative;
    top: 30px;
    left: -90px;
    }
  .codidex-logo-mobile{
    width: 40%;
    height: 100%;
    position: relative;
    top: -40px;
    left: -50px;
    margin:auto auto;
  }
  .cpr{
    left:-120px;
  }
}
@media (max-width: 470px) and (min-width: 450px) {
  .container{
    width: 100.5vw !important;
    height: 45vh;
  }
  .con{
    left:-25px;
  }
 
  #browse{
    top:-100px;
  }
  #legal{
    top:-110px;
    left:140px;
  }
  .legal  li{
    
    left:-200px;
  }
  #connect{
    top:-100px;
    left:240px;
  }
  .cpr{
    top:30px;
    left:-120px;
  }
  .codidex-mobile{
    display: flex;
    width: 60vw;
    position: relative;
    top: 30px;
    left: -90px;
    }
  .codidex-logo-mobile{
    width: 50%;
    height: 100%;
    position: relative;
    top: -40px;
    left: -30px;
    margin:auto auto;
  }
}
/* from here */
@media (max-width: 450px) and (min-width: 426px) {
  .container{
 
    height: 47vh !important;
  }
  #browse{
    top:-100px;
    left:280px;
  }
  #legal{
    top:-130px;
    left:120px;
  }
  .legal  li{
    left:-190px;
  }
  #connect{
    top:-120px;
    left:220px;
  }
  .cpr{
    top:40px;
    left:-120px;
  }
  .codidex-mobile{
    display: flex;
    width: 60vw;
    position: relative;
    top: 50px;
    left: -90px;
    }
  .codidex-logo-mobile{
    width: 50%;
    height: 100%;
    position: relative;
    top: -40px;
    left: -20px;
    margin:auto auto;
  }
}

  
/* container adjustments */
@media screen and (max-width: 450px) and (min-width: 427px) {
  .container {
    width: 101vw !important;
    height: 40vh;
  }
}
@media screen and (max-width: 426px) and (min-width: 415px) {
  .container {
    width: 100vw !important;
    height: 46vh !important;
  }
}
@media screen and (max-width: 415px) and (min-width: 400px) {
  .container {
    width: 101vw !important;
    height: 47vh !important;
  }
}
@media screen and (max-width: 426px) and (min-width: 400px) {
  .column a {
    text-decoration: none;
    color: white;
    font-size: 12px;
  }
  ul {
    list-style: none;
  }
  li {
    margin-bottom: 10px;
  }
  #about {
    position: relative;
    left: 20px;
    top:30px;
    width: 30%;
  }
  .codidex, .codidex-logo{
    display: none;
       }
       .codidex-mobile{
        display: flex;
        width: 60vw;
        position: relative;
        top: 50px;
        left: -90px;
        }
      .codidex-logo-mobile{
        width: 50%;
        height: 100%;
        position: relative;
        top: -35px;
        left: -15px;
        margin:auto auto;
      }
  .footer-desc{
    width: 250px;

    font-size: 10px;
  }
  #browse {
    /* margin-left: -45px; */
    position: relative;
    left: 280px;
    top: -100px;
    /* width: 30%; */
    /* margin:0; */
  }
  #legal {
    position: relative;
    /* width: 60%; */

    left: 130px;
    top: -150px;
  }
  .legal{
    /* width: 65%; */
  }
  .legal  li{
 
    position: relative;
    top: 60px;
    left: -185px;
  }
   #legal ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px;
   }
   #connect {
    position: relative;
    margin-top: 30px;
 width: 25%;
    top: -120px;
    left: 220px;
    padding: 0px;
    
    height: 10vh;
  }
  .con {
    position: relative;
    left: -35px;
  }
  .column .icons {
    display: flex;
   
    gap: 20px;
    position: relative;
    top:20px;
    left: -6rem;
    width: 25%;
  }
  .column .icons img {
    width: 20px;
    height: 20px;
  }
  .cpr {
    color: white;
    position: relative;
    left: -115px;
   top: 20px;
    font-size:12px;
    width: 100vw;
  }
}
@media screen and (max-width: 400px) and (min-width: 390px) {
  .container{
    width: 101vw !important;
  }
}
@media screen and (max-width: 390px) and (min-width: 380px) {
  .container{
    width: 100vw !important;
  }
}
@media screen and (max-width: 400px) and (min-width: 380px) {
  .column a {
    text-decoration: none;
    color: white;
    font-size: 12px;
  }
  ul {
    list-style: none;
  }
  li {
    margin-bottom: 10px;
  }
  #about {
    position: relative;
    left: 20px;
    top:30px;
    width: 30%;
  }
  .codidex, .codidex-logo{
    display: none;
       }
       .codidex-mobile{
        display: flex;
        width: 60vw;
        position: relative;
        top: 40px;
        left: -90px;
        }
      .codidex-logo-mobile{
        width: 50%;
        height: 100%;
        position: relative;
        top: -35px;
        left: -10px;
        margin:auto auto;
      }
  .footer-desc{
    width: 200px;

    font-size: 10px;
  }
  #browse {
    /* margin-left: -45px; */
    position: relative;
    left: 240px;
    top: -100px;
    /* width: 30%; */
    /* margin:0; */
  }
  #legal {
    position: relative;
    /* width: 60%; */

    left: 110px;
    top: -120px;
  }
  .legal{
    /* width: 65%; */
  }
  .legal  li{
 
    position: relative;
    top: 60px;
    left: -170px;
  }
   #legal ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px;
   }
   #connect {
    position: relative;
    margin-top: 30px;
 width: 25%;
    top: -100px;
    left: 190px;
    padding: 0px;
    
    height: 10vh;
  }
  .con {
    position: relative;
    left: -25px;
  }
  .column .icons {
    display: flex;
   
    gap: 20px;
    position: relative;
    top:20px;
    left: -6rem;
    width: 25%;
  }
  .column .icons img {
    width: 20px;
    height: 20px;
  }
  .cpr {
    color: white;
    position: relative;
    left: -115px;
   top: 20px;
    font-size:12px;
    width: 100vw;
  }
}
@media (max-width: 1024px) {
  .container {
    width: 138.5vw;
  }
}
/* @media (max-width: 391px) and (min-width: 385px) {
  #connect {
    position: relative;
    left: 80px;
  }
} */
@media screen and (max-width: 380px) and (min-width: 350px) {
  .container {
    width: 100.5vw !important;
    padding-bottom: 100px;
  }
  .column a {
    text-decoration: none;
    color: white;
    font-size: 12px;
  }
  ul {
    list-style: none;
  }
  li {
    margin-bottom: 10px;
  }
  #about {
    position: relative;
    left: 20px;
    top:30px;
    width: 30%;
  }
  .codidex, .codidex-logo{
display: none;
   }
   .codidex-mobile{
    display: flex;
    width: 60vw;
    position: relative;
    top: 50px;
    left: -90px;
    }
  .codidex-logo-mobile{
    width: 50%;
    height: 100%;
    position: relative;
    top: -35px;
    left: -15px;
    margin:auto auto;
  }
  .footer-desc{
    width: 200px;

    font-size: 10px;
  }
  #browse {
    /* margin-left: -45px; */
    position: relative;
    left: 240px;
    top: -100px;
    /* width: 30%; */
    /* margin:0; */
  }
  #legal {
    position: relative;
    /* width: 60%; */

    left: 110px;
    top: -120px;
  }
  .legal{
    /* width: 65%; */
  }
  .legal  li{
 
    position: relative;
    top: 60px;
    left: -170px;
  }
   #legal ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px;
   }
   #connect {
    position: relative;
    margin-top: 30px;
 width: 25%;
    top: -100px;
    left: 190px;
    padding: 0px;
    
    height: 10vh;
  }
  .con {
    position: relative;
    left: -25px;
  }
  .column .icons {
    display: flex;
   
    gap: 20px;
    position: relative;
    top:20px;
    left: -6rem;
    width: 25%;
  }
  .column .icons img {
    width: 20px;
    height: 20px;
  }
  .cpr {
    color: white;
    position: relative;
    left: -115px;
   top: 20px;
    font-size:12px;
    width: 100vw;
  }
}

@media screen and (max-width: 350px) {
  .container {
    width: 100.5vw !important;
    padding-bottom: 100px;
  }
  .column a {
    text-decoration: none;
    color: white;
    font-size: 12px;
  }
  ul {
    list-style: none;
  }
  li {
    margin-bottom: 10px;
  }
  #about {
    position: relative;
    left: 20px;
    top:30px;
    width: 30%;
  }
  .codidex, .codidex-logo{
    display: none;
       }
       .codidex-mobile{
        display: flex;
        width: 60vw;
        position: relative;
        top: 50px;
        left: -90px;
        }
      .codidex-logo-mobile{
        width: 50%;
        height: 100%;
        position: relative;
        top: -30px;
        left: -10px;
        margin:auto auto;
      }
  .footer-desc{
    width: 150px;

    font-size: 10px;
  }
  #browse {
    /* margin-left: -45px; */
    position: relative;
    left: 190px;
    top: -110px;
    /* width: 30%; */
    /* margin:0; */
  }
  #legal {
    position: relative;
    /* width: 60%; */

    left: 100px;
    top: -120px;
  }
  .legal{
    /* width: 65%; */
  }
  .legal  li{
 
    position: relative;
    top: 60px;
    left: -145px;
  }
   #legal ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px;
   }
   #connect {
    position: relative;
    margin-top: 30px;
 width: 25%;
    top: -100px;
    left: 170px;
    padding: 0px;
    
    height: 10vh;
  }
  .con {
    position: relative;
    left: -35px;
  }
  .column .icons {
    display: flex;
   
    gap: 20px;
    position: relative;
    top:20px;
    left: -6rem;
    width: 25%;
  }
  .column .icons img {
    width: 20px;
    height: 20px;
  }
  .cpr {
    color: white;
    position: relative;
    left: -115px;
   top: 20px;
    font-size:12px;
    width: 100vw;
  }
}
@media screen and (max-width: 320px) and (min-width:290px) {
  
       .codidex-mobile{
        display: flex;
        width: 70vw;
        position: relative;
        top: 50px;
        left: -90px;
        }
      .codidex-logo-mobile{
        width: 50%;
        height: 100%;
        position: relative;
        top: -30px;
        left: -10px;
        margin:auto auto;
      }
      #connect{
        left:150px;
      }
      #legal{
        left:85px;
      }
      .cpr{
        left:-120px;
      }
    }
@media screen and (max-width:290px){
  .container{
    width:101vw !important;
  }
  #browse{
    left:150px !important;
  }
  .codidex, .codidex-logo{
    display: none;
       }
       .codidex-mobile{
        display: flex;
        width: 70vw;
        position: relative;
        top: 50px;
        left: -90px;
        }
      .codidex-logo-mobile{
        width: 50%;
        height: 100%;
        position: relative;
        top: -30px;
        left: -10px;
        margin:auto auto;
      }
}