/*   BASE CSS STYLES */
:root {
    /* --color-dark: #22314E;
    --color-light: #FAF8D9; */
    /* --color-dark: #22314E;
    --color-light: #FAF8D9; */
    --color-dark: rgb(29, 29, 29);
    --color-light: rgb(255, 255, 255);
    --bar-selectw: rgb(184, 184, 184);
    --bar-selectb: rgb(3, 3, 3);
    --bar-bgon: rgb(231, 231, 231);
    --bar-bgoff: rgb(151, 151, 151);
    --bar-hover: rgb(121, 121, 121);
    --color-bgwin: rgb(178, 178, 178);
    /* --bar-bgoff-hover: rgb(173, 173, 173); */
    --color-navbar: rgb(70, 70, 255);
    --color-abtcpp: #f34b7d;
    --color-abtpy: #FFE467;
    --color-abtweb: #e34c26;
    --color-abtjava: #a86b14;
    --color-abtass: #459b14;
    --color-abtsql: #e4910b;
    --color-abtswift: #F05138;
    --color-abtts: #3178c6;
    --color-abtdart: #00B4AB;
    --color-abtmand: #EE1C25;
    --color-abttutor: #00b478;
    --color-abt3d: #456194;
    --color-abtgame: #5d00b4;
    --color-abtadobe: #bd4e4e;
    --color-abtandy: #A4C639;
    --color-abtlin: #5c5c5c;
    --color-abtfls: #1f8836;
    --color-abtadd1: #ff0000;
    --color-abtadd2: #ff6600;
    --color-abtadd3: #ffe600;
    --color-abtadd4: #5eff00;
    --color-abtadd5: #00ff73;
    --color-abtadd6: #00d9ff;
    --color-abtadd7: #0044ff;
    --color-abtadd8: #a200ff;
    --color-abtadd9: #ff00ea;
    --color-abtadd10: #ff0080;
    --color-abtluck: #ff3131;
}

::-webkit-scrollbar {
    width: 22px;
    z-index: -1;
}

/* Track */
::-webkit-scrollbar-track {
    /* box-shadow: inset 0 0 6px grey; */
    background-color: #999999;
    /* background-image: linear-gradient( #6c7cd6, #000099); */
    /* background: repeating-linear-gradient(
        to right,
        #747474, 
        #fde55a 20px,
        #6bcf19 20px,
        #23caca 40px
      ),
      repeating-linear-gradient(
        to bottom,
        #2358ca,
        #6b23ca 20px,
        #ca2392 20px,
        #000000 40px
      ); */
}

/* Handle */
::-webkit-scrollbar-thumb {
    background-color: #696969;
    /* background-color: #6c7cd6; */
    /* background-image: linear-gradient( #000099, #6c7cd6); */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background-color: #424242;
    /* background-image: linear-gradient(90deg, #000099, #6c7cd6); */
    /* box-shadow: inset 0 0 8px black; */

}

/* Arrows */
::-webkit-scrollbar-button {
    background-color: #000000;
    height: 20px;
  }

@font-face {
    font-family: "OSRS";
    src: url('runescape_bold.ttf');
}

@font-face {
    font-family: 'OSRS';
    src: url('/fonts/runescape_bold-webfont.woff2') format('woff2'),
        url('/fonts/runescape_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* CUSTOM html CLASSES  */
* {
    box-sizing: border-box;
}


/* swap all colors for dark theme toggle */
.dark-mode {
    /* --color-light: #22314E;
    --color-dark: #FAF8D9; */
    --color-light: rgb(32, 32, 32);
    --color-dark: rgb(240, 240, 240);
}

html {
    height: 100%;
    width: 100vw;
}

body {
    background-color: var(--color-dark);
    padding: 0%;
    margin: 0%;
    max-width: 100%;
    height: 96.2%;
    background-repeat: no-repeat;
    transition-duration: 0.4s;
    overflow-x: none;
}

/* should be the main window? */
main {
    width: 100%;
    height: 100%;
    background-color: var(--color-dark);
    padding: 0%;
    margin: 0%;
  
    z-index: 1;
    /* default to dark mode? */
    transition-duration: 0.4s;
    /* overflow: none; */
}

div.outerboarder {
    border: 4px solid grey;
    border-bottom: 18px solid grey;
    width: 100%;
    height: 100%;     
    margin-bottom: 31px;
   
}

div.innerborder {
    width: 100%;
    min-height: 92%;
    max-height: 92%;
    /* height: inherit; */
    border-bottom: 3px solid rgb(199, 199, 199);
    border-right: 3px solid rgb(199, 199, 199);
    border-left: 3px solid rgb(0, 0, 0);
    border-top: 3px solid rgb(0, 0, 0);  
    /* margin-bottom: 31px; */
    /* overflow: auto; */
    overflow-x: none;
    overflow-y: auto;
}

div.bg {
    background-image: 
        url('imgs/cool_blue_bg.png');
    /* background-image: 
        url('imgs/cool_blue_bg.png'); */
        /*background-image: 
        url('imgs/Matrix_Coding_Icon.gif');*/
    /* background-repeat: repeat;
    background-size: 300px 300px, 300px 300px, 300px 300px;
    background-position: 
        0 0,   
        300px 0, 
        600px 0;  */
    
    height: 100%;  
    margin: 0; 
}

main.mbg {
    /* stuff for main  */
    background-color: var(--color-light);
    transition-duration: 0.4s;
}


footer {
    background-color: var(--color-bgwin);
    text-align: center;
    padding: 4px;
    position: fixed;
    left: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 3.5%;
    /* border-top: 3px solid black; */
    /* z-index: 3; */
}

figure {
    margin-block-start: 0%;
    margin-block-end: 0%;
    margin-inline-start: 0%;
    margin-inline-end: 0%;
}

form {
    text-align: center;
    /* align-items: center; */
}



/* CUSTOM a CLASSES  */
a.unselected {
    text-decoration: underline;
    color: var(--color-navbar);
    transition-duration: 0.2s;
}

a.unselected:hover {
    color: rgb(32, 32, 250);
}

a.unselected:active {
    text-decoration: none;
    color: rgb(36, 36, 133);
    /* transition-duration: 0.2s; */
}

a.selected {
    text-decoration: none;
    color: var(--color-light);
    font-weight: bold;
    transition-duration: 0.4s;
}

a.eduschool {
    text-decoration: underline;
    color: #ba6cff;
    transition-duration: 0.2s;

}

a.eduschool:hover {
    color: #7821c4;
}


a.education {
    /* text-decoration: none; */
    color: var(--color-light);
    font-weight: bold;
    transition-duration: 0.4s;
}

a.time {
    height: 18px;
    width: 18px;
}

a.edulink {
    text-decoration: underline;
    color: rgb(247, 17, 17);
    transition-duration: 0.2s;
    font-weight: bold;
}

a.edulink:hover {
    color: rgb(243, 247, 17);
}

a.edulink:active {
    text-decoration: none;
    color: rgb(126, 17, 59);
    /* transition-duration: 0.2s; */
}

/* CUSTOM container CLASSES  */
div.ostext {
    font-family: 'Handjet';
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 1.4em;
    white-space: nowrap;

}

div.window {
    display: flex;
    justify-content: space-between;
    padding: 0.1%;
    padding-left: 0.4%;
    padding-right: 0.4%;
    margin: 0px;
    /* background-color: #0026ff; */
    background-image: linear-gradient(to right, #000099, #6c7cd6);
    /* background-image: linear-gradient(to right, #990000, #f15a5a); */
    /* width: 100%; */
    z-index: 1;
}

div.address {
    display: flex;
    justify-content: space-between;
    padding: 0.2%;
    padding-left: 0.4%;
    padding-right: 0.4%;
    margin: 0px;
    background-color: var(--color-bgwin);
    /* width: 99.2%; */
    z-index: 1;
}

div.addressbar {
    width: 70vw;
    padding-left: 1%;
    padding-right: 1%;
    border-bottom: 2px solid rgb(226, 226, 226);
    border-right: 2px solid rgb(226, 226, 226);
    border-left: 2px solid rgb(5, 5, 5);
    border-top: 2px solid rgb(5, 5, 5);
    background-color: #fcfdff;
    gap: 0.5rem;
}

div.maincontainer {
    display: flex;
    padding: 0%;
    margin: 0px;
    margin-bottom: 10px;
    max-height: 100vh;
    max-width: 100vw;

}

div.footcontainer {
    display: flex;
    padding: 0%;
    margin: 0px;

}

div.container {
    display: flex;
    padding: 0%;
    margin: 0px;
}

div.minicontainer {
    display:flex;
}

div.pad1 {
    padding-left: 1%;
    padding-right: 1%;
}

div.pad2 {
    padding-left: 2%;
    padding-right: 2%;
}

div.margt1 {
    margin-top: 1%;
}

div.blank {
    margin: 0%;
    padding: 0%;
}

/* jcenter for rows */
div.rows {
    flex-direction: row;
}

/* acenter for cols */
div.cols {
    flex-direction: column;
}


/* CUSTOM img CLASSES  */
img.header {
    width: 350px;
}

img.education {
    width: 100%;
    height: auto;
}




img.jview {
    width: 45px;
}

img.menuicon {
    height: 20px;
}

img.timeicon {
    height: 18px;
    width: 18px;
    /* padding: 0.5px; */
}

img.window {
    /* border: 2px solid black; */
    /* left: 5%; */
    height: 20px;
    /* align-content: center; */
    /* padding-top: 1px; */
}

img.address {
    /* border: 2px solid black; */
    position: relative;
    height: 20px;
    /* padding-left: 6px;
    padding-right: 6px; */
}

img.home {
    height: 27px;
    margin-right: 4px;
}

img.al {
    left: -15%;
}
img.ar {
    left: 15%;
}


/* CUSTOM heading CLASSES  */
h1 {
    color: #f52929;
}

h1.about {
    /* color: var(--color-light); */
    transition-duration: 0.4s;
    font-family: 'Bungee', sans-serif;
    font-weight: 400;
    font-size: 2.2em;
    margin: 0%;
    padding: 0%;
    height: 70px;

}

h6.about {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 500;
    color: var(--color-light);
    font-size: 1.2em;
    margin: 0px;
    transition-duration: 0.4s;
}

h6.title {
    font-size: 1.7em;
}

h6.body {
    font-size: 1.3em;
  
}

h6 a {
    text-decoration: none;
    color: #0026ff;
}




/* CUSTOM div CLASSES  */
div.text {
    color: var(--color-light);
    margin: 0;
    padding: 0;
    transition-duration: 0.4s;

}

div.paneldims {
    height: 500px;

}

div.qucomp {
    background-color: #ff6f00;
}

div.picube {
    background-color: #22314E;
    /* background: radial-gradient(circle , #474af0, #201b6e); */
    border: inset 3px rgb(211, 206, 255); 
    width: 1200px;
    height: auto;
}

div.youtube {
    background-color: #00ff44;
}



/* CUSTOM bar progress CLASSES  */
div.aboutbar {
    color: black;
    /* background-color: rgb(24, 24, 24); 
    would need to change text color too */
    margin-top: 1%;
    /* overflow: visible; */
    white-space: nowrap;
    position: relative;
    
}

span.progress {
    position: absolute;
    left: 50%;
    color: var(--color-light);
    transition-duration: 0.4s;
}

span.progressfull {
    position: absolute;
    left: 50%;
    transition-duration: 0.4s;
}

span.pi {
    font-size: 1.3em;
}

span.smallpi {
    font-size: 1.1em;
}

div.aboutcpp {
    border: 4px solid var(--color-abtcpp);
    border-radius: 0px;
}

div.aboutfillcpp {
    background-color: var(--color-abtcpp);
    width: 24%;
}

div.aboutpy {
    border: 4px solid var(--color-abtpy);
    border-radius: 0px;
}

div.aboutfillpy {
    background-color: var(--color-abtpy);
    width: 22%;
}

div.aboutweb {
    border: 4px solid var(--color-abtweb);
    border-radius: 0px;
}

div.aboutfillweb {
    background-color: var(--color-abtweb);
    width: 21%;
}

div.aboutjava {
    border: 4px solid var(--color-abtjava);
    border-radius: 0px;
}

div.aboutfilljava {
    background-color: var(--color-abtjava);
    width: 12%;
}

div.aboutsql {
    border: 4px solid var(--color-abtsql);
    border-radius: 0px;
}

div.aboutfillsql {
    background-color: var(--color-abtsql);
    width: 10%;
}

div.aboutass {
    border: 4px solid var(--color-abtass);
    border-radius: 0px;
}

div.aboutfillass {
    background-color: var(--color-abtass);
    width: 5.85%;
}

div.aboutswift {
    border: 4px solid var(--color-abtswift);
    border-radius: 0px;
}

div.aboutfillswift {
    background-color: var(--color-abtswift);
    width: 3.5%;
}

div.aboutts {
    border: 4px solid var(--color-abtts);
    border-radius: 0px;
}

div.aboutfillts {
    background-color: var(--color-abtts);
    width: 3.1%;
}

div.aboutdart {
    border: 4px solid var(--color-abtdart);
    border-radius: 0px;
}

div.aboutfilldart {
    background-color: var(--color-abtdart);
    width: 1.8%;
}

div.aboutmand {
    border: 4px solid var(--color-abtmand);
    border-radius: 0px;
}

div.aboutfillmand {
    background-color: var(--color-abtmand);
    width: 5%;
}

div.about3d {
    border: 4px solid var(--color-abt3d);
    border-radius: 0px;
}

div.aboutfill3d {
    background-color: var(--color-abt3d);
    width: 28%;
}

div.abouttutor {
    border: 4px solid var(--color-abttutor);
    border-radius: 0px;
}

div.aboutfilltutor {
    background-color: var(--color-abttutor);
    width: 22%;
}

div.aboutgame {
    border: 4px solid var(--color-abtgame);
    border-radius: 0px;
}

div.aboutfillgame {
    background-color: var(--color-abtgame);
    width: 16%;
}

div.aboutadobe {
    border: 4px solid var(--color-abtadobe);
    border-radius: 0px;
}

div.aboutfilladobe {
    background-color: var(--color-abtadobe);
    width: 12.1%;
}

div.aboutandy {
    border: 4px solid var(--color-abtandy);
    border-radius: 0px;
}

div.aboutfillandy {
    background-color: var(--color-abtandy);
    width: 5.75%;
}

div.aboutlin {
    border: 4px solid var(--color-abtlin);
    border-radius: 0px;
}

div.aboutfilllin {
    background-color: var(--color-abtlin);
    width: 5%;
}

div.aboutfls {
    border: 4px solid var(--color-abtfls);
    border-radius: 0px;
}

div.aboutfillfls {
    background-color: var(--color-abtfls);
    width: 8.4%;
}

div.aboutadd1 {
    text-align: center;
    border: 4px solid var(--color-abtadd1);
    border-radius: 0px;
    background-color: var(--color-abtadd1);
}

div.aboutadd2 {
    text-align: center;
    border: 4px solid var(--color-abtadd2);
    border-radius: 0px;
    background-color: var(--color-abtadd2);
}

div.aboutadd3 {
    text-align: center;
    border: 4px solid var(--color-abtadd3);
    border-radius: 0px;
    background-color: var(--color-abtadd3);
}

div.aboutadd4 {
    text-align: center;
    border: 4px solid var(--color-abtadd4);
    border-radius: 0px;
    background-color: var(--color-abtadd4);
}

div.aboutadd5 {
    text-align: center;
    border: 4px solid var(--color-abtadd5);
    border-radius: 0px;
    background-color: var(--color-abtadd5);
}

div.aboutadd6 {
    text-align: center;
    border: 4px solid var(--color-abtadd6);
    border-radius: 0px;
    background-color: var(--color-abtadd6);
}

div.aboutadd7 {
    text-align: center;
    border: 4px solid var(--color-abtadd7);
    border-radius: 0px;
    background-color: var(--color-abtadd7);
}

div.aboutadd8 {
    text-align: center;
    border: 4px solid var(--color-abtadd8);
    border-radius: 0px;
    background-color: var(--color-abtadd8);
}

div.aboutadd9 {
    text-align: center;
    border: 4px solid var(--color-abtadd9);
    border-radius: 0px;
    background-color: var(--color-abtadd9);
}

div.aboutadd10 {
    text-align: center;
    border: 4px solid var(--color-abtadd10);
    border-radius: 0px;
    background-color: var(--color-abtadd10);
}

div.aboutluck {
    border: 4px solid var(--color-abtluck);
    border-radius: 0px;
}

div.aboutfillluck {
    background-color: var(--color-abtluck);
    width: 10%;
}

div.aboutskill {
    border: 4px solid var(--color-abtluck);
    border-radius: 0px;
}

div.aboutfillskill {
    background-color: var(--color-abtluck);
    width: 20%;
}

div.aboutwill {
    border: 4px solid var(--color-abtluck);
    border-radius: 0px;
}

div.aboutfillwill {
    background-color: var(--color-abtluck);
    width: 15%;
}

div.aboutpls {
    border: 4px solid var(--color-abtluck);
    border-radius: 0px;
}

div.aboutfillpls {
    background-color: var(--color-abtluck);
    width: 5.2%;
}

div.aboutpain {
    border: 4px solid var(--color-abtluck);
    border-radius: 0px;
}

div.aboutfillpain {
    background-color: var(--color-abtluck);
    width: 50%;
}

div.aboutrem {
    border: 4px solid var(--color-abtluck);
    border-radius: 0px;
}

div.aboutfillrem {
    background-color: var(--color-abtluck);
    width: 100%;
}

code {
    /* padding: 2px; */
}

/* for footing, theme popup menu on select */
div.themes {
    background-color: rgb(149, 149, 149);
    border-left: 2px solid var(--bar-selectw);
    border-top: 2px solid var(--bar-selectw);
    border-right: 2px solid var(--bar-selectb);
    border-bottom: 2px solid var(--bar-selectb);
    border-width: 2px;
    bottom: 35px;
    min-width: 180px;
    position: absolute;
    display: block;
    z-index: 1;
}

p.edubody {
    font-size: 1em;
    font-weight: normal;
    text-align: left;

}

p.idklol {
    font-size: 0.5em;
    text-align: right;
}

p.resulturl {
    color: green;
    margin: 0;
    padding: 0;
}

/* CUSTOM THEME testing themeing menu pop up stuff */
div.themecontainer {
    display: table;
    position: relative;
    width: 100%;
}

div.themeitem {
    display: table-cell;
    vertical-align: bottom;
}

.themeitem ul li {
    height: 40px;
    touch-action: manipulation;
    width: 100%;
}

ul {
    width: 100%;
    box-sizing: border-box;
}

li,
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    display: list-item;

}

.themeitem-container {
    display: table;
    height: 100%;
    width: 100%;
}

.themeitem-icon {
    display: table-cell;
    padding-left: 10px;
    vertical-align: middle;
}

.themeitem-graphic {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 16px;
    width: 16px;
}


/* CUSTOM span CLASSES  */
span.white {
    color: var(--color-light);
    transition-duration: 0.4s;
}

span.windowbar {
    color: white;
    /* margin-left: 50%; */
    /* border: 2px solid black; */
}

span.label {
    display: table-cell;
    padding-left: 10px;
    vertical-align: middle;
    width: 100%;
}

span.mandarin {
    font-size: 0.7em;
}

span.mandy {
    color: #FFFF00;
}

span.subtitle {
    font-size: 1.4em;
    font-weight: 700;
}

span.time {
    /* height: 18px; */
    width: 18px;
}

/* CUSTOM button CLASSES  */
button.info {
    margin-left: 5px;
    margin-right: 5px;
}

button.education {
    border-radius: 2px;
    background-color: var(--color-dark);
    /* border-left: 2px solid var(--bar-selectw);
    border-top: 2px solid var(--bar-selectw);
    border-right: 2px solid var(--bar-selectb);
    border-bottom: 2px solid var(--bar-selectb); */
}

button.goo {
    border-radius: 0px;
    background-color: var(--bar-bgoff);
    border-left: 2px solid var(--bar-selectw);
    border-top: 2px solid var(--bar-selectw);
    border-right: 2px solid var(--bar-selectb);
    border-bottom: 2px solid var(--bar-selectb);
}

button.goo:hover {
    background-color: var(--bar-hover);
}

button.goo:active {
    background-color: rgb(97, 97, 97);
}


button.menuitemon {
    border-left: 2px solid var(--bar-selectb);
    border-top: 2px solid var(--bar-selectb);
    border-right: 2px solid var(--bar-selectw);
    border-bottom: 2px solid var(--bar-selectw);
    font-family: 'OSRS';
    font-size: 1.25em;
    background-color: var(--bar-bgon);
    color: var(--bar-selectb);
}

button.menuitemon:hover {
    background-color: var(--bar-hover);
}

button.menuitemoff {
    border-left: 2px solid var(--bar-selectw);
    border-top: 2px solid var(--bar-selectw);
    border-right: 2px solid var(--bar-selectb);
    border-bottom: 2px solid var(--bar-selectb);
    font-family: 'OSRS';
    font-size: 1.25em;
    background-color: var(--bar-bgoff);
    color: #ffffff;
}

button.menuitemoff:hover {
    background-color: var(--bar-hover);
}

button.bacenter {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 3px;
    padding-right: 3px;
    border-left: 2px solid var(--bar-selectw);
    border-top: 2px solid var(--bar-selectw);
    border-right: 2px solid var(--bar-selectb);
    border-bottom: 2px solid var(--bar-selectb);
    background-color: var(--bar-bgoff);
   justify-content: center;
}

/* button.bacenter:hover {
    background-color: var(--bar-hover);
} */

button.time {
    border-left: 2px solid var(--bar-selectb);
    border-top: 2px solid var(--bar-selectb);
    border-right: 2px solid var(--bar-selectw);
    border-bottom: 2px solid var(--bar-selectw);
    font-family: 'OSRS';
    font-size: 1em;
    background-color: var(--bar-bgon);
    color: var(--bar-selectb);
    padding: 1.5px;
    /* vertical-align: middle; */
}

button.tab {
    display: table;
}

button.f {
    display: flex;
}

button.borderon {
    border-left: 2px solid var(--bar-selectw);
    border-top: 2px solid var(--bar-selectw);
    border-right: 2px solid var(--bar-selectb);
    border-bottom: 2px solid var(--bar-selectb);
}

button.borderoff {
    border-left: 2px solid var(--bar-selectb);
    border-top: 2px solid var(--bar-selectb);
    border-right: 2px solid var(--bar-selectw);
    border-bottom: 2px solid var(--bar-selectw);
}
/* CUSTOM input CLASSES - goobar  */
input.goobar {
    border-left: 2px solid var(--bar-selectb);
    border-top: 2px solid var(--bar-selectb);
    border-right: 2px solid var(--bar-selectw);
    border-bottom: 2px solid var(--bar-selectw);
    width: 55%;
    margin: 3px;
    margin-left: 20%;
    background-color: rgb(255, 255, 255);
}

input.gooeybar {
    border-left: 2px solid var(--bar-selectb);
    border-top: 2px solid var(--bar-selectb);
    border-right: 2px solid var(--bar-selectw);
    border-bottom: 2px solid var(--bar-selectw);
    width: 100%;
    margin: 3px;
    background-color: rgb(255, 255, 255);
}


/* CUSTOM extra other CLASSES  */
select.goolang {
    border-radius: 0px;
    border: none;
    text-decoration: underline;
    background-color: rgba(255, 255, 255, 0);
    color: var(--color-navbar);
    /* border-left: 2px solid var(--bar-selectb);
    border-top: 2px solid var(--bar-selectb);
    border-right: 2px solid var(--bar-selectw);
    border-bottom: 2px solid var(--bar-selectw); */
}

select.addressbar {
    /* position: relative; */
    /* left: 87%; */
    padding-left: 0%;
    /* padding-right: .5%;*/
    padding-top: .18%;
    margin-left: 56.5vw;
    /* padding-bottom: .5%;  */
    background-color: var(--color-bgwin);

}

.info {
    color: var(--color-dark);
    font-family: 'Chakra Petch';
    font-weight: 700;
    text-shadow: 1.7px 1.7px 2px#ff6f00;
}

input[type="text"][disabled] {
    color: black;
}

.cubebg {
    /* background-color: var(--color-light); */
    transition-duration: 0.6s;
}

ul hr {
    margin: 0;
    margin-left: 2%;
    padding: 0;
    width: 94%;
    border-color: var(--bar-bgoff);
}

hr.about {
    margin: 0;
    margin-top: 3%;
    margin-bottom: 2%;
    padding: 0;
    border-style: solid;
    border-color: var(--bar-bgoff);
}

/* EDUCATION CLASSES */
div.coursetitle {
    width: 40%;
    height: 250px;
    background-color: #c85656;
}

div.coursefont {
    font-size: 2.5em;
    font-family: 'Black Ops One';
}

div.coursehome {
    font-size: 2em;
    font-family: 'Chakra Petch';
}

div.coursecat {
    width: 40%;
    height: fit-content;
    background-color: #c85656;
}

div.coursem {
    margin-top: 10%;
    margin-left: 4%;
    /* margin-right: 4%; */
}

div.embed {
    margin: 2%;
    padding: 1%;
    width: 100%;
    border: 1.5px solid black;

}


div.embedtitle {
    padding: 1%;
    font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', 'Nimbus Sans L', sans-serif;
    font-weight: bold;
    font-size: 1.2em;
}


hr.embed {
    border-color: rgb(3, 3, 3);
    border-style: solid;
    margin: 2%;

}

embed {
    width: 100%;
    min-height: 400px;
    padding: 2%;

}

iframe {
    /* padding: 2%; */
    /* border: solid 2px #201b6e; */
}

iframe.cst {
    margin-right: 11px;
}

pre {
    width: 100%;
    height: 650px;
    /* overflow-x: scroll; */
    overflow: auto;
    /* font-size: 0.7em; only inline works?? */
}

code {
    padding-left: 2%;
    padding-right: 2%;  

}

.content {
    width: 800px;
    border: #fff 1 px solid;
    margin: auto;
    text-align: center;
    justify-content: center;      
}
img.rainbow_line {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 15px;
}

img.welcome {
    width: 35%;
    height: auto;
}

img.cst {
    height: 50px;
    width: auto;
}


marquee {
    font-size: 2em;
    font-weight: bold;
    width: 90%;
    background: radial-gradient(circle , #474af0, #201b6e); 
    padding: 8px;
    border: inset 3px white;
    margin-right: 15px;
}

.sixtyfour {    
    font-family: "Sixtyfour Convergence", sans-serif;    
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "BLED" 0,
      "SCAN" 0,
      "XELA" 0,
      "YELA" 0;
  }
img.line {
    
    width: 100vw;
}

img.rotatey {
    transform: rotateY(180deg);
  }

div.embedded {
    font-size: 1.2em;
    font-family: Helvetica, sans-serif;
    background: radial-gradient(circle , #474af0, #201b6e);
    color: white;
    width: 90%;
    /* padding: 10px; */
    border: inset 3px white;
    margin: 8px;
    margin-left: 4%;    
}

div.embedtitle {
    padding: 1%;
    font-weight: bold;
    font-size: 1.2em;
}

#currtime {
    /* display: inline-block; */
    padding-bottom: 1%;
}

/* CSS SINGLES  */
.invis {
    visibility: hidden;
}

.small1 {
    font-size: 0.5em;
}


.big2 {
    font-size: 2em;
}

.jspace {
    justify-content: space-evenly;
}

.jcenter {
    justify-content: center;
}

.jright {
    justify-content: right;
}

.jleft {
    justify-content: left;
}

.acenter {
    align-items: center;
}

.aleft {
    align-items: left;
}

.aright {
    align-items: right;
}

.tcenter {
    text-align: center;
}

.tleft {
    text-align: left;
}

.tright {
    text-align: right;
}

.icenter {
    justify-items: center;
}

.dmargin {
    margin: 5px;
}

.sgap {
    gap: 2px;
}

.ofxscroll {
    overflow-x: scroll;
}

#addressmargin {
    margin-right: 10px; 
}

.dmarginr {
    margin-right: 10px !important; 
}

.mainbotmargin {
    margin-bottom: 10px;
}

.dpadding {
    padding: 5px;
}

.medpadding {
    padding: 10px;
}


.headingh {
    height: 278px;
}

.indexw {
    width: 560px;
}

.eduw {
    width: 300px;
}

.edubodyw {
    width: 520px;
}

.fixedw {
    width: 600px;
}

.aboutw {
    width: 800px;
}

.projectsw {
    width: 500px;
}

/* absolute position from edges of page */
.shiftr {
    position: absolute;
    left: 500px;
}

.fixedh {
    height: 500px;
}

.validw {
    width: 10px;
    ;
}
.flex {
    display: flex;
}


.fright {
    float:right;
    /* margin-left: auto; */
}

.fleft {
    float: left;
}

.wordwrap {
    inline-size: 940px;
    overflow-wrap: break-word;
}


/* TESTING */

.test {
    border-radius: 3px;
    border: 2.5px solid #000000;
}

.test1 {
    border-radius: 3px;
    border: 2.5px solid #c85656;
}

.test2 {
    border-radius: 3px;
    border: 2.5px solid #6160be;
}


.test3 {
    border-radius: 3px;
    border: 2.5px solid #37cd80;
}