:root {
    /* Baground color for page and base text color for page*/
  --bg: #ffffff;
  --text-color: #4c5c68;
  /* main color */
  --primary-color: #1985a1;
  /* color for card backgrounds*/
  --card-bg: #f1f1f1;
}

header {
  text-align: center; 
  font-size: 1rem;
}

/*contact info class*/
.contact-info{
    border-collapse: separate;
    padding-bottom: 15px;
    margin: 0 auto;
    font-size: 1rem;
}
/*main body of html file*/
body{
    /* set main font for the page */
    font-family: 'Trebuchet MS','Segoe UI', sans-serif;

    /*formatting, give lines room to breath and tighen margins*/
    line-height: 1.4;
    margin: 0;

    /*set background color and text color of body elements*/
    background-color: var(--bg);
    color: var(--text-color)
}

/*main body of html file*/
body.dark-mode{
       /* Baground color for page and base text color for page*/
  --bg: #515151;
  --text-color: #ffffff;
  /* main color */
  --primary-color: #1985a1;
  /* color for card backgrounds*/
  --card-bg: #5c5b5b;
}

/*main container for resume body*/
.container{
    /*set max width of resume*/
    max-width: 900px;
    /*center resume on page (0 margin top and bottom, auto centered on sides)*/
    margin: 0 auto
}

.theme-toggle {
    appearance: none;      
    -webkit-appearance: none; 
    background-color: transparent;
    border: 0;
    width: auto;
    height: auto;
}

.mode-icon {
    position: fixed;
    bottom: 20px;
    right: 15px;
    width: 50px; 
    height: auto; 
    
    z-index: 1000; /* Ensures it stays on top of other elements */
    transition: transform 0.2s ease;
}

.mode-icon:hover {
    transform: scale(1.1); /* Subtle pop on hover */
}

/*project cards*/
.project-card{
    /*set unique background color and color highlight*/
    background-color: var(--card-bg);
    border: 2px solid var(--primary-color);

    /*padding protecting div content from div*/
    padding: 10px;

    /*padding to come after div box, separating project cards*/
    margin-bottom: 20px;

    /*give the edges of the div a nice curve*/
    border-radius: 10px;


    transition: transform 0.3s, box-shadow 0.5s;
    
    cursor: pointer;
    
}

/*section cards*/
.section-card{
    /*set unique background color and color highlight*/
    background-color: var(--card-bg);
    border-top: 4px solid var(--primary-color);

    /*padding protecting div content from div*/
    padding: 10px;

    /*padding to come after div box, separating project cards*/
    margin-bottom: 20px;

    /*x offset / y offset / blur / spread 0 0 15 5 for center shadow*/
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);
    
    
}

/*hover, build in function, change elements to this code when hover over project card*/
.project-card:hover{
    /*change how elements in project card look when they are hovered over*/
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}



/*table class*/
.table-class{
    border-collapse: separate;
    border-spacing: 5px;
    margin: 0 auto;
}

/*table item*/
.table-class td{
    padding: 10px;
}


/*general headers*/
h2 {
      text-align: center;
    }