main{
    width:100vw;}
    
    body{
    width:100vw;
    margin:0;
    overflow-x:hidden;
    }
    
    .header-1{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    padding:8px;
    background:#be3144;
    height:40px;
    }
    
    nav{
    margin-top:10px;
    margin-right:10px;
    margin-right:35px;
    background:#be3144;
    width:300px;
    float:right;
    padding:0;}
    
    ul{
    margin:0;
    background:#be3144;
    }
    
    li{
    margin: 0 10px 0 10px;
    display:inline;
    font-size:20px;
    font-weight:bold;
    color:white;
    }
    
    .first{
    color:white;
    background:black;
    margin-top:55px;
    margin-left:0;
    width:100%;
    height:500px;
    padding-top:100px;
    }
    .introduction{
    line-height:1.5;
    text-align:center;}
    
    .cornelius{
    font-weight:bold;
    font-size:40px;
    }
    
    .developer{
    color:#b0303c;
    font-size:25px;
    }
    
    
    .proj{
    display:flex;
    padding:0;
    margin:0;
    width:100%;
    flex-wrap:wrap;
    }
    
    .link > img{
    width:100%;
    height:400px;

     }
    
 
                                                                                                                                                                                                                                                                                                                                                                                                                                                  
    
    .projects{
    background-color:#45567d;
    margin-top:-20px;
    width:100vw;
    padding-bottom:15px;
    }
    
    #project-type{
    color: white;
    padding-bottom: 60px;
        
    }

    #project-type > h1{
       
        margin: 0;
        text-align: center;
        padding: 0;
        font-size: 17px;
    }

    #project-type> p{
        text-align: center;
    }

    #project-container{
     
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
      
        
        
        
    }

    .container{
    background: #45567d;;
    width:29%;
    padding: 0;
    margin:10px 0;
    }
    
    .word{
    text-align:center;
    background-color: black;
    margin: 0;
    }
    
    h1 {
    padding-top:40px;
    margin-bottom:20px;
    line-height:1.5;}
    
    .projects > header > h1{
    text-align:center;
    line-height:1.5;
    color: white;
    }
    
    u{
    margin-top:20px;}
    
    a{
    color:#f0f0f0;
    text-decoration:none;}
    
    .code{
    color:black;
    transition: color 1s}
    
    .link:hover .code{
    color:#ff7f50;}
    
    
    .buttn{
    display:block;
    width:90px;
    background-color:black;
    border:none;
    margin:50px auto;
    color:#f0f0f0;
    padding:15px 0 15px 0;
    transition: background-color 1s;
    }
    
    .buttn:hover{
    background-color:#be3144;}
    
    .buttn .cod{
    position:relative;
    left:0;
    transform: translateX(0);
    transition: left 1s;
    }
    
    .buttn:hover .cod{
    left: 2px;
    }
    .second{
    margin-top:-20px;
    background-color:#be3144;
    padding-bottom:50px;
    }
    .second > header{
    background-color:#be3144;
    color:White;
    text-align:center;
    margin:0;
    }
    
    .second >ul{
    display:block;
    width:fit-content;
    margin: auto;
    transform: translateX(-8%);
    background-color:#be3144;}
   /* 
    .second >ul{
        text-align:center;}
    */
    .second > hr{
    background:white;
    color:white;}
    
    .social-icon{
    margin-bottom:-4px;
    }
    
    .second > ul > li > a{
    position: relative;
    top:0;
    transition: top 0.3s; 
    }
    
    .you >a:hover{
    top:8px;
    }
    
    .header-1 > nav > ul > li {
    background-color:#be3144;
    }
    
    .header-1 > nav > ul > li > a:hover{
    color:Blue;
    }
    
    
    
    @media(max-width:1100px){
    .container{
    width:45%;
    }
   /* 
    .second > ul {
        padding-right:35px;
        padding-left:22px;
        }
    */
    } 
    
    @media(max-width:800px){
    
    .proj{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    }
    
    .container{
    width:95%;}
    
     
    }                     
   
    

    #others{
        text-align: center;
        display: block;
        margin: auto;
    }

   

    #flex-container{
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: rgb(211, 207, 207);
    }

    .backend-flex{
        width: 90%;
        margin: 10px auto;
       
    }

    @media(max-width:950px){

        #flex-container{
            display:flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: rgb(211, 207, 207);
        }
        
        .backend-flex{
            width: 400px;
            margin: 10px auto;
           
        }
    }

    #text-holder{
       
        width: 65%;
        min-width: 400px;
       
        color: black;
    }

    #text-holder > h3{
        text-align: center;
    }
    
    #text-holder > p{
        padding: 0 10px;
    }
    
    #Backend-container{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
    }