body, html {
  margin: 0;
  padding-left: 180px;
  padding-right: 180px;
  cursor: url("cursors/roundynormal.cur"), auto;
}

@font-face {
  font-family: DlxFont;
  src: url(fonts/DlxFont.ttf); 
}

@font-face {
  font-family: segment;
  src: url(fonts/Digital\ Dismay.otf); 
}

.footer {
  margin: 10px;
  padding: 100px;
  align-items: center;
  position: relative;
  background: radial-gradient(ellipse 130% 90% at 50% 0%, #ffffffcb 0%, #ffffffb2 50%, #ffffffad 100%);
  color: rgb(0, 0, 0);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(10px) saturate(100%);
  border-radius: 26px;
  box-shadow: 0 33px 96px -24px rgba(66, 98, 104, 0.4), 0 1px 2px rgba(0, 0, 0, 0.200), 0 6px 24px rgba(0, 106, 255, 0.55), inset 0 0 8px rgba(255, 255, 255, 0.140), inset 0 4px 8px -4px rgba(0, 0, 0, 0.060), inset 0 -1px 1px rgba(255, 255, 255, 0.220), inset 0 1px 1px rgba(255, 255, 255, 1.000), inset 0 0 0 1px rgba(255, 255, 255, 0.600);
}

.section {
  align-items: center;
  position: relative;
  background: radial-gradient(ellipse 130% 90% at 50% 0%, #ffffffcb 0%, #ffffffb2 50%, #ffffffad 100%);
  color: rgb(0, 0, 0);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(10px) saturate(100%);
  border-radius: 26px;
  box-shadow: 0 33px 96px -24px rgba(66, 98, 104, 0.4), 0 1px 2px rgba(0, 0, 0, 0.200), 0 6px 24px rgba(0, 106, 255, 0.55), inset 0 0 8px rgba(255, 255, 255, 0.140), inset 0 4px 8px -4px rgba(0, 0, 0, 0.060), inset 0 -1px 1px rgba(255, 255, 255, 0.220), inset 0 1px 1px rgba(255, 255, 255, 1.000), inset 0 0 0 1px rgba(255, 255, 255, 0.600);
  margin: 10px;
}

.bg{
  background-image: url('images/photo_2026-07-01_09-41-34.jpg') ;
  background-repeat: no-repeat, no-repeat;
  height: 100%; 
  background-position: center,center;
  background-size: cover,cover;
  background-attachment: fixed,fixed;
}

.computer-logo {
  padding:6px;
  margin: 10px;
  width: 170px;
  height: 160px;
  display: flex;
  position: relative;
  text-align: center;
  align-items: center;
}

a{
  cursor: url("./cursors/roundyhand.cur"), auto;
}

h2,h1, p{
  margin: 20px;
  font-family: sans-serif;
  font-size: 0.92vw;
  list-style-type: none;
  color:rgb(78, 114, 180)
}

.icon{
  width: 40px;
  height: 40px;
  padding: 6px;
}

.navbar{
  align-items: center;
  background: radial-gradient(ellipse 130% 90% at 50% 0%, #ffffffcb 0%, #ffffffb2 50%, #ffffffad 100%);
  color:rgb(60, 86, 133);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(10px) saturate(100%);
  border-radius: 26px;
  box-shadow: 0 33px 96px -24px rgba(66, 98, 104, 0.4), 0 1px 2px rgba(0, 0, 0, 0.200), 0 6px 24px rgba(0, 106, 255, 0.55), inset 0 0 8px rgba(255, 255, 255, 0.140), inset 0 4px 8px -4px rgba(0, 0, 0, 0.060), inset 0 -1px 1px rgba(255, 255, 255, 0.220), inset 0 1px 1px rgba(255, 255, 255, 1.000), inset 0 0 0 1px rgba(255, 255, 255, 0.600);
  overflow: hidden;
  transition: 
    transform 0.4s ease,
    box-shadow 0.4s ease,
    filter 0.4s ease;
  margin: 10px;

}

.navbar:hover, .navbar:focus-visible {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
  filter: brightness(1.2);
}

@media (prefers-reduced-motion: no-preference) {
  .navbar:hover, .navbar:focus-visible {
    transform: scale(1.1);
  }
}

.navbar ul {
  margin: 0%;
  list-style-type: none;
  padding: 5px;
  width: 100px;
}

.navbar ul li {
  float: left;
}

.navbar ul li a {
  cursor: url("./cursors/roundyhand.cur"), auto;
  display: flex;
  align-items: center;
  position: relative;
  color:rgb(60, 86, 133);
  text-align: center;
  padding: 4px;
  padding-bottom: 0px;
  padding-right: 20px;
  text-decoration: none;
}

.navbar ul li a:hover {
  box-shadow:rgba(255, 253, 253, 0.3);
  opacity: 0.9;
  filter: brightness(0.9);
  text-decoration: underline;
}

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "menu content"
    "footer footer"
;
}

.container div {
  padding: 0.2px;
}

.container div.header {
  grid-area: header;
  text-align: center;  
}

.container div.menu {
  grid-area: menu;
  width: 210px;
}

.container div.content {
  grid-area: content;
}

.container div.footer {
  grid-area: footer;
  text-align: center;  
}

.particle {
	position: absolute;
 	border-radius: 50%;
}

.pic{
  display: grid;
  place-items: center; 
}

:root {
    --item-width: 150px; 
    --item-height: 100px;
    --total-items: 24; 
    --animation-duration: 40s;
    --spacing: 5px; 
  }
  
.wrapper {
  padding: 20px;
  width: 98%;
  max-width: 1536px;
  position: relative;
  height: var(--item-height);
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0)
  );
}
  
@keyframes scrollLeft {
  to {
    left: calc(var(--item-width) * -1);
  }
}
  
.item {
  width: var(--item-width);
  height: var(--item-height);
  border-radius: 6px;
  position: absolute;
  left: max(calc((var(--item-width) + var(--spacing)) * var(--total-items)), 100%);
  animation-name: scrollLeft;
  animation-duration: var(--animation-duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  margin-right: var(--spacing);
  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - var(--n)) * -1);
}
  
.item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.marquee-heading {
  text-align: center;
  font-size: 2rem;
  color: #ffffff;
  font-family: "Inter", sans-serif;
}

.cloud-bottom-right{
  z-index: 1;
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: -80px;
  right: 70px;
  animation: cloudBottomRight 5s linear 2s infinite alternate;
}

@keyframes cloudBottomRight {
  0%   {left: 44vw; top: 70px;}
  50%  { left:34vw; top: 70px;}
  100% { left:44vw; top: 70px;}
}

.cloud-top-center{
  z-index: 1;
  width: 150px;
  height: 150px;
  position: absolute;
  top: -60px;
  right: 500px;
  animation: cloudTop 5s linear 2s infinite alternate;
}

@keyframes cloudTop {
  0%   {left:22vw; top:-60px;}
  50%  { left:30vw; top:-60px;}
  100% { left:22vw; top:-60px;}
}

.cloud-bottom-left{
  z-index: 1;
  width: 170px;
  height: 170px;
  position: absolute;
  bottom: -75px;
  left: 200px;
  animation: cloudBottomLeft 5s linear 2s infinite alternate;

}

@keyframes cloudBottomLeft {
  0%   {left:8vw; top: 86px;}
  50%  { left: 18vw; top: 86px;}
  100% { left:8vw; top: 86px;}
}

.header{
  display: flex;
  align-items: center;
  position: relative;
  background: radial-gradient(ellipse 130% 90% at 50% 0%, #ffffffb6 0%, #ffffffdc 50%, #ffffffc7 100%);
  color: rgb(0, 0, 0);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(10px) saturate(100%);
  border-radius: 26px;
  box-shadow: 0 33px 96px -24px rgba(66, 98, 104, 0.4), 0 1px 2px rgba(0, 0, 0, 0.200), 0 6px 24px rgba(0, 106, 255, 0.55), inset 0 0 8px rgba(255, 255, 255, 0.140), inset 0 4px 8px -4px rgba(0, 0, 0, 0.060), inset 0 -1px 1px rgba(255, 255, 255, 0.220), inset 0 1px 1px rgba(255, 255, 255, 1.000), inset 0 0 0 1px rgba(255, 255, 255, 0.600);
  margin: 10px;
  margin-top: 20px;
}

.header-title{  
  padding: 10px;
  color: rgb(0, 0, 0);
  font: "DlxFont";
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
}

.header-title h1{
  margin-top: 50px;
  font-size: 40px;  
  font-family: DlxFont;
  position: relative;
  top: 0;
  animation: bounce 0.3s ease infinite alternate;
  filter: drop-shadow( 0 3px #fcfeff) drop-shadow( 2px 0 #feffff) drop-shadow( 0 -1px #e6eaec) drop-shadow( -1px 0 #ffffff) drop-shadow( 0 5px rgba(242, 243, 240, 0.562)) drop-shadow( 5px 0 rgba(244, 245, 243, 0.904)) drop-shadow( 0 -5px rgba(251, 252, 251, 0.884)) drop-shadow( -5px 0 rgba(250, 250, 249, 0.76)) drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.6)) drop-shadow(1px 1px 0 rgba(247, 244, 244, 0.6)) drop-shadow( 0 0 2px #424242);
  color:rgb(157, 191, 255);
  display:inline-block;
  font-size:36px;
  font-weight:800;
  letter-spacing:2px;
}


@keyframes bounce {
  100% {
  top: -.50rem;
  }
}

li{
  font-family: sans-serif;
  font-size: large;
  list-style-type: none;
}

.logbook{
  font-size: 10px;
  align-items: center;
  background: radial-gradient(ellipse 130% 90% at 50% 0%, #ffffffb6 0%, #ffffffdc 50%, #ffffffc7 100%);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(10px) saturate(100%);
  border-radius: 26px;
  box-shadow: 0 33px 96px -24px rgba(66, 98, 104, 0.4), 0 1px 2px rgba(0, 0, 0, 0.200), 0 6px 24px rgba(0, 106, 255, 0.55), inset 0 0 8px rgba(255, 255, 255, 0.140), inset 0 4px 8px -4px rgba(0, 0, 0, 0.060), inset 0 -1px 1px rgba(255, 255, 255, 0.220), inset 0 1px 1px rgba(255, 255, 255, 1.000), inset 0 0 0 1px rgba(255, 255, 255, 0.600);
  margin: 10px;
}

.logbook img{
    margin: 0;
    padding: 1px 0px 2px 0px;
    vertical-align: middle;
}

.logbook-title{  
  color: rgba(53, 49, 49, 0.651);
}

.post{
  align-items: center;
  position: relative;
  background: radial-gradient(ellipse 130% 90% at 50% 0%, #ffffffb6 0%, #ffffffdc 50%, #ffffffc7 100%);
  color: rgb(0, 0, 0);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(10px) saturate(100%);
  border-radius: 26px;
  box-shadow: 0 33px 96px -24px rgba(66, 98, 104, 0.4), 0 1px 2px rgba(0, 0, 0, 0.200), 0 6px 24px rgba(0, 106, 255, 0.55), inset 0 0 8px rgba(255, 255, 255, 0.140), inset 0 4px 8px -4px rgba(0, 0, 0, 0.060), inset 0 -1px 1px rgba(255, 255, 255, 0.220), inset 0 1px 1px rgba(255, 255, 255, 1.000), inset 0 0 0 1px rgba(255, 255, 255, 0.600);
  margin: 10px;
  margin-bottom: 20px;
}

.grid-container{
  margin: 20px auto;
  width:400px;
  height:400px;
  background-color:#fff;
  display:grid;
  grid-template-columns: 200px 200px;
  grid-row: auto auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  .box{
    background-color:#333;
    padding:20px;
    border-radius:10px;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:40px;
    font-family:sans-serif;
  }
}

.footer{
  align-items: center;
  background: radial-gradient(ellipse 130% 90% at 50% 0%, #ffffffcb 0%, #ffffffb2 50%, #ffffffad 100%);
  color:rgb(60, 86, 133);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(10px) saturate(100%);
  border-radius: 26px;
  box-shadow: 0 33px 96px -24px rgba(66, 98, 104, 0.4), 0 1px 2px rgba(0, 0, 0, 0.200), 0 6px 24px rgba(0, 106, 255, 0.55), inset 0 0 8px rgba(255, 255, 255, 0.140), inset 0 4px 8px -4px rgba(0, 0, 0, 0.060), inset 0 -1px 1px rgba(255, 255, 255, 0.220), inset 0 1px 1px rgba(255, 255, 255, 1.000), inset 0 0 0 1px rgba(255, 255, 255, 0.600);
  transition: 
    transform 0.4s ease,
    box-shadow 0.4s ease,
    filter 0.4s ease;
  margin-bottom: 20px;
  margin-top: 0;
}

.footer h2{
  font-family: sans-serif;
  color:rgb(38, 88, 14);
  display:inline-block;
  font-size:17px;
  font-weight:800;
  letter-spacing:2px;
}

.cd__main{
    max-width: 720px !important;
}
 
img{
	max-width: 320px;
  height: auto;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */

}
 
.image-left, .image-right{
	margin: 1em 0;
}
 
@media (min-width: 20em)
{
	.image-left, .image-right{
		display: flex;
		align-items: center;
	}
 
	.image-left img{
		margin-right: 1em;
		float: left;
	}
 
	.image-right img{
		order: 1;
		margin-left: 1em;
		float: right; 
	}
	
  .image-left::after,
	.image-right::after{
		content: "";
  	display: block;
		clear: both;
	}
}
 
@media (min-width: 30em){
	.image-left img, .image-right img{
		flex-shrink: 0;
	}
}

.counter-box{
  background: cornflowerblue;
  margin-left: 10px;
  margin-right: 10px;
  padding: 50px;
  align-items: center;
}

.counter{
  padding: 50px;
  align-items: center;
  color:rgb(60, 86, 133);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(10px) saturate(100%);
  transition: 
    transform 0.4s ease,
    box-shadow 0.4s ease,
    filter 0.4s ease;
  margin: 10px;
}

.button-area{
  text-align: center;
  align-items: center;
  position: relative;
  background: radial-gradient(ellipse 130% 90% at 50% 0%, #ffffffcb 0%, #ffffffb2 50%, #ffffffad 100%);
  color: rgb(0, 0, 0);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(10px) saturate(100%);
  border-radius: 26px;
  box-shadow: 0 33px 96px -24px rgba(66, 98, 104, 0.4), 0 1px 2px rgba(0, 0, 0, 0.200), 0 6px 24px rgba(0, 106, 255, 0.55), inset 0 0 8px rgba(255, 255, 255, 0.140), inset 0 4px 8px -4px rgba(0, 0, 0, 0.060), inset 0 -1px 1px rgba(255, 255, 255, 0.220), inset 0 1px 1px rgba(255, 255, 255, 1.000), inset 0 0 0 1px rgba(255, 255, 255, 0.600);
  margin: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px;
  align-items: center;
}

.button-area h1{
  font-family: DlxFont;
  position: relative;
  top: 0;
  filter: drop-shadow( 0 3px hsl(200, 67%, 58%)) drop-shadow( 2px 0 #50c4c4) drop-shadow( 0 -1px #e6eaec) drop-shadow( -1px 0 #ffffff) drop-shadow( 0 5px rgba(242, 243, 240, 0.562)) drop-shadow( 5px 0 rgba(244, 245, 243, 0.904)) drop-shadow( 0 -5px rgba(251, 252, 251, 0.884)) drop-shadow( -5px 0 rgba(250, 250, 249, 0.76)) drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.6)) drop-shadow(1px 1px 0 rgba(247, 244, 244, 0.6)) drop-shadow( 0 0 2px #424242);
  color:rgb(157, 191, 255);
  display:inline-block;
  font-size:16px;
  font-weight:800;
  letter-spacing:2px;
}