*{
    margin:0;
    border:0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
:root{
    --BORDER-C1:red;
    --BG-BLOCK2:black;
    --BG-BLOCK1:rgb(30, 50, 205);
    --theme1:rgb(3, 1, 31);
    --theme2:black;
    --BG:black;
    --T-COL:white;

    --topoffset:20px;
}
body{
    background-image:conic-gradient(red,rgba(185, 14, 14, 0.845),rgb(78, 32, 39),magenta,rgb(0, 0, 0));
    color:rgba(255, 255, 255, 0.859);
}

.scroll_bar {
    height: 5px;
    width: 0%;
    background-color: magenta;
    position: static;
    top: 0;
    left: 0;
    animation: progress 1s linear;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);
    animation-iteration-count: 1;
    animation-fill-mode: both;
  }
  @keyframes progress {
    to {
      background-color:blue;
      width: 100%;
    }
  }
img{
    display:block;
}
.my_pic_style{
    width:30vw;
    height:auto;
    background-color: bisque;
}
.img_wrapper{
    width: 100%;
    display:grid;
    place-items: center;
}
a{ 
    color:rgb(2, 186, 2);
    text-decoration: none;
    font-size: 20px;
}
div:target{
    box-shadow: 2px 2px 4px 4px white;
    transition: all 500ms ease;
}
button{
    background-color: var(--theme1);
    border:none;
}
button:focus,button:active{
    background-image:linear-gradient(to bottom right,pink,blue) ;
}
.flex_row{
    display:flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap:10px;
    /* border:2px solid var(--BORDER-C1); */
}
.flex_column{
    display:flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap:10px;
    /* border:2px solid var(--BORDER-C1); */
}
.navigation{
    width:100%;
    background-color: var(--BG-BLOCK2);
}
.small_box{
    background-color:var(--theme1);
    border: 2px solid var(--BORDER-C1);
    color: var(--T-COL);
    border-radius: 10px;
    padding: 2px 4px 2px 4px;
    margin:2px 4px 2px 4px;
    font-size: 20px;
}
.small_box:hover{
 transform:scale(1.1);
 transition:transform 500ms 0s ease;
}
header{
    position:sticky;
    top:0px;
    width: 100%;
    z-index: 1;
}
.banner{
    color:red;
    font-family: 'Times New Roman', Times, serif;
    font-size: 30px;
    text-align: center;
    width:100%;
    background-color:var(--theme1);
    border-bottom: 2px solid var(--BORDER-C1);
}
input.base{
    background-color: var(--theme1);
    outline:none;
    color:black;
}
.big_img{
    position: fixed;
    top:50%;
    left:50%;
    width:100%;
    height:100%;
    z-index: -1;

    transform:translate(-50%,-50%)
}
.big_img img{
    display:block;
    width:100%;
    height:100%;
}
.large_box{
    background-color:var(--theme1);
    border:2px solid var(--BORDER-C1);
    padding:10px;
    color:var(--T-COL);
    font-size: 30px;
    scroll-behavior: smooth;
}
.front_page{
    height:70vh;
    width:40vw;
}
.front_page_single{
    height:80vh;
    width:70vw;
}
.side_img{
    width:40vw;
    height:70vh;
    background-color: var(--theme1);
    color:black;
    font-size: 30px;
}

#projects article:nth-child(3){
    display:block;
}
.nav_short{
    display:none;
}
.sticky_header{
    position:sticky;
    border:none; 
    border-bottom:2px solid white;
    top:30px; 
    background-color: black; 
    width:100%;
}
.h_scroller{
    width:100%;
    display:flex;
    flex-flow:row nowarp;
    align-items: center;
    justify-content: center;
}
.card{
    width:80vw;
    /* margin:0px 20px 0px 20px; */
}
footer{
    border-top:2px solid white;
}
@media screen and (max-width:426px) {
    img.my_pic_style{
        width:70vw;
    }
    #projects{
        height:auto;
    }
    .navigation .small_box{
        display:none;
    }
    #search_box{
        display:none;
    }
    .nav_short{
        display: block;
    }
    .navigation {
        flex-flow:column nowrap;
        align-items: start;
        justify-content: space-evenly;
        background-color:rgba(0,0,0,0.4);
    }
    div:target{
        box-shadow: none;
    }
    h1{
        font-size: 35px;
    }
    h2{
        font-size: 30px;
    }
    p{
        font-size: 25px;
    }
    .sticky_header{
        top:45px;
    }
    .large_box{
        height:auto;
    }
    .front_page{
        height:auto;
    }
    #intro_container{
        flex-flow: column nowrap;
    }
    .my_pic_style{
        width:50vw;
    }
    .front_page{
        height:auto;
        width:80vw;
    }
    #intro_container{
        flex-flow: column nowrap;
    }
    .front_page_single{
        width:80vw;
    }
    .side_img{
        width:80vw;
        height:50vh;
    }

}

@media screen and (max-width:780px) and (min-width:427px){
    .my_pic_style{
        width:50vw;
    }
    .front_page{
        height:auto;
        width:80vw;
    }
    #intro_container{
        flex-flow: column nowrap;
    }
    .front_page_single{
        width:80vw;
    }
    .side_img{
        width:80vw;
        height:50vh;
    }
    .sticky_header{
        top:70px;
    }
}