@import url("style.css");

:root{
    --border-top: #d400ff;
    --border-right: var(--border-top);
    --border-bottom: #ffffff;
    --border-left: var(--border-bottom);
    --border-size: 5px;
   
    --inside-background: #00000034;

}


.navigationbar{
    border-top: var(--border-size) solid var(--border-top);
    border-right: var(--border-size) solid var(--border-top);
    border-bottom: var(--border-size) solid var(--border-bottom);
    border-left: var(--border-size) solid var(--border-left);
    background-color: var(--inside-background);


    display: flex;
    justify-content: flex-start;
    gap: 50px;
    
    height: 90px
    
}



/* Boxes for home page */
#middle{
    display: flex;
    flex-direction: flex-start;
    justify-content: space-between;
    gap: 1px;
}





#video-box{
    border-top: var(--border-size) solid var(--border-top);
    border-right: var(--border-size) solid var(--border-top);
    border-bottom: var(--border-size) solid var(--border-bottom);
    border-left: var(--border-size) solid var(--border-left);
    background-color: var(--inside-background);

    width: 500px;
   
}

#video-box-inside{
    position: relative;
    margin: 20px;
}


#news-box{
    border-top: var(--border-size) solid var(--border-top);
    border-right: var(--border-size) solid var(--border-top);
    border-bottom: var(--border-size) solid var(--border-bottom);
    border-left: var(--border-size) solid var(--border-left);
    background-color: var(--inside-background);

    flex: 1;
    display: flex;
    margin-left: 20px;
    margin-right: 20px;
}

#news-box-inside{
    display: flex;
    flex-direction: column;
}




#buttons{
    border-top: var(--border-size) solid var(--border-top);
    border-right: var(--border-size) solid var(--border-top);
    border-bottom: var(--border-size) solid var(--border-bottom);
    border-left: var(--border-size) solid var(--border-left);
    background-color: var(--inside-background);

    width: 100px;
}

#inside-buttons{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#footer{

    display: flex;
    flex-direction: column;
    
}




















/* Boxes for about me page */


#introduction-box{
    border-top: var(--border-size) solid var(--border-top);
    border-right: var(--border-size) solid var(--border-top);
    border-bottom: var(--border-size) solid var(--border-bottom);
    border-left: var(--border-size) solid var(--border-left);
    background-color: var(--inside-background);

    display: flex;
    flex-direction: column;

    position: absolute;
   
}

#introduction-box-inside{
    display: flex;
    flex-direction: flex-start;
}