/* css reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}


/* page wide tags */
html {
    font-family: 'Roboto Mono', monospace;
}
a {
    text-decoration: none;
}
h1 {
    text-align: center;
    font-size: 100px;
}

/* class charachteristics */
.color-section-1 {
    color: rgb(0, 51, 146);
}
.color-section-2 {
    color: rgb(206, 101, 31);
}
.color-section-3 {
    color: rgb(119, 35, 21);
}
.color-section-4 {
    color:rgb(15, 136, 32);
}
.color-line-nums {
    color: rgb(133,133,133);
}
.color-comment {
    color: rgb(93,152,71);
}
.color-tag {
    color: rgb(215,185,129);
}
.color-bracket {
    color: rgb(255,213,58);
}
.color-name {
    color: rgb(139,220,218);
}
.white-text {
    color: rgb(212,212,212);
}
.center {
    border-left: 20vw;
}
.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 100;
}

div.section-body {
    padding-top: 50px;
}
.vertical-align {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
table.center {
    margin-left:auto; 
    margin-right:auto;
  }
a.top-menu {
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    height: 80%;
    text-align: center;
}
a.top-menu:hover {
    background-color: rgb(146, 146, 146);
    border-radius: 20px;
    border: 10px;
}
div.sbar1 {
    height: 1px;
    background-color: rgb(146,146,146);
}
div.sbar2 {
    height: 30px;
    background-color: rgb(75,75,75);
}
div.sbar3 {
    text-align: center;
    height: 30px;
    width: 100px;
    background-color: rgb(31,31,31);
}
div.sbar4 {
    background-color: rgb(31,31,31);
    color: rgb(90,90,90);
    font-size: 14px;
}
div.sbar5 {
    height: 5px;
    background: linear-gradient(rgb(20, 20, 20),rgb(31,31,31));
}
#nav {
    position: fixed;
    width: 100%;
    height: 200px;
    font-size: 50px;
    z-index: 10;
    background-color: rgb(52, 52, 52);
}
.line-nums{
    font-size: 16px;
    width: 30px;
    padding-right: 20px;
    text-align: right;
    float:left;
}
.indent {
    padding-left: 25px;
}
.bottom-bar {
    bottom: 100%;
    background-color: rgb(0,124,200);
    height: 30px;
    width: 100vw;
}
.section-body {
    height: calc(100vh - 80px);
}
/* id charachteristics */
#down-arrow {
    position: relative;
    text-align: center;
    top: 60vh;
}
#header-padding {
    width: fit-content;
    text-align: center;
    margin: auto;
}
#home {
    height: 100vh;
    background: rgb(31, 31, 31);
}
#home-button {
    font-size: inherit;
}
#preview-info {
    min-height: 100vh;
    background: rgb(31, 31, 31);
    color: rgb(0, 0, 0);
    font-size: 16px;
}
#preview-projects {
    height: 100vh;
    background-color: rgb(var(--c4));
}
#preview-inspirations {
    height: 100vh;
    background: linear-gradient(rgb(var(--c1)) ,rgb(var(--c5)) 1%);
}

div.project-preview-box {
    text-align: center;
    margin:auto;
    height: 30vh;
    width: 30vw;
    animation-name: projects-animation;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
div.project-preview-box:hover {
    height: 33vh;
    width: 33vw;
    border-radius: 0%;
}
td.project-preview-box {
    height: 38vh;
    width: 38vw;
}
a.project-preview-box {
    height: 33vh;
    width: 33vw;
}

.project-preview-banner {
    padding: 20px;
    background-color: rgba(0,0,0,0.3)
}

#algorithms-ppb {
    background-color: brown;
}
#School-ppb {
    background-color: brown;
}
#cubesat-ppb {
    background-color: brown;
}
#website-ppb {
    background-color: brown;
}
#right-bar-1{
    position:fixed;
    width: 15px;
    height: 25vh;
    right: 0px;
    background-color: rgb(0, 51, 146);
}
#right-bar-2{
    position:fixed;
    width: 15px;
    height: 25vh;
    top:25vh;
    right: 0px;
    background-color: rgb(206, 101, 31);
}
#right-bar-3{
    position:fixed;
    width: 15px;
    height: 25vh;
    top:50vh;
    right: 0px;
    background-color: rgb(119, 35, 21);
}
#right-bar-4{
    position:fixed;
    width: 15px;
    height: 25vh;
    top: 75vh;
    right: 0px;
    background-color: rgb(15, 136, 32);
}
#projects-title {
    text-align: center;
    font-size: 50px;
    transform: translateY(100px);
}

@keyframes projects-animation {
    from {border-radius: 0%;}
    to {border-radius: 20%;}
}