/* width */

::-webkit-scrollbar {

    width: 10px;

  }

  

  /* Track */

  ::-webkit-scrollbar-track {

    background: #7C8594;

  }

  

  /* Handle */

  ::-webkit-scrollbar-thumb {

    background: #888;

  }

  

  /* Handle on hover */

  ::-webkit-scrollbar-thumb:hover {

    background: #555;

  }











/*header{

    display: flex;

    background-color: #15253F;

    margin:0;

    padding:75px;

    text-align: center;

    font-size:50px;

    color:#C3C3C3;

}



header b {

    margin-left: 30%;

    margin-top: 1%;

}



header img {

    margin-top: -2%;

}*/







html, body{

    background-color: #3e3e3e;

    color:white;

    margin: 0;

    padding:0;

    height: 100%;



}





/*.left {

    width: 15%;

    height: 163.7%;

    background-color: #7C8594;

}*/



.miocolor{

    background-color: #15253F;



}

.tuocolor{



    background-color: #1d3150;



}

footer{

    background-color:#4c4c4c ;

    margin-top: 4%;

    text-align: center;

}



#title {

    font-weight: bold;

    font-size: 30px;

  

}



#imgGame {

    margin-left: 55%;

    border-radius: 15px;

}



.contR2 {

    background-color: #5c5c5c;

   /* width: 100%;

    margin-top: 3.1%;*/

}



.title2 {

    text-align: center;

    font-size: 30px;

    font-weight: bold;

}



.content2 {

    text-align: center;

    font-size: 20px;

    font-weight: bold;

}



.vertical-line {

    width: 3px;              

    height: 70%;         

    background-color: #828282; 

    margin: 0 auto;          

}



/*.menu{

    color:white;

    text-decoration: none;

    &:hover {

        color: #3d3d3d;

    }

}*/



img {

    -webkit-user-drag: none;

}



.slider-wrapper {

    position: relative;

    max-width: 48rem;

    margin: 0 auto;

    box-shadow: 5px 10px 32px 3px #000;

}



.slider {

    display: flex;

    aspect-ratio: 16 / 9;

    overflow-x: hidden;

    scroll-snap-type: x mandatory;

    scroll-behavior: smooth;

    box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);

}



.slider img {

    flex: 1 0 100%;

    scroll-snap-align: start;

}



.slider-nav {

    display: flex;

    column-gap: 1rem;

    position: absolute;

    bottom: -2rem;

    left: 50%;

    transform: translateX(-50%);

    z-index: 1;

}



.slider-nav a {

    width: 0.8rem;

    height: 0.8rem;

    border-radius: 50%;

    background-color: #fff;

    opacity: 0.75;

    transition: opacity ease 250ms;

}



.slider-nav a:hover {

    opacity: 1;

}



.animated-text {

    font-size: 34px;

    font-weight: 600;

    min-width: 280px;

    text-align: center;

}



.animated-text span {

    position: relative;

    margin-left: 0.5%

}



.animated-text span::before {

    content: "Godot";

    color: #15253F;

    animation: words 20s infinite;

}



.animated-text span::after {

    content: "";

    position: absolute;

    width: calc(100% + 8px);

    height: 100%;

    background-color: #3E3E3E;

    border-left: 2px solid #3E3E3E;

    right: -8px;

    animation: cursor .8s infinite, typing 20s steps(14) infinite;

}



@keyframes cursor {

    to {

        border-left: 3px solid #15253F;

    }

}



@keyframes words {

    0%, 20% {

        content: "Godot";

    }

    21%, 40% {

        content: "Blender";

    }

    41%, 60% {

        content: "VsCode";

    }

    61%, 80% {

        content: "Blender";

    }

    81%, 100% {

        content: "Godot";

    }

}



@keyframes typing {

    10%,15%,30%,35%,50%,55%,70%,75%,90%,95% {

        width: 0;

    }

    5%,20%,25%,40%,45%,60%,65%,80%,85% {

        width: calc(100% + 8px);

    }

}