@font-face {
    font-family: myFirstFont;
    src: url(VarelaRound-Regular.ttf);
  }

h2{
  margin-bottom: 5px;
}

body{

    height: 100vh;
    background-color: rgb(23, 34, 85);  

    
}

#title{
    width: fit-content;
    
    color: chartreuse;
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.247);
    
    font-family: myFirstFont;
    margin: auto;
     
    /* margin-left: 5vw; */
}
#options{
  justify-self: center;
   
  /* height: 100%; */
   padding-left: 8%;
   padding-bottom: 10%;
  background-color: rgb(165, 196, 236);
  border-radius: 5px;
}
#info{
  width: fit-content;
  /* margin-right: 20%; */

  
  color: rgb(255, 255, 255);
  text-shadow: 0 0 30px rgba(0, 0, 0, 0.247);
  
  font-size: 18px;
  margin: auto;
  font-family: myFirstFont;
  /* margin-left: 5vw; */
  /* font-family: Verdana, Geneva, Tahoma, sans-serif */
}
.infram{
    /* margin: 4% 4% 4% 4%; */
    height: 80%;
    width: 80%;
      margin-top: 10%;
      margin-left: 10%;
    border: solid rgb(0, 0, 0) 2px;
   display: flex;

     
}

#containddder2{
  align-self: center;
  height: 300px;
  width: 500px;
  border: 2px solid greenyellow
}

.box3{
  border: 1px solid brown;
  background-color: #fff;
}
.frame{
   
    box-shadow:rgba(5, 5, 5, 0.397) 0px 0px 50px ;
    border-radius: 2%;
/* margin-top: 10vh; */
/* margin: auto; */
/* margin-bottom:10vh; */
/* margin-left: 20%; */

padding: 5%;
   
    height: 90%;
    width: 100%;
    background-image: url('image.jpg');
    background-size: 100% 100%;
 
}

.img1{
    width: 17%;
    height: 17%;
}
.img2{
    width: 17%;
    height: 17%;
}
.img3{
    width: 17%;
    height: 17%;
}
.container {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .box {
    width: 45%;
     /* Adjust the width as per your preference */
    margin: 20px;
     
    
    /* box-sizing: border-box; */
  }
  #box2 {
    
     /* Adjust the width as per your preference */
    margin: 20px;
     height: 80%;
    
    /* box-sizing: border-box; */
  }
  @media (max-width: 768px) {
    .box {
        margin-bottom: 2px;
        margin: 50px;
      width: 100%; /* Set full width on smaller screens */
    }
  }