*{
    box-sizing:border-box;
}
html{
        overflow-x: hidden;
}
body{
    background-image:url(space.jpg);
    background-size:cover;
    background-attachment: fixed;
    background-repeat:no-repeat;
    overflow-x: hidden;
    margin:0;
}
.nav-bar{
    width:90vw;
    display:flex;
    position: sticky;
    height:60px;
    backdrop-filter: blur(2px);
    list-style-type:none;
    box-shadow:3px 3px 10px white;
    border-radius:4px;
    margin-top:30px;
    margin-left:auto;
    flex-direction:row;
    margin-right:auto;
}
.navlink{

    padding:20px 40px;
    font-family: monospace;
    font-size:18px;
}
.navlink a{
    color:white;
    text-decoration-line:none;
}
.navlink a:hover{
    color:limegreen;
    text-decoration-line:none;
}
.navlink a:visited{
    color:rgb(207, 37, 37);
    text-decoration-line:none;
}
.im{
    font-family:Beth Ellen;
    text-align: center;
    font-size:30px;
    color:white;
}
.fname{
    font-family:Roboto Slab;
    text-align: center;
    font-size:130px;
    color:white;
    text-shadow: 5px 5px 5px orange;
}
.sname{
    font-family:Beth Ellen;
    text-align: center;
    font-size:70px;
    color:white;
    transform:rotate(-10deg);
    text-shadow: 3px 3px 3px cyan;
}
.text-box img{
    margin-left:auto;
    margin-right:auto;
    margin-bottom:100px;
    display:block;
    height:450px;
    width:auto;
    position:relative;
}
.text-box pre{
    position:absolute;
    font-family:Borel;
    font-size:25px;
    text-align: center;
    transform:translate(-50%,-50%);
    top:45%;
    left:44%;
}
.container{
    position:relative;
}
.parent{
    font-size:13vw;
    font-weight:900;
    font-family: Tourney;
    color: white;
    padding-left:30px;
}
.child{
    margin-top:-20px;
    margin-left:30px;
    margin-right:30px;
    background-color: transparent;
    border-radius:5px;
    backdrop-filter: blur(10px);
    box-shadow:5px 5px 10px white;
}
.child p{
    font-family: Roboto;
    font-size:25px;
    text-wrap:wrap;
    line-height: 1.7;
    color:white;
    padding-left: 20px;
    padding-top:20px;
    padding-bottom:20px;
    padding-right:30px;
    text-align:justify;
}

.grid{
    display:grid;
    grid-template-columns:95vw;
    grid-template-rows:auto;
    row-gap:50px;
}

marquee img{
    height:130px;
    width:130px;
    margin-right:100px;
    margin-top:30px;
}
marquee{
    direction:"left";
    width:90%;
    margin:auto;
}
.gridp{
    display:grid;
    grid-template-rows:auto;
    margin-top:30px;
    row-gap:50px;
    grid-template-columns:90vw;
    margin:auto;
}
.gridp img{
    width:500px;
    height:auto;
}
.gridp div:nth-child(even){
   padding-left:50%;
}
.gridp div:nth-child(odd){
    padding-left:10%;
}
.card{
    display:flex;
    width:90vw;
    margin:auto;
    background-color: transparent;
    border-radius:10px;
    backdrop-filter: blur(10px);
    box-shadow:5px 5px 10px white;
    flex-direction:row;
}
.card_img img{
    width:350px;
    height:300px;
    border-radius:5px;
    padding-left:5px;

}

.card p{
    padding-left:30px;
    text-align:justify;
    color:white;
    font-family:Roboto;
    font-size:24px;
    padding-right:30px;
}
.contact{
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    margin-top:40px;
}
.icon img{
    width:70px;
    height:70px;
}
footer img{
    width:100vw;
}
footer{
    margin-top:60px;
    bottom:0;
}
.main{
    display:grid;
    justify-content:center;
    align-items:center;
    grid-template-columns:90vw;
    grid-template-rows:60px 120px 80px;
    margin-top:70px;
    margin-bottom:150px;
}
@media screen and (max-width: 560px){
    .card{
        flex-direction:column;
    }
    .card_img img{
        width:100%;
        padding-top:5px;
        border-radius:5px;
    }
    .gridp div:nth-child(even){
        padding-left:0.5vw;
     }
     .gridp div:nth-child(odd){
         padding-left:0.5vw;
     }
     .gridp img{
        width:400px;
        height:auto;
    }
    .text-box img{
        height:300px;
        width:auto;
    }
    marquee img{
        height:90px;
        width:90px;
        margin-right:70px;
        margin-top:30px;
    }
    .text-box pre{
        font-size:15px;
        left:42%;
    }
    .child p{
        font-size:18px;
    }
    .navlink{
        font-size:15px;
        padding:10px 20px;
    }
    .icon img{
    width:50px;
    height:50px;
}
}