/* General */
body{
    background-color: white;
}
/* The emerging W3C standard
   that is currently Firefox-only */
* {
    scrollbar-width: thin;
    scrollbar-color: lightgray white;
}

/* Works on Chrome/Edge/Safari */
*::-webkit-scrollbar {
    width: 12px;
}


*::-webkit-scrollbar-thumb {
    background-color: lightgray;
    border-radius: 20px;
    border: 3px solid white;
}
  

hr {
    background-color: whitesmoke;
}

iframe{
    width: max(33.3vw, 324px);
    height: max(22.7vw, 135px);
}

img {
    pointer-events: none;
    user-select: none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
}

.shadowless {
    box-shadow: none!important;
}

.code-tags span{
    font-family: Consolas, monaco, monospace;
    padding: 2px;
    background-color: #b7e5c4;
    background-color: whitesmoke;
    margin-right: min(1vh, 1vw);
}

.my-highlight :hover{
    background-color: whitesmoke;
}


/* Header */
#my-title{
    font-size: 3em;
    text-align: center;
}

.my-header{
    font-size: 1.5em;
}


/* Nav Bar */

.my-nav a{
    color: black;
}

.my-nav img{
    height: min(10vh, 10vw);
    width: min(10vh, 10vw);
    position: relative;
}

.my-nav h2{
    text-align: center;
}

.my-nav-content {
    display: flex;
    justify-content: center;
}


.my-nav-content ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.my-nav-content li {
    font-size: min(3h, 3vw);
    float: left;
}


.my-nav-content li a {
    display: block;
    color: black;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

.my-nav-content li a:hover {
    background-color: whitesmoke;
}

/* tutorial nav */

.tutorial-nav {
    display: flex;
}


.tutorial-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.tutorial-nav li {
    float: left;
}


.tutorial-nav li a {
    display: block;
    padding: 16px;
    text-decoration: none;
}

.tutorial-nav a:hover {
    background-color: whitesmoke;
}



/* Other Project Reference Link */
.other-projects{
    margin-top: 2%;
    color: lightgray;
}

.other-projects ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.other-projects li {
    font-size: min(3.5vh, 3.5vw);
    float: left;
}


.other-projects li a {
    display: block;
    color: lightgray;
    padding: 16px;
    text-decoration: none;
}

.other-projects li a:hover{
    color: gray;
}

/* Copy Right Logo */
.my-copyright {
    text-align: center;
    font-size: 1em;
    color: black;
}

.float-right {
    float: right;
}