@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap');

/*----general----*/

html body{
    margin:0;
    padding:0;
}

#title_text{
    font-family: 'Noto Sans Mono', monospace;
    font-size: 0.8em;
    font-weight:600;   
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    text-decoration: none;
}

p{
    margin:0;
}
.text{
    /* font-family: 'Courier Prime', monospace; */
    font-family: 'Noto Sans Mono', monospace;
    font-size: 0.8em;
    margin-top: 0px;
    /* columns: 1; */
}
.lang{
    justify-content: flex-end;
    display: flex;
    margin: 0px;

}

#project-title{
    font-family: 'Noto Sans Mono', monospace;
    font-size: 0.8em;
    font-weight:600;   
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 20px;
    margin-bottom: 10px;
    text-decoration: none;
}

.show_image{
display: block;
}
.work_link{
    font-family: 'Noto Sans Mono', monospace;
    cursor: pointer;
    color: black;   
    text-decoration: none;
    margin: 0;

}
.work_link:hover{
    cursor: pointer;
    text-decoration: underline;
}
.work_link:visited{
    color:#000000;
}

#about{
    cursor: pointer;
}

/* .work_prev_image{
    display: none;
    max-width: calc(25vw - 30px);
    position: absolute;
    left: 1vw;
    bottom:1vh;
    overflow: hidden;
} */

#contact:hover + #contact_info{
    display: block;
}
 #contact_info:hover{
    display: block;
}

#contact_info{
    display: none;
}

.grid-container{
    display: grid;
    padding: 20px; 
}

a:visited {
    color:#000000;
}


.menu{
    padding: 20px;
}

.subMenu{
    margin-left:2em;
}

.space{
    margin-bottom: 40px;
}

#img{
    margin: auto;
    width:100%;
} 

.swiper-wrapper{
    display: flex !important;
    align-items: center;
    margin: 0px;
}

.swiper-slide{
    width: 100%;
}

.swiper {
    max-width: calc((75vw - 30px)* 0.75 - 75px);
    margin-left: 0;
  }

#addImg {
    display: block;
    margin-left: 0;
    align-items:center;
    object-fit: scale-down;
}
#addImgs{
    display: block;
}

#video{
    aspect-ratio: 16/9;
    display: block;

}

/*-----media queries for computers-----*/

@media screen and (min-width: 760px) {
    

    .grid-container{
        grid-template-columns: calc(25vw - 30px) calc(75vw - 30px);
        
    }
    .project-content{
        grid-column-start: 2;
        grid-column-end: 3;
        margin: 0;
        padding: 0;
        border: 0;
        
    }
    .content{
        display: grid;
        grid-template-columns: calc((75vw - 30px)* 0.75 - 10px) calc((75vw - 30px)* 0.25);
        gap: 10px;
        /* background-color: #58bb8d; */
    }

    #img{
        max-width: calc((75vw - 30px)* 0.75 - 75px);
        max-height: calc((75vw - 30px)* 0.75 - 75px);
    }
    #content-text{
        width: calc((75vw - 30px)* 0.75 - 75px);
    }
    #addImg{
        max-width: calc((75vw - 30px)* 0.75 - 75px);
        max-height: calc((75vw - 30px)* 0.75 - 75px);
    }

    #video{
        width:  calc((75vw - 30px)* 0.75 - 75px);
    }
    .main-content{
        grid-column-start: 1;
        grid-column-end: 2; 
    }
    
    .project-details{
        grid-column-start: 2;
        grid-column-end: 3; 
        max-width: 100%;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }
}
/*-----media queries for smart phone-----*/
@media screen and (max-width: 759px) {
    .swiper{
        max-width: 100%;
    }
    
    .grid-container{
        grid-template-columns: 90vw;
        flex-direction: column;
    }

    #img{
        max-width: 90vw;
        max-height: 90vw;
    }
    #addImg{
        max-width: 90vw;
        max-height: 90vw;
    }

    #video{
        width:  90vw;
    }

    .project-details{
        margin-top: 25px;
        max-width: 100%;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }

}