:root{
  --stormy-teal: #16697aff;
  --pacific-blue: #489fb5ff;
  --sky-blue-light: #82c0ccff;
  --parchment: #ede7e3ff;

  
  --bg: var(--parchment);
  --bg-secondary: white;
  --text: rgb(28, 24, 24);
  --link: var(--stormy-teal);
  --link-hover: var(--pacific-blue);
  --btn-bg: var(--stormy-teal);
  --btn-bg-hover: var(--pacific-blue);
  --btn-text: #fff;
  --icon: rgb(28, 24, 24);
}


.dark-mode{
  /* --bg: #0f202a;  
  --bg-secondary:#98a6b1;       
  --text: white;       
  --link: rgb(34, 74, 84);       
  --link-hover: #35494d;  
  --btn-bg: var(--stormy-teal);  
  --btn-bg-hover: #35494d;
  --btn-text: #ffffff;
  --icon: rgb(241, 235, 235); */

  /* --stormy-teal: #0A3A44;
  --pacific-blue: #1E6F83;
  --sky-blue-light: #5AA7B6;
  --parchment: #CFC7C1;
  --bg: #071821;
  --bg-secondary: #0B2430;
  --text: #E7E1DC;
  --icon: #E7E1DC;
  --link: #7BC6D3;
  --link-hover: #9ADBE6;
  --btn-bg: #1E6F83;
  --btn-bg-hover: #2C8EA3;
  --btn-text: #071821;  */


  /* ============#=== */

  /* --stormy-teal: #123B46;
--pacific-blue: #1A6D80;
--sky-blue-light: #6FD1E3;
--parchment: #F2F6F9;

--bg: #070B10;
--bg-secondary: #0D151C;
--text: #F2F6F9;
--icon: rgba(242,246,249,0.60);

--link: #6FD1E3;
--link-hover: #9CEAF6;

--btn-bg: #1A6D80;
--btn-bg-hover: #23859A;
--btn-text: #FFFFFF; */

  /* ============#=== */

--stormy-teal: #123B46;
--pacific-blue: #1A6D80;
--sky-blue-light: #6FD1E3;
--parchment: #D7DEE3;


--bg: #070B10;
--bg-secondary: #0D151C;
--text: #F7FAFC;
--icon: rgba(228, 230, 232, 0.7);


--link: #6FD1E3;
--link-hover: #9CEAF6;

--btn-bg: #1A6D80;
--btn-bg-hover: #23859A;
--btn-text: #FFFFFF;

}


body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Ubuntu', sans-serif;
  overflow: hidden;
}

.card {
    background-color: var(--bg-secondary);
}


h2{
  color: var(--text) !important;
}

p{
  color: var(--text);
}

h1{
  color: var(--link);
}

.btn {
  background-color: var(--btn-bg);
  color: var(--btn-text);
  border: none; 
}

.btn:hover {
  background-color: var(--btn-bg-hover);
  color: var(--btn-text);
}

a{
  color: var(--link);
  text-decoration: none;
  font-weight: bold;
}

a:hover{
  color: var(--link-hover);
}


#theme-toggle{
    color: (--icon);
    font-size: 1.5rem;
    cursor:pointer;
    position: fixed;
    top: 30px;
    right: 40px;
    cursor: pointer;
    border: none;
    background: none;
    
}

#theme-icon{
  color: var(--icon);
}

.form-label{
  color: var(--text);
}