.container{
   display: grid;
   grid-template-rows: 1fr auto auto;
   gap: 10px;
   grid-template-areas: 
   "introduction"
   "content"
   "link";
   justify-content: center;
   padding: 20px;
 }
 .intro{
   grid-area: introduction;
   display: flex;
   flex-direction: column;
   text-align: center;
   gap: 20px;
 }
 .content{
   grid-area: content;
   display: grid;
   grid-template-columns: 1fr 3fr;
   grid-template-rows: repeat(3, 1fr);
   text-align: center;
   grid-gap: 20px;
 }
 .carousel_container {
   display: flex;
   position: relative;
   justify-content: center;
   align-items: center;
   width: 62vw;
   height: 40vh;
   margin:0 auto;
  
 }
 
 .goals_objectives> p, .trials_tribulations > p{
   padding: 20px;
 }
 
 input[type="radio"] {
   display: none;
 }
 
 .slide_wrapper{
   position: relative;
   margin: 0 auto;
   padding: 0;
   width: 40.25vw;
   height: 35vh;
   border-radius: 20px;
   box-shadow: 2px 2px 2px 2px #3e4465;
   overflow: hidden;
  
 }
 
 #slide-role {
   background: inherit;
   position: absolute;
   top: 0;
   left: 0;
   width: 400%;
   height: 100%;
   z-index: -1;
   transition: left 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
   display: flex;
   animation: slideAnimation 25s ;
   
 }
 
 .slide {
   width: 50%;
   height: 100%;
   background-size: cover;
   background-position: center;
 }
 
 .slide_1 {
   background-image: url("../../../assets/project_assets/block_8/KhoiKhronicles_Title.png");
   background-size: cover;
 }
 
 .slide_2 {
   background-image: url("../../../assets/project_assets/block_8/KhoiKhroniclse_Gameplay.png");
   background-size: cover;
 }
 
 .slide_3 {
   background-image: url("../../../assets/project_assets/block_8/KhoiKhronicles_Ascii.png");
   background-size: cover;
 }
 
 .slide_4 {
   background-image: url("../../../assets/project_assets/block_8/under_development.jpg");
   background-size: cover;
 }
 
 .btn,
 .btn::after {
   border-radius: 50%;
   transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
 }
 
 .btn {
   border: 1px solid black;
   background: white;
   box-shadow: 0px 2px 2px black;
   position: absolute;
   bottom: 2%;
   width: 20px;
   height: 20px;
   cursor: pointer;
   transform: scale(1.1);
   z-index: 2;
 }
 
 .btn:nth-of-type(1) {
   left: 38%;
 }
 
 .btn:nth-of-type(2) {
   left: 45%;
 }
 
 .btn:nth-of-type(3) {
   left: 52%;
 }
 
 .btn:nth-of-type(4) {
   left: 59%;
 }
 
 .btn:hover {
   transform: scale(1.4);
 }
 
 .btn::after {
   content: "";
   display: inline-block;
   border: 1px solid white;
   background: #3e4465;
   width: 18px;
   height: 18px;
   transform: scale(0.5, 0.5);
   box-shadow: 0px 1px 5px black;
 }
 
 input[type="radio"]:checked#slide_2_trigger
   ~ div.slide_wrapper
   > div#slide-role {
   left: -100%;
 }
 
 input[type="radio"]:checked#slide_3_trigger
   ~ div.slide_wrapper
   > div#slide-role {
   left: -200%;
 }
 
 input[type="radio"]:checked#slide_4_trigger
   ~ div.slide_wrapper
   > div#slide-role {
   left: -300%;
 }
 
 input[type="radio"]:checked + label.btn {
   transform: scale(1.1);
   border: 1px solid black;
 }
 
 input[type="radio"]:checked + label.btn::after {
   transform: scale(1.1, 1.1);
   background: #8c9dbc;
 }
 hr {
   border-color: var(--background);
   border-width: 2px;
   width: 20%;
 }
 .skills{
   text-align: left;
 }
 .scope{
   background:  var(--background);
   padding: 20px;
 }
 .scope p{
   color: white;
 }
 p{
   text-align: justify;
 }
 .skills{
   background: gray;
   display: flex;
   align-items: center;
   gap: 10px;
 }
 @media (max-width: 425px){
   .content{
     display: flex;
     flex-direction: column;
   }
 }
 
 .s_name,
 .first,
 .second {
   display: flex;
   height: 3vh;
   align-items: center;
   justify-content: center;
 }
 .circular_sb {
   width: auto;
   border: 5px solid black;
   padding: 4px 4px;
   margin: 0 auto;
   border-radius: 50%;
   text-align: center;
   position: absolute;
   top: -450%;
   left: 50%;
   transform: translateX(-50%);
   z-index: 54;
 }
 
 .circular_sb:before {
   content: "";
   width: 0px;
   height: 0px;
   position: absolute;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-top: 10px solid black;
   border-bottom: 10px solid transparent;
   right: 40%;
   bottom: -20px;
 }
 
 .circular_sb:after {
   content: "";
   width: 0px;
   height: 0px;
   position: absolute;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-top: 10px solid #fff;
   border-bottom: 10px solid transparent;
   right: 40%;
   bottom: -18px;
 }
 
 .circular {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: 40px;
   z-index: 54;
 }
 
 .circular .prog {
   position: relative;
   width: 75px;
   height: 75px;
   border-radius: 50%;
   color: white;
   background: black linear-gradient(to right, transparent 50%, var(--clr) 0);
 }
 
 .circular .prog h4 {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 2.6vh;
   z-index: 56;
   font-weight: 400;
 }
 
 .circular .prog h4 span {
   font-size: 1vw;
   font-weight: 400;
 }
 .circular .prog h5 {
   position: absolute;
   top: 25%;
   left: 50%;
   transform: translateX(-50%);
   z-index: 56;
   font-weight: 400;
   color: var(--clr);
   text-transform: uppercase;
 }
 
 .circular .prog::before {
   content: "";
   display: block;
   height: 100%;
   margin-left: 50%;
   transform-origin: left;
   border-radius: 0 100% 100% 0/50%;
 }
 
 .circular .prog::after {
   content: "";
   position: absolute;
   inset: 10px;
   border-radius: 50%;
   background: black;
 }
 
 .circular .prog::before {
   background: var(--clr);
   transform: rotate(calc(((var(--i) -50) * 0.01turn)));
 }
 
 .circular .prog .less::before {
   background: var(--clr);
   transform: rotate(calc(((var(--i) -100) * 0.01turn)));
 }
 
 .s_name {
   border-right: 2px solid #3e4465;
 }
 
 .first,
 .second {
   border-left: 2px solid #3e4465;
   border-right: 2px solid #3e4465;
   background-color: #8c9dbc;
   width: 70px;
   position: relative;
 }
 
 .first .circular_sb,
 .second .circular_sb {
   z-index: 54;
 }
 .second {
   background-color: #a4779a;
 }
 .first .circular_sb,
 .second .circular_sb {
   display: none;
   opacity: 0;
   transform: translateY(-5px) translateX(-50px);
   transition: opacity 0.3s, transform 0.3s;
 }
 @keyframes popUp {
   0% {
     display: block;
     opacity: 0;
     transform: translateY(0) translateX(-50px);
   }
   100% {
     opacity: 1;
     transform: translateY(-5px) translateX(-50px);
   }
 }
 
 .first:hover .circular_sb,
 .second:hover .circular_sb {
   display: block;
   animation: popUp 0.75s forwards;
 }
 .link_to_project{
   grid-area: link;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 10px 0 20px 0;
 }
 .project_link {
   margin-top: 10px;
   padding: 0.6em 2em;
   border: none;
   outline: solid black;
   color: black;
   background: white;
   cursor: pointer;
   position: relative;
   z-index: 0;
   border-radius: 10px;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
   text-transform: uppercase;
   font-size: 2vh;
   width: 50vw;
 }
 
 .project_link:before {
   content: "";
   background: linear-gradient(
     45deg,
     #3e4465,
     #6c3b5e,
     #8c9dbc,
     #a4779a,
     #3e4465,
     #8c9dbc,
     #6c3b5e,
     #a4779a,
     #a4779a
   );
   position: absolute;
   top: -2px;
   left: -2px;
   background-size: 400%;
   z-index: -1;
   filter: blur(5px);
   -webkit-filter: blur(5px);
   width: calc(100% + 8px);
   height: calc(100% + 8px);
   animation: project_link 20s linear infinite;
   transition: opacity 0.3s ease-in-out;
   border-radius: 10px;
 }
 
 @keyframes project_link {
   0% {
     background-position: 0 0;
   }
   50% {
     background-position: 400% 0;
   }
   100% {
     background-position: 0 0;
   }
 }
 
 .project_link:after {
   z-index: -1;
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   background: white;
   left: 0;
   top: 0;
   border-radius: 10px;
 }
 
 .note{
 
 text-transform: uppercase;
 }
 @media only screen and (min-width: 360px) and (max-width: 539px) {.slide_wrapper {
   width: 85%;
   height: 100%;
 }
 .btn:nth-of-type(1) {
   left: 97%;
   bottom: 60%;
 }
 .btn:nth-of-type(2) {
   left: 97%;
   bottom: 50%;
 }
 .btn:nth-of-type(3) {
   left: 97%;
   bottom: 40%;
 }
 .btn:nth-of-type(4) {
   left: 97%;
   bottom: 30%;
 }
 .slide_1 {
   background-image: url("../../../assets/project_assets/block_8/KhoiKhronicles_Ascii_Mobile.png");
   background-size: cover;
 }
 
 .slide_2 {
   background-image: url("../../../assets/project_assets/block_8/KhoiKhroniclse_Gameplay_Tablet.png");
   background-size: cover;
 }
 
 .slide_3 {
   background-image: url("../../../assets/project_assets/block_8/KhoiKhronicles_Ascii.png");
   background-size: cover;
 }
 
 .slide_4 {
   background-image: url("../../../assets/project_assets/block_8/under_development.jpg");
   background-size: cover;
 }}
 
 @media only screen and (min-width: 280px) and (max-width: 359px) {
   .slide_wrapper{
     width: 85%;
     height: 100%;
   }
   .btn:nth-of-type(1) {
     left: 97%;
     bottom: 60%;
   }
   .btn:nth-of-type(2) {
     left: 97%;
     bottom: 50%;
   }
   .btn:nth-of-type(3) {
     left: 97%;
     bottom: 40%;
   }
   .btn:nth-of-type(4) {
     left: 97%;
     bottom: 30%;
   }
   .slide_1 {
      background-image: url("../../../assets/project_assets/block_8/KhoiKhronicles_Ascii_Mobile.png");
      background-size: cover;
    }
    
    .slide_2 {
      background-image: url("../../../assets/project_assets/block_8/KhoiKhroniclse_Gameplay_Mobile.png");
      background-size: cover;
    }
    
    .slide_3 {
      background-image: url("../../../assets/project_assets/block_8/KhoiKhronicles_Ascii.png");
      background-size: cover;
    }
    
    .slide_4 {
      background-image: url("../../../assets/project_assets/block_8/under_development.jpg");
      background-size: cover;
    }}
   @media only screen and (min-width: 540px) and (max-width: 912px) {
     .slide_wrapper {
       width: 85%;
       height: 100%;
     }
     .btn:nth-of-type(1) {
       left: 95%;
       bottom: 60%;
     }
     .btn:nth-of-type(2) {
       left: 95%;
       bottom: 50%;
     }
     .btn:nth-of-type(3) {
       left: 95%;
       bottom: 40%;
     }
     .btn:nth-of-type(4) {
       left: 95%;
       bottom: 30%;
     }
     .slide_1 {
      background-image: url("../../../assets/project_assets/block_8/KhoiKhronicles_Ascii_Mobile.png");
      background-size: cover;
    }
    
    .slide_2 {
      background-image: url("../../../assets/project_assets/block_8/KhoiKhroniclse_Gameplay_Tablet.png");
      background-size: cover;
    }
    
    .slide_3 {
      background-image: url("../../../assets/project_assets/block_8/KhoiKhronicles_Ascii.png");
      background-size: cover;
    }
    
    .slide_4 {
      background-image: url("../../../assets/project_assets/block_8/under_development.jpg");
      background-size: cover;
    }}