style.css

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

*{
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     /* outline: 1px solid red; */
}
body{
     display: flex;
     background: white;
     color: white;
     /* height:100vh; */
     flex-direction: column;
     font-family: 'Raleway', sans-serif;
     
}
body::-webkit-scrollbar {
     width: 0.5em;
   }
    
   body::-webkit-scrollbar-track {
     box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   }
    
   body::-webkit-scrollbar-thumb {
     background-color: #17a;
     outline: 1px solid #17a;;
   }
.container{
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
}

.slider-images{
     overflow: hidden;
     /* transition: transform ease-in-out; */
}
.image-container{
     display: flex;
     transition: transform ease-in-out;
 }

.image img{
     max-width: 100%;
     margin-bottom: 20px;
}

.main{
     width: 100%;
}

h2{
     margin-bottom: 20px;
     color: #2d3250;
     text-align: center;
     font-size: 30px;
     font-weight: 700;
}

.container ul{
     display: flex;
     flex-direction: column;
     /* padding: 5px; */
}
.container ul li{
     padding: 5px 10px;
     text-decoration: none;
     list-style-type: none;
}
li a {
     color: white;
     display: flex;
     width: 100%;
     margin-bottom: 5px;
     padding: 20px;
     background-color: #2d3250;
     text-decoration: none;
     font-size: 20px;
     outline: none;
     border-radius: 5px;
}

li a:hover{
     /* background-color: #424769; */
     background-color: #17a;
}

/* 
li a:hover {
     background: #676fgd;
     background: #fgb17a;
     color: red;
} */

@media only screen and (min-width: 640px){
     body{
          overflow: hidden;
     }
     .container{
          display: flex;
          flex-direction: row-reverse;
     }
     .slider-images{
          overflow: hidden;
          height: 100vh;
          width: 100%;
     }
     .main{
          width: 40%;
          padding-left: 50px;
          background-color: #2d3250;
          overflow-y: scroll;
          height: 100vh;
          padding-bottom: 10px;
     }
     .main::-webkit-scrollbar {
          width: 0.5em;
        }
         
        .main::-webkit-scrollbar-track {
          box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        }
         
        .main::-webkit-scrollbar-thumb {
          background-color: #17a;
          outline: 1px solid #17a;;
        }

     .image{
          /* width: 60%; */
          margin: 0;
          
     }
     .container{
          width: 100%;
          height: 100vh;
          margin: 0;
     }
     .image img{
          min-width: 100%;
          margin-bottom: -3px;
          height: 100vh;
     }

     li a {
          color: white;
          display: flex;
          width: 63%;
          margin-bottom: 2px;
          padding: 10px 15px;
          background-color: #17a;
          outline: none;
          font-size: 15px;
     }
     li a:hover{
          background-color: #f5e5c5;
          color: #2d3250
     }
     
     h2{
          text-align: left;
          padding-left: 10px;
          color: white;
          margin-top: 70px;
     }
     
}

	@media (min-width: 640px)  {  };
     @media (min-width: 768px)  {  };
	@media (min-width: 1024px) {  };
	@media (min-width: 1280px) {  };
	@media (min-width: 1536px) {  };