/* _content/Website/Pages/AugmentedReality.razor.rz.scp.css */


*[b-116ti7vbvm] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*
    star background 
*/
.background-photo[b-116ti7vbvm] {
    background-image: url(Photos/images/pexels-felix-mittermeier-956999.jpg);
    z-index: -1;
    height: 30%;
    width:100%;
    object-fit:cover;
}

/*
    basic h1 padding 
*/
p[b-116ti7vbvm] {
    padding-top: 20px;
    font-size: 180%;
}


/*
    used to align all photos in the center 
*/
main[b-116ti7vbvm] {
    text-align: center;
    color:ghostwhite;
}

h1[b-116ti7vbvm]{
    font-size: 330%;
    font-weight: bold; 
    text-align: center;
}

/*
    basic padding and spacing for project name titles
*/
h2[b-116ti7vbvm] {
    font-size: 100%;
    padding-top: 20px;
}
/*spacing for div classes */
.spacing[b-116ti7vbvm] {
    padding-top: 20px;
    padding-bottom: 10px;
}

/* same as aboce */
b[b-116ti7vbvm] {
    font-size: 290%;
    padding-bottom: 10px;
    
}


.img-container[b-116ti7vbvm] {
    max-width: 800px;
    margin: auto;
    align-content: space-evenly;

}



/*
    this is to format the text below so the text is inline with the images.
    This is the photo description text
*/
.texter[b-116ti7vbvm] {
    padding-top: 5px;
    max-width: 600px;
    margin: auto;
    text-align: justify;
    font-size: 160%;
}

/*
    Formatting the image size. We wont make it the width of the text
    since the photo was taken with an iphone and so the photo is slim.
    If we stretch it, the photo will look bad.
*/
.img-size[b-116ti7vbvm]{
    width:70%;
    max-height: 400px;
    object-fit: scale-down;

}



/* standard button used throughout the 
    program
*/
.crop-buttons[b-116ti7vbvm] {
    height: auto;
    max-width: 60px;
}

    .crop-buttons:hover[b-116ti7vbvm] {
        transform: scale(1.2);
    }


/* this is to just add some padding at the end of the razor page */
.dummy[b-116ti7vbvm]{
    opacity:0%;
    margin-top: 10px;
}

/*
    The below to selectors are used to format 
*/
video[b-116ti7vbvm] {
    width: 600px;
    height: 450px;
    border: solid;
    border-width: 6px;
    border-color: black;
}

@media(max-aspect-ratio: 16/9) {
    video[b-116ti7vbvm] {
        width: 100%;
        max-width: 600px;
        max-height: 450px;
        height: auto;
    }
}


@media(max-width:480px) {

    .img-container[b-116ti7vbvm] {
        max-width: 550px;
        margin: auto;
        align-content: space-evenly;
    }

    .img-size[b-116ti7vbvm] {
        width: 60%;
        max-height: 380px;
        object-fit: scale-down;
    }
}

@media(max-width: 320px) {

    .img-container[b-116ti7vbvm] {
        max-width: 500px;
        margin: auto;
        align-content: space-evenly;
    }

    .img-size[b-116ti7vbvm] {
        width: 60%;
        max-height: 320px;
        object-fit: scale-down;
    }
}

/* _content/Website/Pages/ComputerSystems.razor.rz.scp.css */
*[b-snk1kz6wbh] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}



/*
    This selector is used to center all text in 
    the middle of the screen. The idea behind this is
    to make the Razor page look like a resume
*/
main[b-snk1kz6wbh]{
   
    width:80%;
    margin:auto;
}

/*
    Basic H1 formatting
    Want Center Bold and slighlt larger text than h2
*/
h1[b-snk1kz6wbh]{
    font-size: 320%;
    font-weight: bold; 
    padding-top: 10px;

}

/*
    This is just padding  and bold formatting for H2 tags.
*/
h2[b-snk1kz6wbh]{
    margin-top: 30px;
    margin-bottom: 20px;
    font-weight: bold;
}

/*
    Padding for the p tags i want it to be different 
    from the padding amount for other tags 
*/
p[b-snk1kz6wbh] {
    margin-bottom: 15px;
    margin-top: 15px;
}

/*
    padding for UL tags 
*/
ul[b-snk1kz6wbh] {
    margin-bottom:10px;
    margin-left: 30px;
    margin-top:10px;

}

/*
    padding for Li tags 
*/
li[b-snk1kz6wbh]{
    margin-bottom:5px;
}



/*
    This is used to border the div that will contain the 
    two photos of the C++ code for Swapping application.
    The border will be thick so it can look like the border 
    of an old fashion book
*/
.swap-outline[b-snk1kz6wbh] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-style: solid;
    border-width: 10px;
    border-color: dimgrey;
    width:100%;
}
    /*
    The next three selectors are used together to 
    take the two C++ photos and make them look like a
    page aboout to be turned.

    What we did is:

    1. Small border to make the photos look like a page
    2. Rotate photos on the Y akis (skrewY() function)  to angle photos
    3. Create some padding to show the difference in the photos border and 
    the div(bboks) border

*/

    .swap-outline > img[b-snk1kz6wbh] {
        width: 100%;
        height: 100%;
        border-style: solid;
        border-width: 1px;
        border-color: black;
        border-left-width: 1px;
    }

    .swap-outline >img:nth-child(1)[b-snk1kz6wbh] {
        transform: skewY(1.5deg);

    
    }

    .swap-outline > img:nth-child(2)[b-snk1kz6wbh] {
        transform: skewY(-1.5deg);
           
    }



   

/*
    This is a grid format for the 
    four photos for the Multi Level PAge Table project
    Spacing.padding and grid format can be changed by I personally 
    liked the 2x2 format with the greybackground
*/

.mlpt-outline[b-snk1kz6wbh] {
    display: grid;
    border-style: solid;
    border-width: 5px;
    border-color: black;
    background-color: lightgrey;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px 20px;
    padding: 20px;
    margin-bottom: 20px;
}

    .mlpt-outline > img[b-snk1kz6wbh] {
        width: 100%;
        height: 100%;
        border-style: solid;
        border-width: 1px;
        border-color: black;
    }

.dummy[b-snk1kz6wbh]{
    color: white;
}
/* _content/Website/Pages/ComputerVision.razor.rz.scp.css */

/*
    Basic formmating to make sure no margins or padding is happening on this page
*/
*[b-x9rbvxhbux] {
    box-sizing: border-box;
    margin:0;
    padding:0;
}

/*
    Center all divs 
    set backgorund to lightgrey
*/
main[b-x9rbvxhbux] {
    text-align: center;
    background-color: lightgray;
}



/*
    Padding for first description
*/

.temp-padding[b-x9rbvxhbux]{
    margin-top: 10px; 
    margin-bottom: 20px;
}

/*
    Basic H1 formatting
    Want Center Bold and slighlt larger text than h2
*/

h1[b-x9rbvxhbux] {
    font-size: 400%;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
}

/*
    Baisc H2 formatting-this is for the titles of the sub project
*/
h2[b-x9rbvxhbux] {
    font-size: 300%;
    color: black;
   
}


/*
    This is used to place the images and text side by side in a flex format.
    We will have padding so images arent touching the arrow buttons.
*/
.container-computer-vision[b-x9rbvxhbux] {

    display: flex;
    height:680px;
    width:100%;
    align-items: center;


}

/*
    This is for the text next to the images.
*/
.inner-text-div[b-x9rbvxhbux] {
  
    order: 2;
    flex: 1;
    margin: 2% 4% 2% 4%;
    text-align: justify;

    font-family: Arial;
  
}

ul[b-x9rbvxhbux] {
    margin-left: 30px;
}

/*
    This is to format the the left and right arrows and the main images.
*/
.img-cont[b-x9rbvxhbux] {
    padding: 0% 4% 0% 4%;
    order: 1;
    align-items: center;
    display: flex;
}


/* Set image image size to 600 regardless of the 
    width of the screen
*/
.img-ComputerVision[b-x9rbvxhbux] {
    width:600px;
    max-height: 600px;
}

/*
    Some basic tinkering for the sideways buttons
*/
.crop-buttons[b-x9rbvxhbux] {
    height: 60px;
    width: 60px;
}

    .crop-buttons:hover[b-x9rbvxhbux] {
        transform: scale(1.2);
    }

/*
    This is chnage the formatting to fit a more narrow screen.

    The view will change from the text appearing at the side of the image, to the text appearing at the top. 

    This is to prevent text overflow. 
*/
@media (max-width: 1160px)  {

    .container-computer-vision[b-x9rbvxhbux] {
        display: block;
        align-items: center;
        height: 580px;
        margin-top: 10px;
        margin-bottom: 10px;
        height:auto;
    }


    .inner-text-div[b-x9rbvxhbux] {
        margin: 2% 4% 2% 4%;
        text-align: justify;
        font-family: Arial;
    }

    .img-cont[b-x9rbvxhbux] {
        align-items: center;
        display: block;
      
    }

    .img-ComputerVision[b-x9rbvxhbux] {
        width: 300px;
        max-height: 300px;
        align-items: center;
    }

    .crop-buttons[b-x9rbvxhbux] {
        
        align-items: center;
        height: 30px;
        width: 30px;
    }

    ul[b-x9rbvxhbux]{
        text-align: left;
    }

   

    h2[b-x9rbvxhbux] {
        margin-top: 25px;
        margin-bottom: 10px;
    }
}

@media(max-width: 480px) {
    .container-computer-vision[b-x9rbvxhbux] {
        display: block;
        align-items: center;
        height: 480px;
        margin-top: 8px;
        margin-bottom: 8px;
        height: auto;
    }


    .img-ComputerVision[b-x9rbvxhbux] {
        width: 230px;
        max-height: 230px;
        align-items: center;
    }
}

@media(max-width: 320px) {
    .container-computer-vision[b-x9rbvxhbux] {
        display: block;
        align-items: center;
        height: 400px;
        margin-top: 6px;
        margin-bottom: 6px;
        height: auto;
    }


    .img-ComputerVision[b-x9rbvxhbux] {
        width: 190px;
        max-height: 190px;
        align-items: center;
    }
}
/* _content/Website/Pages/Contact.razor.rz.scp.css */
*[b-zamrqeslde]{
    box-sizing: border-box;
}


.body-contact[b-zamrqeslde] {
   /* background-color: #55b6d2;*/
   
    height: 100%;
    background-color:white;
}

.email-me[b-zamrqeslde] {
    text-align: center;
    font-family: Arial;
    font-size: 250%;
    /*color:ghostwhite;*/
    color: black;
    padding-top: 10px;
    padding-left: 10px;
    position: relative;
    top: 10px;
}

/*
    This is to format the first paragraph
*/
.font-size[b-zamrqeslde] {
    text-align: center;
    font-size: 120%;
    color: black;
    padding-top: 10px;
    padding-left: 10px;
}

/*
    Move the editform in the middle of the screen.
    The rest of the class is from build in bootstrap CSS work.
*/

.top-padding[b-zamrqeslde] {
    position: relative;
    right: 20px;
}



label[b-zamrqeslde] {
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 0px;
    font-weight: bold;
   
}

/*
    Moves the labells over.
*/
.move-label-over[b-zamrqeslde] {
    position: relative;
    right: -5px;
}




/*
    Thi is to format the button 
*/
.top-padding-button[b-zamrqeslde] {
    position: relative;
    top: 20px;
}

.reduce-width[b-zamrqeslde] {
    width: 60%;
    margin: auto;
   
}

/*This is for the submit button after you click submit*/
.text-change[b-zamrqeslde] {
    color: #14df2f;
    position: relative;
    font-size:120%;
    top: 20px;
    text-align : center;
}


/*this is to make the text below the button null and only active when we click it */
.null-display[b-zamrqeslde]{

    display: none;

}
/* _content/Website/Pages/Home.razor.rz.scp.css */

/*
    Used to set the text to white and to be the center of 
    the screen. 
*/
.border-test[b-891m31sfq8] { 
    color: black;
    text-align: center;
    
}

/*
    This is just a dummy selector (placed in a div)
    that is used to push some text some so its more in the middle of 
    the screen.

*/
.main-text[b-891m31sfq8]{
   align-items: center;
   text-align: justify;
   width:95%;
   margin: auto;
   color: black;
    
}

h1[b-891m31sfq8], p[b-891m31sfq8], h2[b-891m31sfq8]{
  
   margin-bottom:20px;
}




h2[b-891m31sfq8], h1[b-891m31sfq8]{
    font-size:300%;
    font-weight:bold;
    text-align: center;
    padding-top: 30px;
}

p[b-891m31sfq8]{
    font-size: 200%;
}

/*
    This class is used to set the transitions rules 
    for the background image. The transition will run infinitely
    until the page exists or the program is shut down.

*/

.main-image[b-891m31sfq8] {
    background-image: url("images/bridge-on-the-lake-nature-theme-yo1yvmayery7yprx.jpg");
    padding-top: 20px;
    width: 100%;
    height: 100vh;
    animation-name: photo-b-891m31sfq8;
    animation-duration: 70s;
    animation-iteration-count: infinite;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: cornflowerblue;
    animation-fill-mode: backwards;
    animation-timing-function: ease;

}

/*
    The keyframes class below is used to transition between a predefined set of 
    photos. The photos we become the background photo for our Home razor page.
    The transition is being excuted in the main-image class.
    Photos are being repeated below so they stay idle for a couple of seconds before 
    they transition to the next photo. 
*/
@keyframes photo-b-891m31sfq8 {
    0% {
        background-image: url("Photos/images/bridge-on-the-lake-nature-theme-yo1yvmayery7yprx.jpg");

    }
    15% {
        background-image: url("Photos/images/bridge-on-the-lake-nature-theme-yo1yvmayery7yprx.jpg");
    }
    25% {
        background-image: url("Photos/images/city-night-google-meet-virtual-background-77owl5g8kr23fcde.jpg");
    }
    40% {
        background-image: url("Photos/images/city-night-google-meet-virtual-background-77owl5g8kr23fcde.jpg");
    }
    50% {
        background-image: url("Photos/images/ocean-waves-jb8qcjdlrm5zf0vp.jpg");
    }
    70% {
        background-image: url("Photos/images/ocean-waves-jb8qcjdlrm5zf0vp.jpg");
    }
    80% {
        background-image: url("Photos/images/ocean-and-mountains-n49mlq4z3aivajkh.jpg");
    }
    90% {
        background-image: url("Photos/images/ocean-and-mountains-n49mlq4z3aivajkh.jpg");
    }

    100% {
        background-image: url("Photos/images/bridge-on-the-lake-nature-theme-yo1yvmayery7yprx.jpg");
    }
   
}


@media(max-height: 600px) {
    .main-image[b-891m31sfq8] {
        height: auto;
    }
}

@media(max-width:1280px) {
    h1[b-891m31sfq8], p[b-891m31sfq8], h2[b-891m31sfq8] {
        margin-bottom: 10px;
    }


    h2[b-891m31sfq8], h1[b-891m31sfq8] {
        font-size: 170%;
        font-weight: bold;
    }

    p[b-891m31sfq8] {
        font-size: 140%;
    }
}

@media(max-width: 480px){
    h1[b-891m31sfq8], p[b-891m31sfq8], h2[b-891m31sfq8] {
        margin-bottom: 8px;
    }


    h2[b-891m31sfq8], h1[b-891m31sfq8] {
        font-size: 120%;
        font-weight: bold;
    }

    p[b-891m31sfq8] {
        font-size: 100%;
    }

}

@media(max-width: 320px) {
    h1[b-891m31sfq8], p[b-891m31sfq8], h2[b-891m31sfq8] {
        margin-bottom: 8px;
    }


    h2[b-891m31sfq8], h1[b-891m31sfq8] {
        font-size: 100%;
        font-weight: bold;
    }

    p[b-891m31sfq8] {
        font-size: 80%;
    }

}
/* _content/Website/Pages/MachineLearning.razor.rz.scp.css */
*[b-fslz1jxo8s] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}



/*
    This is used to make all text be in the middle 
    of the page so it looks like a resume style page.
*/
main[b-fslz1jxo8s] {
    width: 80%;
    margin: auto;
}


h1[b-fslz1jxo8s]{
    font-weight: bold;
    font-size: 340%;
    text-align: center;
}

/*
    Basic H2 formatting a little of padding 
*/
h2[b-fslz1jxo8s] {
    margin-top: 50px;
    margin-bottom: 20px;
    font-weight: bold;
}



/*
    This is just to move text UL text a little more over 
*/
ul[b-fslz1jxo8s] {
    margin-bottom: 10px;
    margin-left: 30px;
    margin-top: 10px;
}

/*
    Have  alittle more spacing for the bullet points 
*/
li[b-fslz1jxo8s] {
    margin-bottom: 5px;
}

/*
    Just add some padding at the end of the page for clarity purposes.
*/
.dummy[b-fslz1jxo8s] {
    opacity: 0%;
    margin-top: 10px;
}
/* _content/Website/Pages/VirtualReality.razor.rz.scp.css */
*[b-wttak72xb0] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
   
}

/*
    This will put all images in the center.
*/

main[b-wttak72xb0] {
    text-align: center;
    --colour: darkgoldenrod;
    margin-top: 30px;
    margin-bottom: 30px;
    max-width: 440px;
    margin: auto;
    text-align: justify;
}


h1[b-wttak72xb0]{
    text-align: center;
    font-weight: bold;
    font-size: 400%;
    margin-top: 10px;

}



/*
    Basic Padding for the below two selectors  
*/



h2[b-wttak72xb0] {
    font-size: 250%;
    padding-bottom: 10px;
    text-align: center;
    padding-top: 10px;
}


p[b-wttak72xb0] {
    padding-bottom: 20px;
    width: 95%;
    margin: auto;
    padding-top: 20px;
}


/*
    This is to format the boxes around the main div
*/
.spacing[b-wttak72xb0] {
    margin-top: 30px;
    margin-bottom: 30px;
    border-style: ridge;
    border-color: black;
    border-width: 4px;
    border-radius: 25px;
}

/*
    This is to format the video so it fits inside the top div regardless of 
    size of the screen.
*/
video[b-wttak72xb0] {
    width: 433px;
    height:auto;
    border-style: ridge;
    border-color: black;
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 0px;
    border-right-width: 0px;
}



/*
    Just add some spacing at the end 
*/
.dummy[b-wttak72xb0] {
    opacity: 0%;
    margin-top: 10px;
}


/*
    Keeps video formatting 
*/
@media(max-aspect-ratio: 16/9) {
    video[b-wttak72xb0]{
        width:100%;
        max-width:600px;
        max-height:450px;
        height:auto;
    }
}
/* _content/Website/Shared/MainLayout.razor.rz.scp.css */
*[b-6btuwpt5su] {
    box-sizing: border-box;
 
}


header[b-6btuwpt5su] {
    /*background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);*/
    background-color: black;
    margin: 0;
    padding: 0;
    width:100%;



}

/*
    Next three selectors is just for navbar formatting 
*/
.navbar[b-6btuwpt5su] {
    align-items: center;
    width: 100%;
    justify-content: space-between;
    display: flex;
   
   
}



.navbar-links[b-6btuwpt5su]{
    display: flex;
    flex: 1.0;
    gap: 1.4rem;
    padding: 0;
    margin: 0;
    justify-content: center;
}

    .navbar-links li[b-6btuwpt5su] {
        list-style: none;
        
    }

.navbar-links li a[b-6btuwpt5su] {
    text-decoration: none;
    color: ghostwhite;
    padding: 0.8rem;
    display: block;
  
}

/*Fixed thea headhsot image to a certain size */
.headshot[b-6btuwpt5su] {
    width: clamp(20px, 50%,30px);
    height: clamp(20px, 50%, 30px);
    margin: .5rem;
    left: 10px;
    display:flex;
    border-radius: 50%;
    position: relative;
}

/*Create some functional hover abilities for nav links */
.navbar-links li:hover[b-6btuwpt5su]{
    background-color: cornflowerblue;
}

.hamburger-icon:hover[b-6btuwpt5su] {
    background-color: #1b337a;
}

video[b-6btuwpt5su] {
    width: 100%;
    aspect-ratio: 16/9;
}


/*
    This is for the buttons that will appear later when the images get to small.
*/
.toggle-button[b-6btuwpt5su] {
    margin: 0 20px 10px 0;
    width: 30px;
    height: 40px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
}
.toggle-button .bar[b-6btuwpt5su] {
    background-color: ghostwhite;
    width: 100%;
    height: 10%;
}

.toggle-button:hover[b-6btuwpt5su] {
    background-color: #111111;
}

.navbar-links-two[b-6btuwpt5su] {
    display:none;
}
/*This is for the C# code so the second nav bars dont appear at the start of the page */
.navbar-links-three[b-6btuwpt5su] {
    display:none;
}

.hamburger-icon[b-6btuwpt5su] {
   display:none;
}

@media (max-width: 920px)  {

    /*.hamburger-icon {
        display:flex;
    }*/

    .toggle-button[b-6btuwpt5su]{
        display:flex;

    }


    .navbar-links[b-6btuwpt5su] {
        display:none;
    }


    .navbar-links-two[b-6btuwpt5su] {
        padding: 0 20px 0 15px;
        height: 200px;
        display: grid;
        width: 100%;


      
    }
 
        .navbar-links-two > li[b-6btuwpt5su] {
            border-bottom: 4px solid royalblue;
            height: 15px;
            display: grid;
            list-style: none;
            justify-content: left;
            align-content: center;
            font-weight: bolder;
            padding: 9px;
            width: 100%;
        }

            .navbar-links-two li:hover[b-6btuwpt5su] {
                background-color: #111111;
            }

        .navbar-links-two li a[b-6btuwpt5su] {
            text-decoration: none;
            color: ghostwhite;
        }


    .hamburger-icon[b-6btuwpt5su] {
        margin: 0 20px 10px 0;
        height: 50px;
        display:grid;
        
    }
        
}