/*Personal CSS Style Sheet for my website. Based off of retro.css from */
:root{
  --Metallic-Black: #1C1C1C;
  --Metallic-Blackout: #161616;
  --Steel-Blue: #0b141b;
  --Crimson-Red: #DC143C;
  --Crimson-Red-Dark: #8b0e27;
  --Silver-Accent: #d4d4d4;

  
    --SiteColor1: var(--Metallic-Black);
    --SiteColor2: var(--Metallic-Blackout);
    --SiteColor3: var(--Silver-Accent);
  

}

pre,
code {
  font-family: "Courier New", Courier, monospace;
}
pre {
  padding: .5rem;
  line-height: 1.25;
}

a,
a:visited {
  color: var(--Crimson-Red);
}
a:hover,
a:focus,
a:active {
  color: var(--Crimson-Red);
}

html {
  font-size: 18px;
}

header{
  margin-bottom: 4%;
  border-bottom: var(--Crimson-Red) double 10px;
  background-color: var(--SiteColor2);
}

body {
  color: var(--SiteColor3);
  font-family: "Courier New";
  line-height: 1.5rem;
  background-color: var(--SiteColor1);
}

footer {
  margin-top: 10%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top: 3px solid var(--Crimson-Red);
  text-align: center;
  background-color: var(--SiteColor2);
}

p,
.retro-p {
  font-size: 1rem;
  margin-bottom: 1.3rem;

  max-width: 80ch;
}

li,
.retro-li {
  max-width: 60ch;
}

h1,
.retro-h1,
h2,
.retro-h2,
h3,
.retro-h3,
h4,
.retro-h4 {
  margin: 1.414rem 0 .5rem;
  font-weight: inherit;
  line-height: 1.42;
}
h1,
.retro-h1 {
  margin-top: 0;
  font-size: 3.998rem;
}
h2,
.retro-h2 {
  font-size: 2.827rem;
}
h3,
.retro-h3 {
  font-size: 1.999rem;
}
h4,
.retro-h4 {
  font-size: 1.414rem;
}
h5,
.retro-h5 {
  font-size: 1.121rem;
}
h6,
.retro-h6 {
  font-size: .88rem;
}
small,
.retro-small {
  font-size: .707em;
}

.favicon-header{
  fill: black;
  object-fit: contain;
  margin:0;
  width: 60%;
}

.site-nav{
  text-decoration: none;
}
.home-nav{
  text-decoration: none;
}

.header-card{
  text-align: left;
  border-radius: .5rem;
  background-color: var(--SiteColor1);
  padding-right:1rem;
  padding-left:1rem;
}

.header-card a{
  color: var(--SiteColor3);
}
.header-card a.home-nav{
  color: var(--Crimson-Red);
}

.project-card{
  padding: .75rem 1rem;
  border-radius: .5rem;
  width: 'auto';
  min-width: 400px;
  max-width:600px;
  background-color: var(--SiteColor2);
}
.project-card a{
  color: var(--Crimson-Red-Dark);
}

.project-type-header{
  color: var(--SiteColor3);
  font-size: 1.5rem;
  margin-bottom: .5rem;
}

.profile-picture {
    /* Sizing and Responsiveness */
    width:auto;
    min-width: 400px;
    max-width: 30%; 

    object-fit: cover;

    /* Appearance */
    border: 3px solid var(--Crimson-Red);
    border-radius: 50%; /* Rounded corners */
    padding: 5px;

    /* Centering */
    display: block;
    margin-right: 10px;
}

.gallery-picture {
    /* Sizing and Responsiveness */

    min-width: 400px;
    max-width: 50%; 
    height: auto;
    aspect-ratio: 1 / 1;

    object-fit: cover;

    /* Appearance */
    border: 3px solid var(--Crimson-Red);
    border-radius: 5%; /* Rounded corners */
    padding: 10px;

    /* Centering */
    display: block;
    margin-right: 10px;
}

.model-viewer{
  width: 800px;
  height: 50%;
  height: 700px;
  border: 4px solid var(--Crimson-Red);
  border-radius: 1rem;
}
.model-viewer::part(default-progress-bar) {
  background-color: var(--Crimson-Red);   /* Change the color */
  height: 10px;                     /* optional: rounded edges */
}

.gameframe {
  border: 5px solid var(--Crimson-Red); /* Change 'red' to any color (e.g., #4593c6, green, blue) */
  border-radius: 1rem;
}

.katex-equation{
  text-align: left;
  background-color: var(--SiteColor2);
  padding: .5rem;
  border: 1px double var(--Crimson-Red);
  border-radius: .5rem;
  display: inline-block;
  margin: 1rem 0;
}

.icon-link{
  height: 100px;
}

.flex-container-row-wrap {
    display: flex;
    flex-flow: row wrap; /* Prevents items from wrapping to the next line */
    justify-content: center;
    align-items: center;
    gap: 1rem; /* Space between items */
}

.flex-container-row-no-wrap {
    display: flex;
    flex-flow: row nowrap; /* Prevents items from wrapping to the next line */
    justify-content: center;
    align-items: center;
    gap: 1rem; /* Space between items */
}


.flex-container-row-no-wrap-end{
    display: flex;
    flex-flow: row nowrap; /* Prevents items from wrapping to the next line */
    justify-content: flex-end;
    align-items: center;
    gap: 1rem; /* Space between items */
    padding: 10px
}

.flex-container-space-evenly {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: center;
  margin: 0;
}

.flex-container-column {
    display: flex;
    flex-flow: column nowrap; 
    justify-content: center;
    align-items: center;
    text-align: left;
    gap: 1rem;
}

.flex-grow{
  flex-grow: 1;
}S

img,
canvas,
iframe,
video,
svg,
select,

textarea {
  max-width: 100%;
}

blockquote {
  border-left: 3px solid var(--Crimson-Red);
  padding-left: 1rem;
}