/* potential colors: #, #AF9164, #2B2118 (maro inchis), #F7F3E3 (alb galbui), #BBB193 (bej), #5E807F (turcuaz inchis), #464B4D (gri albastrui)
  #EAE8FF (alb movaliu), #D8D5DB (-//-), #ADACB5 (gri deschis albastrui), #2D3142 (visiniu), #B0D7FF (albastru senin)

  nice greenish-turqouise color 04AA6D
  whitebg: #73726F, #
body{background-color:#2e2e2e; }h1{color:#fe6f28; }p{color:#f8f8ff;}
h2{color:#f8f8ff;}h3{color:#f8f8ff;}h4{color:#f8f8ff;}h5{color:#f8f8ff;}*/


/*I like to tinker and work on new projects. For a couple of months now I've worked on my own website (https://hexafobia.tech/) to serve as a cover letter. 

Skills:
- front end (html, php, css)
- C++, C (Arduino)
- Linux (VM, Raspberrry Pi, Personal laptop)
- Website deployment (local machine/VM, AWS + Cloudflare)
- Soldering, Network cabling*/

*{
	box-sizing:border-box;
  padding: 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}

html {
  scroll-behavior: smooth;
}


body{ 
  background-color: var(--bg);
  min-height: 100vh;
  display: flex;
}
a{
  position: relative;
  display: inline-block;
}

h1 {color: var(--acchot);}
p,li,h2,h3,h4,h5 {color: var(--txt); }
p {size: 25px;  margin: 1rem 0;}
li{margin-left: 0.75%;}
img{
  max-width: 100%;
}
img{
  max-width: min(100%,1250px);
}

a:link {
  color: var(--acc2);
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: var(--acc2);
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: var(--accmute);
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: var(--txt);
  background-color: transparent;
  text-decoration: underline;
}

span.acchot {
  color: var(--acchot);
}
.acchot-color {
  color: var(--acchot);
}
.acc2-color {
  color: var(--acc2);
}
.acchot-underline{
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--acchot);
}
.bigger{
  font-size: larger;
}

button.close{
  position: absolute;
  right: 15px;
  top: 15px;
  padding: 11px 11px 10px 12px;
}


/* -- ABOUT - FORM -- */

.contact span#contact{
  font-size: 25px;
  color: var(--acchot);
}

input[type=email], input[type=password], input[type=text], input[type=number], textarea, input[type=file], .file-label {
  background-color: var(--bg);
  width: 250px;
  padding: 12px 20px;
  margin: 28px 0;
  box-sizing: border-box;
  border: 1px solid var(--acc2);
  transition: width 0.4s cubic-bezier(0.42, 0, 0.15, 1.4);
  border-radius: 5px;
  display: block;
  color: var(--txt);
}
::placeholder {
  color: var(--txt);
  opacity: 0.75;
}

input[type=email]:focus, input[type=password]:focus, input[type=text]:focus, input[type=number]:focus, textarea:focus,
input[type=email]:not(:placeholder-shown),input[type=password]:not(:placeholder-shown),input[type=text]:not(:placeholder-shown),input[type=number]:not(:placeholder-shown),textarea:not(:placeholder-shown)
{
  width: max(5rem, 100%);
}

select[multiple]{
  width: min(250px, 100%);
  height: 3rem;
  padding: 12px 20px;
  margin: 20px 0;
  -moz-appearance: menulist;
  -webkit-appearance: menulist;
  appearance: menulist;
}
select{
  background-color: var(--bg);
  color: var(--txt);
  width: 250px;
  padding: 12px 20px;
  margin: 28px 0;
  box-sizing: border-box;
  border: 1px solid var(--acc2);
  border-radius: 5px;
}

select option{
  padding: .4rem .6rem;
}

select::part(listbox) {
  padding: .6rem;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 2px;
  background-color: var(--bgli);
}

.form-container {
  width: 50%;
  min-width: 250px;
  margin: 0 auto;
}

.form-group {
  position: relative;
}

label{
  color: var(--txt);
}

.form-group label {
  position: absolute;
  pointer-events: none;
  transition: all 0.2s ease-in-out;
  opacity: 0.85;
  font-size: 18px;
}

.form-group select + label,
.form-group input + label{
  top: 10px;
  left: 20px;
}
.form-group textarea + label{
  top: 15px;
  left: 20px;
}

.form-group select:focus + label,
.form-group input:focus + label,
.form-group textarea:focus + label{
  top: -22px;
  left: 16px;
  font-size: 14px;
  opacity: 1;
  color: var(--accmute);
}

.form-group input:placeholder-shown + label {
  top: 10px;
}
.form-group textarea:placeholder-shown + label {
  top: 15px;
}

.form-group input:not(:placeholder-shown) + label,
.form-group textarea:not(:placeholder-shown) + label {
  top: -22px;
  left: 16px;
  font-size: 14px;
  opacity: 1;

}

.form-group input:placeholder-shown + label,
.form-group textarea:placeholder-shown + label {
  left: 15px;
  font-size: 16px;
  opacity: 0.85;
}

#contact span{
  color: var(--acchot);
  font-size: 32px;
  margin-top: 10px;
}



/* chatGPT
form label {
  position: absolute; /* set the position as absolute 
  top: 10px; /* set the initial top position 
  left: 10px; /* set the initial left position 
  pointer-events: none; /* make the label unclickable 
  transition: 0.2s ease all; /* add a transition effect 
}

form input[type="text"], form textarea {
  padding: 10px; /* add some padding 
  margin-bottom: 20px; /* add some margin to the bottom 
  border: none; /* remove the border 
  border-radius: 5px; /* add some border radius 
  box-shadow: 0px 0px 5px #cccccc; /* add some box shadow 
}

form input[type="text"]::placeholder, form textarea::placeholder {
  color: #cccccc; /* set the placeholder text color 
}

form input[type="text"]:focus + label, form textarea:focus + label {
  top: -20px; /* move the label to the top of the field when focused on 
  left: 10px; /* set the left position 
  font-size: 0.8em; /* reduce the font size 
  color: blue; /* change the color of the text 
}

*/

.main{
  width: 100%;
  padding: 0px;
  margin: 0;
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
}

#menu{
  box-shadow: 0 0 10px var(--shadow), 0 0 20px var(--shadow);
}
.content{
  margin: 1rem 2rem;
  padding: 0.5% 1%;
  width: calc(100% - 4rem);
  /* border: 1px solid black; */
}

/* ------- INDEX ------- */

.grid#home{
  gap: 1rem;
  padding: 2rem;
}
#home .title{
  margin: 1rem 0.2rem;
}

#home img{
  width: 100%;
}

@media screen and (min-width:700px) {
  .grid#home{
    grid-template-columns: 70% 30%;
  }
  .grid#home > :nth-child(1){
    grid-column: 2 / span 1;
  }
  .grid#home > :nth-child(2){
    grid-row: 1/span 1;
  }
  .shadow {
    height: 20rem;
    width: 28%;
  }
  .teaser {
    max-height: 20rem;
  }
}
@media screen and (max-width:700px) {
  .grid#home{
    grid-template-columns: 1fr;
  }
  .shadow {
    height: 12rem;
    width: 90%;
  }
  .teaser {
    max-height: 12rem;
  }
}

.content#text { position:relative; }

.shadow {
  -webkit-box-shadow: inset 0 -20px 10px -10px var(--bg);
  -moz-box-shadow: inset 0 -20px 10px -10px var(--bg);
  box-shadow: inset 0 -20px 10px -10px var(--bg);
  z-index: 2;
  position:absolute;
}

.teaser {
  overflow: hidden;
  z-index: 0;
}

#text h5{
  position: relative;
  display: block;
}

.content .title{
  margin: 10px 0;
}

img{
  object-fit: cover;
}
#contact-photo{
  height: 250px;
  width: 100%;
  border: 2px solid var(--acchot);
  border-radius: 5px;
  object-fit: cover;
}

.cookiepopup.fix{   /*popup on pages */
  position: sticky;
  bottom: 0;
  left: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
  z-index: 5;
}
.cookiepopup{     /*popup on cookies page*/
  margin: 0px;
  padding: 1.25em;
  box-sizing: border-box;
  background-color: var(--bgli);
  position: relative;
  width: 100%;
  border-radius: 5px;
  margin-top: 0;
  margin-bottom: 15px;
}

.cookiepopup button{
  margin-top: 1.25em;
}

.cookiepopup button#decline-button{
  margin: 0;
  position: absolute;
  right: 25px;
  top: 35px;
  padding: 12px 15px;
}

.cookiepopup.fix p{
  margin-right: 60px;
}

/*.cookiepopup button#submit-button*/

button{
  background-color: var(--accmute);
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 15px;
  border: 0;
  position: relative;
}
input[type=submit]{
  font-size: 15px;
  background-color: var(--bgli);
  border: 2px solid var(--acc2);
  border-radius: 5px;
  color: var(--accmute);
}


/* -- PORTFOLIO -- */

.content.showcase{
/*  border: 1px solid var(--txt);*/
  padding-top: 20px;
  margin-top: 20px;
  border-radius: 5px;
    margin: 20px 10px 0;
}

/* .content .gallery{
 border: 1px solid var(--accmute);
} */

/* ------ move text on portfolio page (fail) ------ */
.showcase span{
  color: var(--acchot);
  /* position: absolute; */
  font-size: 1em;
  transition-duration: 1s;
}

div.showcase:hover ~ span{
  transform: translateY(-20px), translateX(20px);
  padding: 0 10px;
  letter-spacing: 0.2em;
  border-left: 1px solid var(--acchot);
  border-right: 1px solid var(--acchot);
  text-transform: uppercase;
  background: var(--bg);
  font-size: 0.65em;
}

button,input[type=submit]{
  padding: 15px 30px;
  margin: 5px 1px 0 1px; 
  letter-spacing: 2px;
  text-decoration: none;
  overflow: hidden;
  border-radius: 5px;
  transition: 0.2s;
}

button:hover,input[type=submit]:hover{
  color: var(--bg2);
  background-color: var(--acc2);
  box-shadow: 0 0 10px var(--acc2), 0 0 20px var(--acc2), 0 0 40px var(--acc2);
}
button:hover{
  transition-duration: 0.5s;
}

button.active{
  color: var(--acchot);
  background-color: var(--txt);
}



/* ------ footer ------ */

.footer{
  padding: 15px;
  margin: 0 6px;
  margin-top: 2vh;
  width: calc(100% - 12px);
  display: flex;
  background-color: var(--bgli);
  box-shadow: 0 0 10px var(--bgli), 0 0 20px var(--bgli), 0 0 40px var(--bgli);
}
.footer .c1, .footer .c2, .footer .c3, .footer .c4{
  padding: 2px 8px;
  /* border: 1px solid black; */
  display: block;
  margin: 1%;
}
.footer .c1{
  width: 40%;
}
.footer .c2, .footer .c3, .footer .c4{
  width: 19%;
}
.c2 a, .c3 a{
  margin-top: 5px;
}

/* ------ about ------ */
q.bigq{
  margin: 1.5rem;
  font-size: 2.98rem;
}

.rgb, .rgbtext{
  background-image: repeating-linear-gradient(to left, red, violet, indigo, blue, green, yellow, orange, red);
  background-size: 3000px 30px;
  animation: rgbscroll 20s infinite;
  animation-fill-mode: both;
  animation-timing-function: linear;
}
.menu a.rgb:hover{
  transition-delay: 350ms;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rgbtext{
  background-clip: text;
  fill: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent !important;
}

@keyframes rgbscroll {
  from{background-position-x: 0;}
  /* 50%{background-position-x: 1500px;} */
  to{background-position-x: -3000px;}
}


/* ------ certs ------ */

div#cert img{
    max-width: 600px;
}

div#cert div#py img{
    width: 100%;
}

div#cert div.img2 img{
    display: inline-block;
    width: 48%;
    max-width: calc(300px - 1%);
}
div#cert div.img2 img:first-child{
    margin-right: 2%;
}
div#cert div.container{
    display: inline-block;
}
div#cert div.content{
    display: inline-block;
    margin: 5px 1.25%;
    width: 97%;
}

div#cert .footer{
    margin-top: 25px;
}



/* p{
  margin-top: 2vh;
  margin-bottom: 2vh;
} */
span#contact{
  color: white;
  font-size: large;
}


/* ------ Messages & Tables ------ */

td{
  color: var(--txt);
}
th{
  color: var(--acchot);
  text-align: left;
}

table{
  min-width: min(30rem, 95%);
    width: 80%;
    /* margin: 10px 10%; */
    /* margin: auto;
    margin-top: 1rem;
    margin-bottom: 1rem; */
    margin: 1rem auto;
    color: var(--txt);
    background: var(--bgli);
    border-radius: 5px;
}
tr{margin: 5px 15px;}
td, th{
  border-radius: 3px;
  background: var(--bg);
  padding: 4px;
}

.table-container{
  width: calc(100% - 3rem);
}


/* ------ MANAGE WEB ------ */


.grid{
  display: grid;
  gap: 10px;
}

.grid.g2{
  grid-template-columns: repeat(2, 1fr);
}

/* #admin{
  overflow-x: scroll;
  overflow-y: hidden;
  height: max-content;
  width: 100%;
  grid-template-rows: 100vh;
  grid-auto-flow: column;
}
#admin > div{
  width: max-content;
} */

#admin{
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

#admin #greeting{
  padding: 1em;
  grid-column: 1/span 2;
}
#admin #links{
  grid-column: 3/span 1;
  grid-row: span 2;
}
#admin #upload{
  grid-column: span 2;
}
#admin #photos{
  grid-column: span 2;
}
#admin #users{
  grid-column: span 1;
  padding: 1rem;
  position: relative;;
}
#admin #approval{
  grid-column: span 3;
}

#admin #users ul{
  margin-left: 1rem;
}
#admin #users li{
  margin: 10px 0;
  width: 100%;
  list-style: circle;
}
#admin #users li.enabled{
  list-style: square;
}
#admin #users li:has(.acchot-color){
  color: var(--acchot)
}
#admin #users li label{
  width: 100%;
}
#admin #users li label span{
  position: relative;
  left: 0;
}
#admin #users li label i{
  position: absolute;
  right: 20px;
}

@media screen and (max-width: 1000px) {
  #admin > *{
    grid-column: span 3 !important;
    grid-row: span 1 !important;
    padding: 20px;
  }
}

/* ------ LOGIN ------ */


.login{
  width: 33%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 25px;

  background-color: var(--bgli);
  border-radius: 7px;
  box-shadow: 0 0 20px var(--shadow);
}

.login input[type=text],
.login input[type=password]{
  /* width: 80%; */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.login input[type=submit]{
  position: relative;
  left: 100%;
  transform: translateX(-100%);
}

@media screen and (max-width:1200px) {
  .login{
    width: 55%;
  }
}

@media screen and (max-width:600px) {
  .login{
    width: 90%;
  }
}

.login input[type=text]:placeholder-shown.error,
.login input[type=password]:placeholder-shown.error{
  border-color: red;
}


/* ------ FILE UPLOAD ------ */

.upload{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.upload form{
  position: relative;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  width: 66%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
}

.upload .notice{
  grid-column-start: 3;
  grid-row-start: 1;
  /* position: absolute; */
  /* right: 0; */
  margin: 5px 25px;
}

.upload input[type=text],
.upload .file-label{
  /* width: 80%; */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.75;
  color: var(--txt);
}
.upload input[type=submit]{
  position: relative;
  left: 100%;
  transform: translateX(-100%);
}
@media screen and (max-width: 1000px) {
  .upload form{
    grid-column-end: 4;
  }
  .upload .notice{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
  }
}


/* ------- PHOTO MGMT ------ */

.photo-mgmt .controls{
  margin-top: 15px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.photo-mgmt span{
  /* grid-column: 1 / span 2; */
  color: var(--txt);
}
.photo-mgmt span.title{
  font-size: x-large;
}
.photo-mgmt .title small{
  position: relative;
  top: -0.25rem;
  font-size: small;
}

.photo-mgmt #users{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.photo-mgmt #users :first-child{
  grid-column: 1 / span 3;
  margin: 10px 5px;
}

.photo-mgmt #buttons{
  grid-row: span 2;
}
.photo-mgmt #buttons > *{
  position: relative;
  display: inline-block;
  margin: 10px;
  /* width: 100%; */
  /* left: 50%; */
  /* transform: translateX(50%) translateY(50%); */
}

@media screen and (max-width: 1300px) {
  .photo-mgmt .controls{
    grid-template-columns: 1fr;
  }
  /* .photo-mgmt span{
    grid-column: 1 / span 1;
  } */
  .photo-mgmt #users{
    grid-template-columns: repeat(2, 1fr);
  }

}



/* ------- MODAL ------ */

dialog{
  min-width: min(20rem, 98%);
  width: max-content;
  margin: auto;
  padding: 25px;
  padding-top: 2rem;
  background-color: var(--bg2);
  -webkit-backdrop-filter: blur(0.2rem);
  backdrop-filter: blur(0.2rem);
  border-radius: 7px;
  box-shadow: 0 0 60px 40px var(--shadow);
  border: none;
  z-index: 10;
}
dialog.right{
  position: absolute;
  left: unset;
  right: 2rem;
  width: max-content;
}

:modal{
  margin: auto;
  transition: all 0.4s ease-in-out;
}

dialog input{
  min-width: 100px;
}

dialog input:not([type=submit]){
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

:modal{
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

dialog > button:has(.fa-xmark.close-button){
  position: absolute;
  top: 1rem;
  right: 1.2rem;
}
button:has(.fa-solid){
  padding: 0.6rem 0.7rem 0.55rem 0.7rem;
}
button:has(.fa-solid){
  padding: 0.2rem 0.5rem 0.3rem;
}
button:has(.fa-solid) > i{
  font-size: 0.7rem;
}
dialog table{
  width: 100%;
  margin: 1.5rem 0;
  padding: 0.5rem;
}
dialog > table{
  margin: auto;
  margin-top: 1rem;
}

.permissions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 20px;
  width: 100%;
}
/* .permissions > div { */

dialog#useredit{
  width: 95%;
}

span.user{
  width: 100%;
  display: flex;
  color: var(--txt);
}
span.user > p{
  break-after: unset;
}
span.right{
  position: relative;
  margin: auto;
  margin-right: 0;
  margin-left: auto;
}

/* ------- PHOTOS ------ */

/* .content center properly */
.photo-grid{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 0.5em;
}
.photo-grid .container{
  position: relative;
  padding: 10px;
}
.photo-grid .container .img-container{
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 5px;
  transition: border-radius 0.2s 0.4s ease-in-out;
}
.photo-grid .container .img-container img{
  position: relative;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.photo-grid .container .img-container img.thin{
  height: unset;
  left: unset;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.photo-grid .container span{
  position: relative;
  color: var(--txt);
  font-size: x-large;
  font-weight: 500;
  top: 15px;
  left: 15px;
}

.photo-modal{
  width: 100%;
  margin-top: 100px;
}

img.unselected{
  filter: brightness(60%) grayscale(69%);
}

.description-wrapper{
  grid-template-columns: 70% 30%;
}

@media screen and (min-width:1100px) {
  .photo-modal{
    width: 80%;
  }
  .photo-modal .photo-grid{
    grid-template-columns: repeat(4, 1fr);
  }
  .photo-grid{
    grid-template-columns: repeat(5, 1fr);
    gap: 0.2em;
  }
  .photo-grid .container .img-container img{
    position: relative;
    height: unset;
    left: unset;
    width: 100%;
    top: 50%;
    transform: translateY(-50%) scale(160%);
    transition: transform 0.4s cubic-bezier(0.42, 0, 0.15, 1.4);;
  }
  .photo-grid .container .img-container img.thin{
    width: unset;
    top: unset;
    height: 100%;
    left: 50%;
    transform: translateX(-50%) scale(160%);
  }
  .photo-grid .container:hover > .img-container img{
    transform: translateY(-50%) scale(100%);
  }
  .photo-grid .container:hover > .img-container img.thin{
    transform: translateX(-50%) scale(100%);
  }
  .photo-grid .container:hover > .img-container{
    border-radius: 0;
  }
}


/* ------ MODAL (TEXT) ------ */


.hdivide:not(:first-of-type){
  padding-top: 25px;
  margin-top: 25px;
  border-top: 3px solid var(--txt);
}
.text-modal .img-container{
  min-height: 50px;
}
.text-modal .container{
  padding-top: 30px;
  width: 100%;
  display: grid;
  grid-template-columns: 30% 69%;/*calc(70% - 20px);*/
  column-gap: 20px;
}
.text-modal textarea{
  min-height: 50%;
}


/* ------ CHANGE REQUEST TABLE (TEXT) ------ */


table.change-request{
  border-spacing: 2px;
}
table.change-request th ,
table.change-request td {
  padding: 4px 8px;
}

table.change-request thead tr > *{
  background-color: var(--bgli);
  color: var(--txt);
}
/* table.change-request thead tr{
  border-bottom: 1px solid var(acchot);
} */
table.change-request tbody tr:nth-of-type(odd){
  border-top: 1px solid var(--acchot);
}
table.change-request tbody tr:nth-of-type(1){
  border-top: 2px double var(--acchot);
}

/* ------ ADMIN 2 ------ */

.dash{
  grid: auto-flow dense / repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem !important;
  margin-bottom: 4rem !important;
}
.dash:not(:has(.slim)){
  grid: auto-flow dense / repeat(2, 1fr);
}
.dash > div{
  /* align-self: start; */
  max-width: 90vw;
  border-radius: 10px;
  /* border: 1px solid var(--acchot); */
  background-color: var(--bgli);
  padding: 1rem;
  grid-column: span 2;
  box-shadow: 0px 0px 1rem 0.5rem var(--shadow);
  transition: all 0.2s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.dash li{
  margin-left: 1.5rem;
}
.dash > .slim{
  grid-column: span 1;
  /* grid-row: span 2; */
}
.dash .giant{
  grid-row: span 2;
}
/* .dash .fat{
  grid-row: span 2;
} */
.dash .title-div{
  position: relative;
  width: 100%;
  height: 2rem; /* 1rem parent padding, 0.5 rem marbottom*/
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--acchot);
}
.title-div .title{
  font-weight: 500;
}
.title-div i{
  color: var(--acchot);
}
.title-div i.expand{
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media screen and (max-width: 1150px) {
  .dash{
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .dash > div{
    grid-column: span 1;
  }
}
@media screen and (max-width: 850px) {
  .dash > div:not(:first-child){
    max-height: 4.5rem;
    overflow: hidden;
    transition: max-height 0.2s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .dash > div:not(.open, .closing):hover{
    max-height: 7rem;
    transition: max-height 0.2s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .dash > div.open{
    max-height: 150rem;
    transition: max-height 8s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: unset;
    overflow-x: hidden;
  }
  .dash > div.closing{
    max-height: 4.5rem;
    transition: max-height 0.8s 0s ease-out;
  }
  .title-div i.expand{
    display: block;
  }
}


.user-summary{
  display: flex;
  color: var(--txt);
  background-color: var(--bg);
  border-radius: 10px;
  margin-top: 0.5rem;
  span{
    margin: 1rem;
  }
  i{
    margin-right: 1rem;
    color: var(--acc2);
  }
}
label{
  color: var(--txt);
}

/* ------ NOTIFICATION ------ */

#notice-div {
  position: fixed;
  max-width: 25rem;
  width: calc(100% - 2rem); /* Adjust width to account for right spacing */
  right: 1rem;
  top: 5rem;
  z-index: 10;
  display: flex; /* Ensure flex context */
  flex-direction: column; /* Stack notifications vertically */
}

.notice {
  position: relative; /* This is crucial for absolute positioning of child elements */
  width: 100%;
  max-width: 25rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  padding: 0.2rem 3rem 0.2rem 2rem; /* Increase right padding to make room for the close button */
  background-color: var(--bg2);
  border: 1px solid var(--acchot);
  box-shadow: 0px 0px 0.4rem 0.1rem var(--shadow);
  display: flex;
  align-items: center;
}

.notice i {
  /* margin: auto 1.5rem auto 0; Adjusted margin for better alignment */
  color: var(--acchot);
}

.close-button {
  position: absolute;
  top: 50%; /* Vertically center */
  right: 0.5rem; /* Add some space from the right edge */
  transform: translateY(-50%); /* Fine-tune vertical alignment */
  border: none; /* Optional: to remove default borders */
  padding: 0; /* Optional: to ensure no extra space */
  cursor: pointer; /* Make sure it looks clickable */
}

/* Optionally, ensure no other styles override this */
.close-button i.fa-xmark {
  pointer-events: none; /* So clicks go through to the button */
}

/* Media query for responsiveness */
@media only screen and (max-width: 600px) {
  #notice-div {
    width: calc(100% - 2rem); /* Full width minus some margin for small screens */
    max-width: none; /* Remove max-width restriction on smaller screens */
  }
  
  .notice {
    max-width: 100%; /* Allow notice to take full width on small screens */
  }
}


/* ------ Minimize Text ------ */

  button:has(> i) span {
  margin-left: 0.2rem; /* Space between icon and text */
}

@media screen and (max-width: 600px) { /* Adjust 600px to your desired threshold */
  button:has(> i) span {
    display: none; /* Hide the span or any direct text inside button */
    margin-left: 0; /* Remove margin when text is hidden to center icon properly */
  }
  
  /* Optionally, adjust icon size or button padding for better visibility */
  button:has(> i) i {
    font-size: 1.55rem; /* Increase icon size for better visibility */
  }
  
    button:has(> i) {
    padding: 0.5em; /* Adjust padding to make button size reasonable */
  }
}


.modal-container > dialog{
  position: absolute;
  width: max-content;
  max-width: calc(100% - 3rem);
  top: 5rem;
  left: 50%;
  transform: translate(-50%);
}
.modal-container.relative > dialog{
  position: relative;
}
.modal-container{
  position: absolute;
  width: calc(100% - 3rem);
  margin: 0;
  padding: 0;
}



.icon-div{
  width: 70px;
  transition: transform 0.2s 0s ease-in-out;
}
.icon-div:hover{
  transform: scale(3) translateX(40%);
  z-index: 2;
  transition: transform 0.2s 0s ease-in-out;
}


/* ------ MENU REDESIGN ------ */

.menu2{
  margin-top: 1.5rem;
  padding: 0.5rem 1rem;
  display: grid;
  grid-template-columns: auto max-content;
  position: sticky;
  top: 0.25rem;
  left: 1rem;
  width: calc(100% - 2rem);
  background-color: var(--bgli);
  -webkit-backdrop-filter: blur(0.3rem);
  backdrop-filter: blur(0.3rem);
  border-radius: 5px;
  z-index: 10;
  overflow: hidden;
  box-shadow: 0 0 20px var(--shadow), 0 0 5px 0.2rem var(--shadow) !important;
}

.menu2 a{
  display: inline-block;
  position: relative;
  margin: 0.3rem;
  border-radius: 5px;
  left: 0;
  width: fit-content;
  top: 0;
}

.menu2 a:hover{
  box-shadow: 0 0 8px var(--shadow);
  background-color: var(--acchot);
  text-decoration: none;
  color: var(--txt);
}

.menu2 a.rgb {
  /* -webkit-text-stroke: 1px var(--bgli); */
  /* -webkit-text-fill-color: var(--acchot); */
  text-shadow:
  -1px -1px 20px #f3f3f3fd,  
   1px -1px 20px #f3f3f3fd,
   -1px 1px 20px #f3f3f3fd,
    1px 1px 20px #f3f3f3fd,
  -1px -1px 10px #f3f3f3fd,  
   1px -1px 10px #f3f3f3fd,
   -1px 1px 10px #f3f3f3fd,
    1px 1px 10px #f3f3f3fd;
}

.menu2:not(.responsive) a:hover{
  transform: scale(110%);
}

.menu2:not(.responsive) span.show-when-open{
  display: none;
}

.menu2 .right > a{
  position: relative;
  left: unset;
  right: 0;
  top: 0;
}

.menu2 a.active{
  border-left: 1px solid var(--acchot);
  border-right: 1px solid var(--acchot);
}



@media screen and (min-width: 950px) {
  .menu2{
    height: 4.5rem;
    transition: 350ms cubic-bezier(0.42, 0, 0.15, 1.4);
  }
  .menu2 a{
    height: calc(3.5rem - 0.6rem);
    padding: 0.75rem 1rem;
    font-size: 1.25rem;
    transition: 350ms cubic-bezier(0.42, 0, 0.15, 1.4);
  }
  /* .menu2 a.icon{
    font-size: 1rem;
    padding: 0.8rem 1rem;
  } */

  .menu2 a:hover{
    transform: scale(110%);
  }

  .menu2 span.show-when-open{
    display: none;
  }
}
@media screen and (max-width: 950px) {
  .menu2.responsive{
    grid-template-columns: 1fr;
    overflow: show;
    height: max-content;
  }
  
  .menu2.responsive div:not(.right) > a{
    display: block;
    width: calc(100% - 0.6rem);
  }
  
  .menu2.responsive .right{
    position: relative;
    width: max-content;
    left: 100%;
    transform: translateX(-101%);
  }
  .menu2{
    padding: 0.25rem 0.5rem;
    height: 3.5rem;
    transition: 350ms cubic-bezier(0.42, 0, 0.15, 1.4);
  }
  .menu2 a{
    height: calc(3rem - 0.6rem);
    padding: 0.6rem 1rem;
    font-size: 1rem;
    transition: 350ms cubic-bezier(0.42, 0, 0.15, 1.4);
  }

  
  .grid.g2{
    grid-template-columns: 1fr;
  }
}

@media screen and (min-width: 800px) {
  .menu2 a#expand{
    display: none;
  }
}
@media screen and (max-width: 800px) {
  .menu2 a#expand{
    display: inline-block;
  }
}

/* ------ SCREEN SIZE DIFFERENT WIDTH ------ */


@media screen and (min-width:1100px) {
  div#cert div.content{
      display: inline-block;
/*      vertical-align: top;*/
      width: 48%;
      margin-right: 0;
  }
  div#cert div.container{
      display: flex;
      align-items: flex-start;
  }
}

@media screen and (min-width:700px) {
  #about img{
    width: 700px;
  }


  /* -- INDEX -- */

/* .inline.home{
    margin-top: 25px;
    position: absolute;
    display: block;
  right: 2%;
  width: 30%;
  height: 100%;
/*    800px   * /
}
  .inline.home #portrait img{
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-bottom: 3%;
  }
  .inline.home #text{
      width: 100%;
  }
  .inline.home #shadow{
      width: 100%;
  }
  .inline.home #teaser{
      width: 100%;
  }
  #homecontent{
      display: block;
      left: 0;
      width: 67%;
  } */

}

@media screen and (max-width: 850px) {
  .content{
    margin: 1% 2%;
    padding: 1% 2%;
    width: 94%;
  }

  .content.inline.details{
    float: left;
    width: 100%;
  }
  .content#contact_form{
    width: 100%;
  }
  #contact-photo{
    height: 300px;
    width: 50%;
  }

    /* ------ responsive footer ------ */

.footer{
  padding: 15px 10px;
  margin: 0 3px;
  width: calc(100% - 6px);
  display: inline-block;
  }
  .footer .bg{
      position: absolute;
  }
  .footer .c1, .footer .c2, .footer .c3, .footer .c4{
    padding: 2px 8px;
  }
  .footer .c1{
    width: 50%;
    max-height: 350px;
    float: left;
  }
  .footer .c2, .footer .c3{
    max-height: 250px;
    width: 24%;
    float: right;
  }
  .footer .c4{
    max-height: 100px;
    width: 50%;
    /* float: ; */
  }
    
    div#cert .footer{
    margin-top: 25px;
}

  /* ------ index ------ */

  .inline{
    display: inline-block;
  }
  .inline #text{
    width: calc(98% - 20px);
  }
  .inline #photo{
    width: 98%;
  }


}
@media screen and (max-width: 670px) {
  /* responsive design for the navbar */
  .menu a.icon {
    float: right;
    display: block;
  }
  .menu.responsive {position: relative;}
  .menu.responsive a.icon {
    position: absolute;
    display: block;
    right: 15px;
    top: 10px;
  }
  .menu.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  /*hide cookies page from dropdown*/
  .menu a:nth-child(4), .menu a:nth-child(5) {display: none;}  
  .menu.responsive a:nth-child(4), .menu.responsive a:nth-child(5) {display: block;}

  /* responsive design for the home page */
  .content.inline{
    width: 100%;
    float: left;
    display: block;
  }

  /* ------ portfolio - utcn img ------ */

    #utcn img{
        margin: 10px auto;
    }
    
    /* ------ responsive footer ------ */

  .footer{
    padding: 15px 10px;
    margin: 0 3px;
    width: calc(100% - 6px);
    display: inline-block;
  }
  .footer .c1, .footer .c2, .footer .c3, .footer .c4{
    padding: 2px 8px;
  }
  .footer .c1, .footer .c4{
    width: 100%;
  }
  .footer .c2, .footer .c3{
    width: 48%;
  }
  .footer .c2{
    float: left;
  }
  .footer .c3, .footer .c4{
    float: right;
  }
    div#cert .footer{
    margin-top: 25px;
}

}
@media screen and (max-width:610px) {
  .menu a#icon {display: none;}
  .menu.responsive a#icon {display: block;}
  .menu.responsive {display: block;}
}

@media screen and (max-width:500px) {
  .menu a:not(:first-child) {display: none;}
  .menu.responsive a:not(:first-child) {display: block;}
  .menu a.icon{
    float: right;
    display: block;
  }
    
    /* ------ certs ------ */

  div#cert div.img2 img{
      width: 100%;
      max-width: 500px;
  }
}

.search-bar {
  margin-bottom: 20px; /* Add spacing */
  width: 100%; 
}

.search-bar label {
  display: block;
  margin-bottom: 5px;
}

.search-bar input[type="text"] {
  width: 100%; 
  padding: 8px;
  border: 1px solid #ccc; 
  border-radius: 4px; 
  box-sizing: border-box;
} 

.search-bar div { /* Container for autocomplete suggestions */
  position: absolute; /* Change to absolute positioning */
  z-index: 3; /* Ensure it appears on top */
  width: 100%;   /* Match the width of the input field */}

.search-bar div p { 
  background-color: var(--bg2); 
  border: 1px solid var(--accmute);
  padding: 5px;
  margin: 0;
  cursor: pointer;
} /* Style the individual suggestions */

.search-bar div p:hover {
  background-color: var(--acc2); /* Highlight on hover */
}