/* CSS for the slideshow */

.slideshow-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}


.navigation {
    position: absolute; 
    top: 10px; 
    width: 100%;
    text-align: center;
    z-index: 10; 
    margin-bottom: 100px;

    label {
        box-shadow: 0 0px 3px black;
        width: 5%;
        
    }
    
    
}

.nav-button {
    display: inline-block;
    width: 10vh;
    height: 3.5vh;
    margin: 0 15px;
    background-color: #ddd;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
}

.nav-button:hover {
    background-color: #bbb;
}


input[type="radio"] {
    display: none;
}


.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    margin-top: 70px; 
    margin-bottom: 50px;
}


.slide {
    min-width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border: 0.1px solid black;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 0px 10px black;
    background-color: rgb(200, 221, 228);
}


#project-slide1:checked ~ .slides {
    transform: translateX(0);
}

#project-slide2:checked ~ .slides {
    transform: translateX(-100%);
}

#project-slide3:checked ~ .slides {
    transform: translateX(-200%);
}

#project-slide4:checked ~ .slides {
    transform: translateX(-300%);
}

#experience-slide1:checked ~ .slides {
    transform: translateX(0);
}

#experience-slide2:checked ~ .slides {
    transform: translateX(-100%);
}


.project_name_and_pic {
    
    width: 48%;
    text-align: center;
    margin-right: 2%;

    h3 {
        margin-bottom: 50px;
        font-size: 40px;
    }

}

.project_description {
    display: flex;
    align-items: center;
    width: 48%;
    text-align: left;
    margin-left: 2%;
    font-size: 25px;
    color: #302f2f;


}


.website_header {
    margin-top: 50px;
    margin-left: 50px;
    text-align: center;
    color: white;
    height: 65vh;
    font-family: 'Source Sans Pro', Helvetica, sans-serif;
    font-size: 30px;
    
    
}



.body {
    background: linear-gradient(to bottom, black, rgb(10, 10, 135), rgb(47, 140, 172));
}

.nav {
    height: 35vh;

    ul {
        list-style-type: none; 
        padding: 0;           
        margin: 0;             
        display: flex;         
        justify-content: center;
    }

    li {
        margin-right: 20px;
        text-align: center; 
        border-radius: 20px; 
        padding: 20px;
        background: linear-gradient(to bottom, rgb(96, 188, 218), white); 
        box-shadow: 0 0px 15px orange;
		border: 3px solid white;
        font-family: 'Garamond', serif;

        font-size: 30px; 
        
        &:last-child {
            margin-right: 0;
        }

        a {
            text-decoration: none;
            color: inherit;
        }
    }
}

.content {
    background: lightblue;
    margin-left: 40px;
    margin-right: 40px;
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: 'Georgia', sans-serif;
    border-radius: 20px;
    box-shadow: 0 0px 30px black; 
    color: #302f2f; 

}


.education_content { 
    
    border-bottom: 2px solid #302f2f;
    border-width: 1px;
    

    header {
        border-bottom: 2px solid #302f2f;
        border-width: 1px;
        display:inline-block;
        margin-bottom: 20px;
        font-family: 'Garamond', serif; font-size: 30px;
        
    }


    .education_text_and_img {

        display: flex;
    
        p {
            justify-content: center;
            font-size: 20px;
            font-family: 'Source Sans Pro', Helvetica, sans-serif; font-size: 25px;
            width: 60%;
            line-height: 2.0;
            
            
        }
    
        img {
            width: 250px;
            height: 250px;
            border-radius: 50%; 
            margin-left: auto;
            margin-right: 100px;
            align-items: center;
            margin-bottom: 100px;
            border: 15px solid transparent; 
            outline: 1px solid gray;
    
        }
    
    }

 
}


.projects_content { 
    
    border-bottom: 2px solid #302f2f;
    border-width: 1px;
    text-align: center;
    

    header {
        border-bottom: 2px solid #302f2f;
        border-width: 1px;
        display:inline-block;
        margin-bottom: 20px;
        font-family: 'Garamond', serif; font-size: 30px;
        
    }
 
}


.footer {
    text-align: center;
}