@font-face {
    font-family: 'lexenddeca';
    src: url('Lexend_Deca/static/LexendDeca-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'lexenddeca';
    src: url('Lexend_Deca/static/LexendDeca-Light.ttf');
    font-weight: 200;
}

@font-face {
    font-family: 'lexenddeca';
    src: url('Lexend_Deca/static/LexendDeca-Medium.ttf');
    font-weight: 300;
}

#parent{
    display: flex;
    margin: 5px;
}

#sidebar{
    padding-left: 30px;
    width: 180px;
    position: fixed;
}

.title {
    margin-bottom: 0;
}

.sidebar-links {
    list-style-type: none;
    margin-top: 15px; 
    font-family: 'lexenddeca';
    font-weight: 200;
    font-size: 20px;
    padding-left: 0;
}

.sidebar-links a:hover {
    background-color: #FFD933;
    text-decoration: none;
}

.about-links {
    font-family: 'lexenddeca';
    font-weight: 200;
    font-size: 15px;
    padding-left: 0; 
    text-decoration: underline;
}

.link-icon img {
    max-height: auto; 
    width: 2em;
    margin-right: 10px;
}

.link-icon .indiv-icon {
    display: flex;
    align-items: center; /* Center items vertically within indiv-icon */
    margin-bottom: 5px; /* Add margin between indiv-icon elements */
}

.link-icon a:hover {
    text-decoration: underline ;
}

.link-icon a {
    display: flex;
    align-items: center; /* Center items vertically within the anchor tags */
    margin-bottom: 10px; /* Add margin between anchor tags */
}

.link-icon {
    font-family: 'lexenddeca';
    font-weight: 200; 
    display: flex;
    flex-direction: column;
}

ul li {
    list-style-type: none;
    font-family: 'lexenddeca';
    font-weight: 200;
    padding-left: 0px;
    margin-bottom: 10px; 
}



a:link, a:visited{
    color: black;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#content{
    margin: 20px;
    margin-left: 260px;
    margin-right: 40px;
    padding-bottom: 10px;
}

h1 {
    font-family: 'lexenddeca';
    font-weight: 500;
    font-size: 45px;
}

h2 {
    font-family: 'lexenddeca';
    font-weight: 400;
    margin-top: 0px;
    margin-bottom: 0px;
}

h3 {
    font-family: 'lexenddeca';
    font-weight: 400;
    margin-top: 0px;
}

p {   
    font-family: 'lexenddeca';
    line-height: 22px;
    font-weight: 200;
}

.float-container {
    display: flex;
    align-items: flex-start;   /* aligns text with top of image */
    gap: 20px;                 /* space between image and text */
    padding: 20px;             /* optional padding around container */
}

.image-child {
    flex: 0 0 auto;           /* do not grow, do not shrink by default */
    max-width: 450px;         /* max width of image column */
    width: 100%;              /* allows image to shrink on small screens */
}

.image-child img {
    width: 100%;              /* scales image to container */
    height: auto;
    display: block;
}

.text-child {
    flex: 1;                  /* takes all remaining space */
}

@media (max-width: 1250px) {
    .float-container {
        flex-direction: column;  /* stack items vertically */
    }
    .image-child,
    .text-child {
        width: 100%;             /* take full width */
    }
}

.video {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 aspect ratio (height/width) */
    max-height: 600px; /* Set a maximum height for the video container */
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.me {
    /* max-width: 500px; */
    max-width: 100%;
    padding-bottom: 10px;
}

@media (max-width: 400px) {
    .video {
        padding-top: 75%; /* Adjust the padding-top value for the desired aspect ratio */
        max-height: none; /* Remove the maximum height on smaller screens if needed */
    }

    .video iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 2000px) {
    .me {
        width: 90%;
    }
}

@media (max-width: 1230px) {
    .float-child {
        width: 100%; /* Set width to 100% for smaller screens */
        float: none; /* Clear the float to stack the divs */
    }
}

.projects-title {
    /* margin-top: 20px; */
    margin-bottom: 5px;
    font-size: 28px;
}

@media (max-width: 340px) {
    #rig li {
        width:20%;
    }
}

.rig-img {
    max-width: 340px;
    width: 100%;
}

.rig-cell {
    width: 340px;
    position: relative;
    display: block;
}

.rig-overlay {
    display: block;
    position: absolute;
    text-align: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: .5s ease;
    height: 340px;

}

.rig-text {
    font-family: 'lexenddeca';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#rig {
    padding-left: 0px;
}

.rig-cell:hover .rig-overlay {
    opacity: 0.5; 
    background-color: black; 
    height: 340px;
}

.rig-cell:hover .rig-text {
    opacity: 1;
    color: white;
}

#rig li {
    float: left;
    margin-right: 10px;
    height: 340px;
    width: 340px;
}

.spacer {
    margin-bottom:800px;
}

.spacer2 {
    margin-bottom:240px;    
}

.spacer3 {
    margin-bottom:20px;     
}

.spacer4 {
    margin-bottom:450px;     
}

.pres-rig {
    padding-left: 0px;

}

.pres-rig li {
    display: inline-block;
    margin-right: 10px;
    height:190px;
    margin-top: 0px;
    margin-bottom: 20px;
}

.pres-rig-cell {
    width: 360px;
    position: relative;
    display: block;
    
}

.section {
    margin-bottom: 20px;
}

.materials {
    margin-left: 20px;
    font-family: 'lexenddeca';
    font-weight: 200;
    line-height: 25px;
}

.materials-title {
    margin-top: 20px;
    margin-bottom: 3px;
    font-family: 'lexenddeca';
    font-weight: 300;
    font-size: 20px;
}

video {
    max-width: 700px; /* Set the maximum width */
    width: 100%; /* Make the video responsive within its container */
    height: auto; /* Maintain the aspect ratio */
    overflow: hidden; /* Hide any overflow beyond the max-width */
}

.smaller-video {
    max-width: 350px;
}

.images img {
    /* max-width: 692px; */
    max-width: 700px;
    width: 100%; /* Make the video responsive within its container */
    height: auto; /* Maintain the aspect ratio */
    overflow: hidden; /* Hide any overflow beyond the max-width */
}

.detailed-images img {
    /* max-width: 692px; */
    max-width: 100%;
    width: 100%; /* Make the video responsive within its container */
    height: auto; /* Maintain the aspect ratio */
    overflow: hidden; /* Hide any overflow beyond the max-width */
}

ol {
    font-family: 'lexenddeca';
    font-weight: 200;
}

ol .indent {
    margin-left: 60px;
}

.anim-text {
    margin-top: 3px;
    margin-bottom: 0px;
}