:root {
    --outerline-color: blue;
    --outerline-inside-color: rgba(0, 0, 255, 1);
    --inner-color-portfolio: red;
    --outer-color-portfolio: red;
}

body {
    font-family: 'Courier New', Courier, monospace;
    background-color: black;
    color: white;
    min-width: 1600px;
    margin: 0 auto;

}

.navbar {
  opacity: 100%;
    position: absolute;
    top: 10;
    margin: 20px;
    a:before {
    content: " "; 
    display: inline-block; 
    width: 32px;
    }
    text-align:left;
    align-content:normal;  
    font-family: 'Brush Script MT', 'Brush Script Std', cursive;
    z-index: 9998;
    text-shadow:
    -1px -1px 0 white,  1px -1px 0 white, -1px 1px 0 white,  1px 1px 0 white,
    -1px  0px 0 white,  1px  0px 0 white,  0px 1px 0 white,  0px -1px 0 white;
}

.background-area-proper {
    /*This will be the background*/
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 1440px;
    height: 90vh;
    margin: 0 auto;
    background-color: black;
    
}

.vert-line-on-edge {
    position: absolute;
    height: 100%;
    width: 8px;
    background-color: var(--outerline-inside-color);
    border-radius: 400px;
    opacity: 100%;
/*    box-shadow:
        -8px -8px 10px 1px blue,  8px -8px 10px 1px blue, -8px 8px 10px 1px blue,  8px 8px 10px 1px blue,
        -8px  0px 10px 1px blue,  8px  0px 10px 1px blue,  0px 8px 10px 1px blue,  0px -8px 10px 1px blue;
*/
    box-shadow:
        -8px -8px 10px 0px var(--outerline-color),  8px -8px 10px 0px var(--outerline-color), -8px 8px 10px 0px var(--outerline-color),  8px 8px 10px 0px var(--outerline-color),
        -8px  0px 10px 0px var(--outerline-color),  8px  0px 10px 0px var(--outerline-color),  0px 8px 10px 0px var(--outerline-color),  0px -8px 10px 0px var(--outerline-color);
    
}

.hor-line-on-edge {
    position: absolute;
    height: 8px;
    width: 100%;
    background-color: var(--outerline-inside-color);
    border-radius: 400px;
    opacity: 100%;
    box-shadow:
        -8px -8px 10px 0px var(--outerline-color),  8px -8px 10px 0px var(--outerline-color), -8px 8px 10px 0px var(--outerline-color),  8px 8px 10px 0px var(--outerline-color),
        -8px  0px 10px 0px var(--outerline-color),  8px  0px 10px 0px var(--outerline-color),  0px 8px 10px 0px var(--outerline-color),  0px -8px 10px 0px var(--outerline-color);

}

.portfolio-box-item {
    position: absolute;
    width: 400px;
    height: 300px;
    transition: transform 0.2s ease-in-out;
    background-color: rgba(128, 128, 128, 0.185);
    color: white;    
}

.text-box-portfolio {
    /* Apna Time Aayega is the song i'm listening to while making this portion of the code :P*/
    position: absolute;
    height:  300px;
    width: 200;
    top: 0;
    left: 0;
    padding: 20px;
    box-sizing: border-box;
    font-family: 'Comic Sans MS', cursive, sans-serif;
    text-align: center;
}

span {
    font-family:'Times New Roman', Times, serif;
    font-weight: bold;
}

.image-box-portfolio {
    /* Angels For Each Other -Martin Garrix and Arijit Singh is the song i'm listening to while making this portion of the code :P*/
    position: absolute;
    height:  300px;
    width: 200px;
    top: 0;
    right: 0;
    padding: 20px;
    box-sizing: border-box;
}

img {
    max-width: 120%; 
    max-height: 120%;
    object-fit: cover;
}

.portfolio-box-item:hover {
    transform: scale(1.2) !important;
}



.portfolio-border-vert {
    position: absolute;
    height: 100%;
    width: 3px;
    background-color: var(--inner-color-portfolio);
    border-radius: 400px;
    box-shadow:
        -8px -8px 10px 0px var(--outer-color-portfolio),  8px -8px 10px 0px var(--outer-color-portfolio), -8px 8px 10px 0px var(--outer-color-portfolio),  8px 8px 10px 0px var(--outer-color-portfolio),
        -8px  0px 10px 0px var(--outer-color-portfolio),  8px  0px 10px 0px var(--outer-color-portfolio),  0px 8px 10px 0px var(--outer-color-portfolio),  0px -8px 10px 0px var(--outer-color-portfolio);
    
}

.portfolio-border-hor {
    position: absolute;
    border-radius: 400px;
    background-color: var(--inner-color-portfolio);
    width: 100%;
    height: 3px;
    box-shadow:
        -8px -8px 10px 0px var(--outer-color-portfolio),  8px -8px 10px 0px var(--outer-color-portfolio), -8px 8px 10px 0px var(--outer-color-portfolio),  8px 8px 10px 0px var(--outer-color-portfolio),
        -8px  0px 10px 0px var(--outer-color-portfolio),  8px  0px 10px 0px var(--outer-color-portfolio),  0px 8px 10px 0px var(--outer-color-portfolio),  0px -8px 10px 0px var(--outer-color-portfolio);

}

.text-on-board {
  position: absolute;
  color: blue;
  font: 'Permanent Marker', 'Playpen Sans';
  font-weight: bold;
  font-size: 45px;
  text-shadow:
    -1px -1px 0 white,  1px -1px 0 white, -1px 1px 0 white,  1px 1px 0 white,
    -1px  0px 0 white,  1px  0px 0 white,  0px 1px 0 white,  0px -1px 0 white;
  text-wrap: nowrap;
}