/* width */

::-webkit-scrollbar {

  width: 10px;

}



/* Track */

::-webkit-scrollbar-track {

  background: #313131; 

}

 

/* Handle */

::-webkit-scrollbar-thumb {

  background: #5d5d5d; 

}



/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

  background: #555; 

}



html {

    box-sizing: border-box;

}



img {

    -webkit-user-drag: none;

    user-drag: none;

  }



body {

    background-color: #000814;

    color: #fff;

}



.title {

    color: #FFC300;

    font-weight: bold;

}



.title-size {

    font-size: 45px;

    margin-top: -5%;

    margin-left: 5%;

}



.sub-title {

    margin-top: -3%;

    margin-left: 30%;

}



.btn-start {

    background-color: #FFD60A;

    border-radius: 15px;

    padding: 8px 30px;

    text-decoration: none;

    color: #000;

    margin-left: 25%;

    transition: 0.5s;

    &:hover {

        transition: 0.5s;

        box-shadow: #FFD60A 2px 2px 20px;

    }

}



.img-title {

    border-radius: 15px;

    box-shadow: #696969 8px 8px 30px;

    transition: 0.5s;

    &:hover {

        transition: 0.5s;

        width: 520px;

        height: 320px;

    }

}



.section2 {

    margin-top: 8%;

}



.img2 {

    border-radius: 15px;

    box-shadow: #696969 -5px -5px 20px;

}



.title-section2 {

    text-align: center;

    margin-top: -3%;

    margin-bottom: 3%;

}



.line {

    /* border: 2px solid #FFC300; */

    display: flex;

    justify-content: center;

    align-items: center;

    margin: auto;

    margin-top: -3%;

    margin-bottom: 2%;

    /* margin-left: 40%;

    margin-top: -2.5%;

    margin-bottom: 4%; */

}



.line hr {

    width: 200px;

}



.vertical-line {

    border: 2px solid rgb(77, 77, 77);

    height: 300px;

    width: 1px;

    margin-left: 15%;



}



.s2-title {

    color: #fff;

    font-weight: bold;

    font-size: 25px;

}



.s2-subtitle {

    color: #FFD60A;

    margin-top: -4%;

    margin-left: 3%;

}



.icons {

    margin: auto;

    margin-top: 4%;

}



.card {

    margin-left: 1%;

}



footer {

    margin-top: 2%;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

}



footer p, a {

    text-align: center;

    font-weight: bold;

    text-decoration: none;

}



footer a {

    margin-top: -1%;

    color: #fff;

}



.account {

    display: flex;

}



.user-icon {

    margin-right: 10%;

}



#name {

    margin-top: 10%;

    text-decoration: none;

    color: #fff;

    transition-duration: 1s;

    &:hover {

        transition-duration: 1s;

        color: #FFD60A;

        text-decoration: underline;

    }

}



.site-logo {

    margin-right: 5%;

}



.options-name {

    display: none;

    width: 150px;

    background-color: #00112b;

    border-radius: 10px;

    text-align: center;

    position: absolute;

    margin-top: 3.5%;

    margin-left: -1%;

}



.logOut {

    color: red;

    cursor: pointer;

    border-radius: 10px 10px 0px 0px;

    transition-duration: 0.5s;

    &:hover {

        transition-duration: 0.5s;

        background-color: #012254;

    }

}