/* Main css file for the entire project, smart, I know */

/* Fonts */

@font-face { font-family: FreeSans; src: url('fonts/FreeSans.ttf'); } 
@font-face { font-family: FreeSansBold; src: url('fonts/FreeSansBold.ttf'); } 
@font-face { font-family: MilkCake; src: url('fonts/MilkCake.otf'); } 

/* Defining default styles of common elements */
p {
  padding: 35px 70px;
  text-align: center;
  width: 60vw;
  margin: 0 auto;

  border: 10px solid black;
  border-style: groove;
  background-color: grey;

  font-family: FreeSans;
  font-size: 30px;
}

h1 {
  padding: 35px 70px;
  text-align: center;

  font-family: FreeSansBold;
  font-size: 60px
}

button { /* Unused I believe */
  background-color: #555555;
  text-align: center;
  justify-content: center;
  align-items: center; 
 
  font-size: 30px;
  font-weight: bold;
  color: #2b85a6;
}

a { 
  text-align: center;

  color:blue;
  text-decoration:none;
}


/* Prevent ugly horizontal scroll */
/*
Source - https://stackoverflow.com/a/17756714
Posted by omma2289
Retrieved 2025-12-10, License - CC BY-SA 3.0
*/

html, body {
  max-width: 100%;
  overflow-x: hidden;

  width: 100%;
  height: 100%;
  margin: 0;
}

/* Default background image & Font */

body {
  justify-content: center;
  align-items: center;

  background-image: url('images/bliss.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;

  font-family: FreeSans, sans-serif;
  color: white;
}

/* Random divs */

.main{
  width: 980;
  margin-bottom: 10px;
  margin: auto;
  left:50%;
  border: 3px outset #b63ba6;
  background-image: url(images/behang.jpg);
}

.status{
  background-image: url(images/hotpink.jpg);
  margin: 20px;
  z-index: 999;
}

.top{
  width: 100%;
  height: 40px;
  position: fixed;
  right: 0px;
  top: 0;
  background: url(images/lights3.png) repeat left top;
  background-size: 200px;
}

.extras {
  display: grid;
  grid-template-columns: 500px 1fr; /* two equal columns */
  gap: 1rem; /* optional spacing */
}

.left {
  grid-column: 1;
}

.right {
  grid-column: 2;
}


/* Stamps carousel */

.stamps {
  width: 100%;
  overflow: hidden;
}

/* Container for horizontal layout */
.carousel {
  display: flex;
  width: max-content;
  animation: marquee-content 50s linear infinite;
}

/* Individual items */
.carousel_item {
  flex-shrink: 0;

  text-align: center;
}

@keyframes marquee-content {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}