* {
  margin: 0%;
  padding: 0%;
  border: 0;
  outline: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

/* Scrollbars */

/* Firefox */
* {
  scrollbar-width: none;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 0;
  display: none;
}

body::-webkit-scrollbar {
  display: none;
  width: 0;
}

/* General Styles */

body {
  font-family: "EB Garamond", serif;
  color: antiquewhite;
  line-height: 1.2;
  overflow-x: hidden;
}

:root {
  --container-width-lg: 80%;
  --container-width-md: 90%;
  --container-width-sm: 94%;

  --transition: all 400ms ease;
}

h3 {
  font-family: "Sacramento", serif;
  font-weight: 900;
  font-size: 2rem;
  text-align: center;
  color: rgb(214, 164, 171);
  margin: 10px 0;
}

a {
  text-decoration: none;
  color: rgb(236, 166, 148);
}

a:hover {
  transition: var(--transition);
  color: rgb(197, 92, 118);
}

/* PC */

ul {
  transition: var(--transition);
}
.hide {
  height: 0;
  overflow: hidden;
}

.container {
  width: var(--container-width-lg);
  margin: 0 auto;
}

.bg-container {
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(155, 81, 120, 0.4);
  backdrop-filter: blur(1px);
  z-index: -1;
}

.bg-setting {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 50;
  display: flex;
  opacity: 0.5;
}

.bg-setting:hover {
  transition: var(--transition);
  transform: scale(1.1);
  opacity: 1;
}

.setting {
  color: antiquewhite;
  width: 30px;
}

.bg-container .slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  object-fit: cover;
  z-index: -3;
}

.bg-container ul {
  position: absolute;
  right: 2px;
  top: 5%;
  transform: translateX(-10%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 60;
}

.bg-container ul li {
  cursor: pointer;
  margin: 10px;
}

.bg-container ul li video {
  width: 100px;
  transition: all ease 500ms;
  border-radius: 20px;
}

.bg-container ul li video:hover {
  transform: scale(1.1);
}

/* Navbar */

nav {
  display: flex;
}

.nav-logo {
  position: absolute;
  top: 3%;
  left: 10%;
  display: flex;
  z-index: 100;
}

.nav-logo img {
  width: 35px;
}

.navbar img {
  width: 15px;
}

.navbar img:hover {
  transition: var(--transition);
  transform: scale(1.1);
}

/* Footer */
.footer {
  position: absolute;
  width: 50%;
  bottom: 2%;
  left: 30%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  line-height: 6;
  margin: 0 auto;
  z-index: 20;
}

.footer img {
  width: 18px;
}

footer img:hover {
  transition: var(--transition);
  transform: scale(1.2);
}

/* main container */

.main-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
  height: 100vh;
  padding-top: 100px;
}

/* Greeting */

.greeting {
  /* position: absolute;
  left: 40%;
  top: 8%; */

  display: flex;
  flex-direction: column;
  z-index: 50;
  font-family: "EB Garamond", san-serif;
  font-size: 2rem;
  font-weight: 900;
  justify-content: center;
  text-align: center;
}

/* Clock */

#clock {
  font-size: 2.5rem;
}

/* Search Engine */

.search-engine {
  width: 50%;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  background-color: rgba(146, 85, 114, 0.3);
  box-shadow: 1px 3px 3px 1px rgba(238, 139, 172, 0.3);
  overflow: hidden;
  backdrop-filter: blur(4px);
}

.search-engine select {
  width: 130px;
  background-color: transparent;
  font-family: "EB Garamond", san-serif;
  font-size: 1.1rem;
  font-weight: 900;
  color: antiquewhite;
  padding: 0 8px;
  cursor: pointer;
}

.search-engine select:hover {
  color: rgb(218, 87, 150);
  transition: var(--transition);
}

.search-engine option {
  padding: 0 8px;
  background-color: rgba(17, 16, 17);
  font-family: "EB Garamond", san-serif;
  font-size: 1rem;
  font-weight: 900;
  color: antiquewhite;
  cursor: pointer;
}

.search-engine option:hover {
  color: rgb(218, 87, 150);
  transition: var(--transition);
}

.search-input {
  width: 100%;
  background-color: transparent;
  font-family: "EB Garamond", san-serif;
  font-size: 1.1rem;
  font-weight: 900;
  color: antiquewhite;
  padding: 0 10px;
}

.search-engine button {
  display: flex;
  background-color: transparent;
  font-family: "EB Garamond", san-serif;
  font-size: 1rem;
  font-weight: 900;
  color: antiquewhite;
  margin: 0 auto;
}

.submit-icon {
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  padding: 8px;
  cursor: pointer;
}

/* Icons */

.box {
  width: 95%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  margin: 0 auto;
}

.la-logo {
  width: 80px;
  border-radius: 20px;
  background-color: rgba(146, 85, 114, 0.5);
  box-shadow: 1px 3px 3px 1px rgba(238, 139, 172, 0.5);
}

.bdo-logo {
  width: 60px;
  border-radius: 20px;
  background-color: rgba(146, 85, 114, 0.5);
  box-shadow: 1px 3px 3px 1px rgba(238, 139, 172, 0.5);
  padding: 0 10px;
}

.notes-logo {
  width: 60px;
  border-radius: 20px;
  background-color: rgba(146, 85, 114, 0.5);
  box-shadow: 1px 3px 3px 1px rgba(238, 139, 172, 0.5);
  padding: 10px;
}

.box img:hover {
  transition: var(--transition);
  transform: scale(1.03);
}

/* Other HTML's Containers */

.bigbox {
  position: absolute;
  width: 80vw;
  height: 40vh;
  left: 10%;
  bottom: 15%;
  z-index: 20;
  display: flex;
  padding: 30px 10px;
  background-color: rgba(146, 85, 114, 0.1);
  backdrop-filter: blur(4px);
  border-radius: 20px;
}

.notes-container {
  width: 96%;
  height: 96%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 1rem;
  margin: 10px;
  overflow-y: scroll;
}

.notes-box1 {
  width: 220px;
  height: 280px;
  border-radius: 30px;
  background-color: rgba(146, 85, 114, 0.5);
  box-shadow: 1px 3px 3px 1px rgba(238, 139, 172, 0.5);
  gap: 10px;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  text-align: center;
  font-family: "EB Garamond", san-serif;
  font-size: 1rem;
  font-weight: 900;
  color: antiquewhite;
  line-height: 1;
  margin: 10px;
  padding: 10px 20px;
}

.notes-box1:hover {
  transition: var(--transition);
  transform: scale(1.03);
}

/* To use Tablet/Mobile Screen */

/* Tablet */

@media screen and (max-width: 1024px) {
  .container {
    width: var(--container-width-md);
  }

  .search-engine {
    width: 70%;
  }
}

/* Mobile */

/* ================= MEDIA QUERIES (Phones) ===================== */

@media screen and (max-width: 600px) {
  .container {
    width: var(--container-width-sm);
  }

  .search-engine {
    width: 80%;
  }
}