html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}
    /* //////////////// */

body {
    background-image: url(./img/bg.JPG);
    margin: 0px;
    cursor: crosshair;

}


.header{
    background-image: linear-gradient(#1c1616, #2d2424 );
    padding: 7px;
    height: 170px;
    margin-top: 1px;
    margin-bottom:18px;
    border-bottom: solid 6px #ff9900;

}


.glitch {
    position: relative;
    color: white;
    font-size: 4em;
    /* Animation provies a slight random skew. Check bottom of doc
    for more information on how to random skew. */
    animation: glitch-skew 1s infinite linear alternate-reverse;

    &::before{
        left: 2px;
        text-shadow: -2px 0 #ff00c1;
        /* Creates an initial clip for our glitch. This works in
        a typical top,right,bottom,left fashion and creates a mask
        to only show a certain part of the glitch at a time. */
        clip: rect(44px, 450px, 56px, 0);
        /* Runs our glitch-anim defined below to run in a 5s loop, infinitely,
        with an alternating animation to keep things fresh. */
        animation: glitch-anim 5s infinite linear alternate-reverse;
    }

    @include glitchCopy;
    left: -2px;
    text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
    animation: glitch-anim2 1s infinite linear alternate-reverse;
/* } */
}

/* Creates an animation with 20 steaps. For each step, it calculates 
a percentage for the specific step. It then generates a random clip
box to be used for the random glitch effect. Also adds a very subtle
skew to change the 'thickness' of the glitch.*/
@keyframes glitch-anim {
    $steps: 20;
    @for $i from 0 through $steps {
        #{percentage($i*(1/$steps))} {
            clip: rect(random(100)+px, 9999px, random(100)+px, 0);
            transform: skew((random(100) / 100) + deg);
        }
    }
}

@keyframes glitch-anim2 {
    $steps: 20;
    @for $i from 0 through $steps {
        #{percentage($i*(1/$steps))} {
            clip: rect(random(100)+px, 9999px, random(100)+px, 0);
            transform: skew((random(100) / 100) + deg);
        }
    }
}

@keyframes glitch-skew {
    $steps: 10;
    @for $i from 0 through $steps {
        #{percentage($i*(1/$steps))} {
            transform: skew((random(10) - 5) + deg);
        }
    }
}








h1{
    font-size: 60px;
    color: white;
    font-family: 'Audiowide', cursive;
    text-shadow: 3px 3px #7c7e7c;
    text-align: center;

}

.boxcontainer {   
    margin: 0 auto;
    margin-top: -18px;
    height:245px;
    width: 100%;
    background-color: rgb(153, 150, 150);
    position: relative;
    padding: 10px;
    white-space: nowrap;
    overflow: auto hidden;
    text-align: center;
}

/* search bar and button color */

.input-group-rounded .input-group-field {
    border-radius: 5000px 0 0 5000px;
    padding-left: 1rem;
    margin-top: 10px;
    margin-right: -30;
    float: right;
    height: 25px;

}
 
 .input-group-rounded .input-group-button .button {
    border-radius: 0 5000px 5000px 0;
    font-size: 0.8rem;
    background-color: #ff9900;
    color: #ffffff;
    margin-top: 10px;
    margin-right: -30;
    height: 25px;
    width: 100%;
    font-family: 'Audiowide', cursive;
}


.boxdescription{
    margin: 0 auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-top: 15px;
    background-color: #e7e7e7;
    height:350px;
    max-width: 85%;
    padding: 5px;
}


.footer {
    color: #ffffff;
    height: 75px;
    margin-bottom: -30px;
    background-image: linear-gradient(#1c1616, #2d2424 );
    background-color: #363636;
    border-top: solid 8px #ff9900;
    text-align: center;
    padding: 6px;
}

.woodimg {
    width: 100%;
    height: 70px;
    border: 2px;
    border-color: #1c1616;

}

#my-info {

    background-image: linear-gradient(#615b5b, #c2c2c2 );

}
.image{
    width: 150px;
    height: 150px;
    padding: 10px;
}

span{
    display: inline-block;
    width: 150px;
    height: auto;
    white-space: normal;
    margin: 10px;
}
.screenshots, .videos{
    overflow: auto;
    white-space: nowrap;
}
/*Used to hide scrollbars
/* .videos::-webkit-scrollbar { 
    display: none; 
} 
.screenshots::-webkit-scrollbar { 
    display: none; 
} 
.boxcontainer::-webkit-scrollbar { 
    display: none; 
}  */
h2{
    float: left;
    white-space: normal;
    width: 6em;
}
iframe{
    width: 75vw;
    height: 37vw;
}