/* Reset Styles */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Arial', sans-serif;
	font-size: 100%;
}

html {
	background: #000;
	color: white;
	text-align: center;
}

/* Basic Layout */
body {
   background: url("../assets/backgrounds/cedar.jpg") center / cover no-repeat;
   display: flex;
	flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100vh;
	width: 100vw;
   overflow: hidden;
	transition: background-image 2s ease-in-out;
	max-width: 1920px;
   max-height: 1920px;
}

/* Body Background Image Toggler */

.body-bg-toggle-container {
	display: flex;
	flex-direction: column;
	position: fixed;
	left: 20px;
	top: 20px;
	gap: 15px;
}

.bg-toggler {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
	animation: bgIconCycle 10s infinite ease;
	background: center / cover no-repeat url("../assets/icons/birch-thumbnail.jpg");
}

@keyframes bgIconCycle {
	0% { background: center / cover no-repeat url("../assets/icons/birch-thumbnail.jpg"); }
	20% { background: center / cover no-repeat url("../assets/icons/scales-thumbnail.jpg"); }
   40% { background: center / cover no-repeat url("../assets/icons/cedar-thumbnail.jpg"); }
   60% { background: center / cover no-repeat url("../assets/icons/marble-thumbnail.jpg"); }
   80% { background: center / cover no-repeat url("../assets/icons/stone-thumbnail.jpg"); }
   100% { background: center / cover no-repeat url("../assets/icons/birch-thumbnail.jpg"); }
} 

.body-bg-menu {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: white;
   border-radius: 30px;
   width: 60px;
   height: 0;
   overflow: hidden;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   transition: height 0.2s ease;
}

.body-bg-menu.active {
	height: 350px;
	transition: height 0.5s ease;
}

.body-bg-menu ul {
	list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   justify-content: space-around;
   height: 100%;
	background:white;
	width: 50px;
	flex-direction: column;
}

.body-bg-menu ul li { 
   color: transparent;
   cursor: pointer;
	height: 50px;
	border-radius: 50%;
	transition: transform 0.3s ease;
}

.body-bg-menu ul li:hover {
	padding: 20px;
	transform: scale(1.1);
}

.birch-icon {
	background: center / cover no-repeat url("../assets/icons/birch-thumbnail.jpg");
}

.scales-icon {
	background: center / cover no-repeat url("../assets/icons/scales-thumbnail.jpg");
}

.marble-icon {
	background: center / cover no-repeat url("../assets/icons/marble-thumbnail.jpg");
}

.cedar-icon {
	background: center / cover no-repeat url("../assets/icons/cedar-thumbnail.jpg");
}

.stone-icon {
	background: center / cover no-repeat url("../assets/icons/stone-thumbnail.jpg");
} 

/* Tablet Frame */
.bezels {
	border: 3px solid #a9a9a9;
	border-radius: 23px;
	box-shadow: 2px 2px 6px 0px rgba(0,0,0,1);
}

.tablet-frame {
	width: 80vw;
	height: 80vh;
	max-width: 955px;
	max-height: 633px;
   border: 20px solid black;
   border-radius: 20px;
   overflow: hidden;
	background: center / cover no-repeat url("../assets/backgrounds/agave.jpg");
	position: relative;
}

/* Screen Layout */
.container {
	width: 100%;
   height: 100%;
   overflow-x: auto;
	overflow-y: hidden;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   position: relative;
	-ms-overflow-style: none;
	scrollbar-width: none;
	display: flex;
}

.container::-webkit-scrollbar {
	display: none;
}

.section {
	flex: none;
	width: 100%;
   height: 100%;
   background-color: transparent;
   scroll-snap-align: start;
	font-weight: bold;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	row-gap: 30px;
	column-gap: 20px;
	align-content: start; 
	grid-auto-flow: dense;
	place-items: center;
	padding: 30px 20px 52px;
}

/* Apps */
.app-icon {
   background-color: white;
   display: flex;
   width: 100px;
	aspect-ratio: 1 / 1;
   border-radius: 15px;
   font-size: 18px;
   transition: transform 0.2s ease;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
	position: relative;
	color: white;
}

.app-icon:visited {
	color: white;
}

.app-icon:hover {
   transform: scale(1.05);
}

.app-icon::after {
   content: attr(data-app-name);
   position: absolute;
   top: 110%;
   left: 50%;
	width: 100px;
   transform: translateX(-50%);
   font-size: 14px;
   white-space: nowrap;
}

.app {
	margin-bottom: 20px;
}

.settings {
	background: center / cover no-repeat url("../assets/icons/settings.avif");
	order: 9;
}

.instagram {
	background: center / cover no-repeat url("../assets/icons/instagram.avif");
	box-shadow: none;
	order: 8;
}

.spotify {
	background: center / cover no-repeat url("../assets/icons/spotify.png");
	order: 7;
}

.find-me {
	background: white center / 90% no-repeat url("../assets/icons/find-me.png");
	order: 0;
}

.x-twitter {
	order: 6;
	background: black center / 50% no-repeat url("../assets/icons/x-white.png")
}

.meet-app-icon {
	background: #000;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
	order: 1;
}

.contact {
	background: center / 75% no-repeat url("../assets/icons/contact.avif");
	background-color: white;
	order: 2;
}

.day {
	font-size: 16px;
   font-weight: bold;
   text-transform: uppercase;
   margin-bottom: 5px;
}

.date {
	font-size: 40px;
   font-weight: bold;
}

/* Widgets */
.widget-span-cols {
   grid-column: span 2;
	aspect-ratio: unset;
	width: 100%;
	height: 145px;
	margin: 0;
}

.widget-span-rows {
	grid-row: span 2;
	aspect-ratio: unset;
	width: 120px;
	height: 290px;
	margin: 0;
}

.widget-span-4 {
	grid-column: span 2;
   grid-row: span 2;
	width: 290px;
	margin: 0;
}

.widget-span-6 {
	grid-column: span 3;
   grid-row: span 2;
	aspect-ratio: unset;
	width: 80%;
	height: 290px;
	margin: 0;
}

.youtube-vid {
	display: flex;
	justify-content: center;
	align-items: center;
	background: transparent;
	box-shadow: none;
	order: 3;
}

.weather-widget {
	padding-right: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	order: 4;
}

.gallery-widget {
	order: 5;
}

/* App Popups */

.app-popup {
	height: 100%;
	width: 100%;
	background: white;
	position: absolute;
	z-index: 100;
	display: none;
	justify-content: center;
   align-items: center;
	flex-wrap: nowrap;
	gap: 10px;
}

.blurred-box {
  	background: rgba(255, 255, 255, 0.2); 
  	backdrop-filter: blur(10px);
}

.closePopupBtn {
	position: absolute;
  	top: 30px;
  	right: 30px;
  	border: none;
  	border-radius: 50%;
  	width: 30px;
  	height: 30px;
  	cursor: pointer;
	background-color: white;
   background-image: url("../assets/icons/close.webp");
   background-size: cover;
   background-position: center;
	background-repeat: no-repeat;
}

.mobile-menu {
	display: none;
}

.menu {
    display: flex;
    background: #333333;
    padding: 8px;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	 position: absolute;
    left: 50%;
	 bottom: 20px;
    transform: translateX(-50%);
}

.menu-item {
    background: transparent;
    border: none;
    color: #ccc;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}

.menu-item.active {
    background: #fff;
    color: #000;
    font-weight: bold;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.2);
}

.find-me-popup {
	flex-wrap: wrap;
	gap: 0;
}

#timeline {
	flex: 1;
	min-width: 200px;
	padding: 10px;
   background: #f8f8f8;
   overflow-y: auto;
   height: 100%;
	color: black;
}

#timeline h3 {
	padding: 20px 0;
}

.timeline-item, .all-locations-btn {
	padding: 10px;
   margin: 5px 0;
   background: #fff;
   cursor: pointer;
   border-radius: 5px;
   text-align: center;
   transition: 0.3s;
}

        .timeline-item:hover, .all-locations-btn:hover {
            background: #e0e0e0;
        }

        #map {
            flex: 3;
            height: 100%;
				background: pink;
        }

        .all-locations-btn {
            font-weight: bold;
            background: #000;
            color: white;
        }

        .all-locations-btn:hover {
            background: #e0e0e0;
				color: #000;
        }

        .current-location {
            background-color: #A3D9A5; /* Greenish color for current location */
        }

        .current-location::after {
    content: " (Current Location)"; /* Add subtext */
    display: block; /* Makes it appear on a new line */
    font-size: 12px; /* Smaller text */
    color: rgba(255, 255, 255, 0.8); /* Slightly transparent */
    margin-top: 2px; /* Adds space between main text and subtext */
}

.settings-content {
	flex-basis: auto;
	width: 100%;
	height: 100%;
   padding: 60px 0 76px;
	background: white;
	color: black;
	display: flex;
	align-items: center;
   justify-content: center;
	overflow-y: scroll;
}

.settings-panel {
	display: none;
	padding: 20px;
}

.settings-panel h1 {
	font-size: 24px;
}
		  
.settings-panel.active {
	display: flex;
	align-items: center;
   justify-content: center;
	flex-direction: column;
	gap: 10px;	
}

#profile, #about {
	align-self: start;
}

#profile h1 {
	font-size: 32px;
}

.profile-summery {
	font-size: 12px;
}

.profile-icon {
	width: 80px;
   height: 80px;
   border-radius: 50%;
   overflow: hidden;
   background-color: #ccc;
}

.profile-icon img {
   width: 100%; 
   height: 100%;
   object-fit: cover;
}

.responsive-list {
	display: flex;
   flex-wrap: wrap;
   gap: 16px;
   list-style: none;
   margin: 0 auto;
   max-width: 100%;
   background: white;
}

.responsive-list li {
	flex: 1 1 calc(50% - 8px);
   padding: 8px 0;
}

.responsive-list li h2 {
	margin-bottom: 20px;
	font-size: 20px;
}

.responsive-list li p {
	text-align: left;
	line-height: 1.5;
}

.controls {
	background: rgba(255, 255, 255, 0.8);
   padding: 10px;
   border-radius: 8px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	text-align: center;
}

label, input {
   vertical-align: middle;  
   margin: 0;               
}

label {
   margin-right: 10px;       
}

input[type="file"] {
   padding: 10px;
   font-size: 16px;
	text-align: center;			
}

.preset-images img {
	width: 50px;
   height: 50px;
   object-fit: cover;
   margin: 5px;
   cursor: pointer;
   border-radius: 5px;
}

.preset-images img:hover {
	border: 2px solid #333;
}

#about {
	max-width: 700px;
}

#about h2 {
	margin-top: 20px;
}

.about-list, .bugs ul {
	margin-bottom: 20px;
	list-style: none;
}

.bugs h3 {
	margin-bottom: 20px;
}

.about-list li, .bugs ul li {
	text-align: left;
}

.bugs {
	background-color: #f9f9f9; 
	border-left: 4px solid #ff5252; 
	padding: 16px; 
	font-family: sans-serif; 
	max-width: 600px; 
	margin: 20px auto;
}

#credits h2 {
	margin-top: 20px;
}

#copyright pre {
	font-size: 10px;
	white-space: pre-wrap; /* Ensures text wraps instead of overflowing */
   word-wrap: break-word;
   font-size: clamp(8px, 2vw, 10px);
}
            
/* Dots container */
.dots {
	position: absolute;
   bottom: 10px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 8px;
   z-index: 10;
}

.dot {
	width: 12px;
   height: 12px;
   background-color: #bbb;
   border-radius: 50%;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

.dot.active {
   background-color: #333;
}

/* Portrait Tablet Users */
@media (min-width: 769px) and (max-width: 1280px) and (orientation: portrait) {

	.tablet-frame {
		max-width: 633px;
		max-height: 955px;
	}
	
	.top-menu {
		bottom: 20px;
		top: unset;
	}
	
	#timeline {
		height: 60%;
		width: 100%;
		order: 2;
		position: absolute;
		bottom: 0;
	}
	
	#map {
		height: 40%;
		align-self: start;
	}

}

/* Mobile Users */

@media screen and (max-width: 768px) {

	.body-bg-toggle-container {
		display: none;
	}

	.tablet-frame {
		max-width: 100%;
		max-height: 100%;
		width: 95vw;
		height: 90vh;
	}
	
	.section {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.widget-span-4 {
		max-width: 200px;
	}
	
	.widget-span-6 {
		display: none;
	}
	
	.settings {
		order: 6;
	}
	
	.spotify {
		order: 4;
	}

	.instagram {
		order: 3;
	}

	.find-me {
		order: 0;
	}

	.x-twitter {
		order: 5;
	}

	.meet-app-icon {
		order: 1;
	}

	.contact {
		order: 2;
	}
	
	.youtube-vid, .gallery-widget, .weather-widget {
		display: none;
	}
	
	.settings-popup {
   	flex-direction: column;
   }

   .settings-menu {
   	flex-basis: auto;
   }

	.mobile-menu {
		background: #333;
      padding: 12px 24px;
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		position: absolute;
    	left: 50%;
	 	bottom: 0;
    	transform: translateX(-50%);
	}

	.menu {
		display: none;
	}
	
	.responsive-list li {
		flex: 1 1 100%;
   }

	#timeline {
		height: 70%;
		width: 100%;
		order: 2;
		position: absolute;
		bottom: 0;
	}
	
	#map {
		height: 30%;
		align-self: start;
	}

	.gm-bundled-control {
		display: none;
	}

}

@media screen and (max-width: 480px) {
		
	.app {
		width: 75px;
	}

	.youtube-vid {
		transform: scale(.80);
	}
	
	.youtube-vid:hover {
		transform: scale(.84);
	}
	
	.day {
		font-size: 12px;
	}
	
	.date {
		font-size: 30px;
	}
	
}