/* Global styles */
body {
  font-family: 'Ubuntu', sans-serif;
margin: 0;
padding: 0;
transition: background-color 0.4s ease;
}

.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 48
}

.loader {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-color: #111;
opacity: 1;
transition: opacity 1s ease-in-out;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9998;
}

.loader.hidden {
opacity: 0;
pointer-events: none;
}

.loader__name {
  
font-size: 60px;
color: #fff;
animation: moveName 1s ease-in-out forwards;
animation-delay: 0.5s;
opacity: 0;
position: absolute;
    top: 50%;
   left: 50%;
}

@keyframes moveName {
0%{
  font-family: "Noto Sans", sans-serif;
  opacity: 0;
     top: 50%;
   left: 50%;
font-size: 60px;
}
100% {
  font-family: 'Ubuntu', sans-serif;
  opacity: 1;
  top: 25px;
  left: 20px;
  font-size: 30px;
}
}

main {
  padding: 30px;
}

header {
background-color: #333;
padding: 20px;
color: #fff;
}

nav {
display: flex;
align-items: center;
justify-content: space-between;
}

nav h1 {
font-size: 30px;
}

.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
}

.switch input[type="checkbox"] {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 20px;
}

.slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}

input:checked + .slider {
background-color: #2196F3;
}

input:checked + .slider:before {
transform: translateX(20px);
}

.slider.round {
border-radius: 20px;
}

/* Dark mode styles */
body.dark-mode {
background-color: #111;
color: #fff;
transition: background-color 0.4s ease;
}

header.dark-mode {
background-color: #222;
transition: background-color 0.4s ease;
}

input.dark-mode:checked + .slider {
background-color: #6b6b6b;
}

input.dark-mode:checked + .slider:before {
background-color: #ccc;
}

.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}

.modal-content.dark-mode {
background-color: black;
margin: 20px auto;
padding: 20px;
border-radius: 5px;
max-width: 500px;
position: relative;
transform: translateY(-100px);
opacity: 0;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
color: white;
}

.modal-content {
background-color: #fefefe;
margin: 20px auto;
padding: 20px;
border-radius: 5px;
max-width: 500px;
position: relative;
transform: translate(-50%, -50%);
animation: slideIn 0.3s ease;
animation: slideOut 0.3s reverse ease;
opacity: 0;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
color: black;
}

@keyframes slideIn {
  from {
      top: -100%;
  }
  to {
      top: 0;
  }
}

@keyframes slideOut {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}

.modal.show {
display: block;
}

.modal.show .modal-content {
transform: translateY(0);
opacity: 1;
}

.close {
font-size: 24px;
font-weight: bold;
cursor: pointer;
}

.modal-image {
width: 100%;
max-height: 500px;
object-fit: cover;
}

.modal-title {
margin-top: 0;
}

.modal-link {
display: inline-block;
margin-top: 10px;
background-color: #2196F3;
color: #fff;
padding: 8px 16px;
text-decoration: none;
border-radius: 4px;
}

.projects-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.project {
position: relative;
width: 200px;
height: 200px;
background-size: cover;
background-position: center;
transition: transform 0.3s ease-in-out;
}

.project h3,
.project a {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
text-align: center;
transition: opacity 0.3s ease-in-out;
justify-content:center;
position:absolute;
background:rgba(0,0,0,0.4);
box-shadow:rgb(0 0 0 / 37%) 0px 3.2px 7.2px 0px,rgb(0 0 0 / 35%) 0px 0.6px 1.8px 0px;
border-radius:8px;
display:flex;
flex-direction:column;
overflow:hidden;
height: 50%;
width: 93%;
}

.project p,
.project a {
  display: none;
}

.project:hover {
transform: scale(1.2);
}

.project:hover h3,
.project:hover a {
opacity: 1;
}

.project:hover h3 {
  color: white;
  justify-content:center;
  align-items:center;
position:absolute;
background:rgba(0,0,0,0.4);
box-shadow:rgb(0 0 0 / 37%) 0px 3.2px 7.2px 0px,rgb(0 0 0 / 35%) 0px 0.6px 1.8px 0px;
border-radius:8px;
display:flex;
flex-direction:column;
overflow:hidden;
height: 50%;
width: 93%;
}

#contact a {
display: inline-block;
margin-top: 10px;
background-color: #2196F3;
color: #fff;
padding: 8px 16px;
text-decoration: none;
border-radius: 4px;
}

#screensaver {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  z-index: 9999;
}

marquee {
  height: 100vh;
}

marquee h1{
  font-size: 50px
}

/* mark {
	padding: 3px 6px;
	background: lightgreen;
}

::selection {
	background: lightgreen;
} */