/* #headerOne {
    background-image: linear-gradient(to bottom right, rgb(48, 18, 218), rgb(27, 130, 199));
} */

#urlLayout {
    background: linear-gradient(90deg, rgb(158, 50, 230) 0%, rgb(238, 99, 99) 50%, rgb(233, 161, 60) 100%);
}

.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(6, 56, 122, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
    border-color: rgb(6, 56, 122);
}

#headerOne h3 {
    color: white;
}

.borderForMedia {
    background: rgb(78, 72, 82);
    border-radius: 8px;
}

.borderWhite {
    border: 2px solid white;
    border-radius: 5px;
}

.wrapper {
    position: relative;
}

.play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
}


.how-to-use-title{
    font-family: 'Nunito', sans-serif;
    text-align: center;
}

.how-to-use-steps{
    font-family: 'Nunito', sans-serif;
    text-align: start;
}

.col-md-8 p{
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    font-size: large;
}

.more-tools-styles{
    color: #0275d8; 
    font-weight: bold;
}

.more-tools-styles:active{
    font-weight: bold;
    color: white;
}

.more-tools-styles:hover{
    color: #ffffff; 
    background-color: #0275d8;
}

.navbar-light .navbar-nav .nav-link{
    color: #0275d8;
    font-weight: bold;
}

.navbar-light .navbar-nav .nav-link:hover{
    color: #083f70;
    font-weight: bold;
}

/* for testing */

.borderBlack {
    border: 2px solid black;
}

.borderBlue {
    border: 2px solid blue;
}

/* for testing */