* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensures padding and border are included in the element's size */
}

.centered {
    text-align: center;
    color: rgb(237, 244, 255);
    font-family: 'BebasRegular', sans-serif;
    letter-spacing: 3px;
    font-size: 60px;
}

.centered-block {
    display: block;
    width: 140px;
    height: 40px;
    margin: 0 auto;
    background-color: lightpink;
}

html, body {
    width: 100%;
    height: 100%;
}

.static-background {
    width: 100%;
    height: 100vh; /* Adjust height if needed */ 
    background-size: cover; 
    background-image: linear-gradient(to bottom, rgb(0, 0, 0), rgb(41, 41, 41));
}

.fullscreen-div {
    position: relative;
    background-color: black;
    width: 100%; /* Viewport width */
    height: 100vh; /* Viewport height */
    margin: 0; /* Removes any default margin */
    padding: 0; /* Removes any default padding */
}

.buttons-container {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 100%; /* Optionally stretch the child div's width */
}

button {
    position: absolute;
    width: 180px;
    height: 80px;
}
/* Sets the buttons in the corners */
.top-left {
    top: 20px;
    left: 20px;
}

.top-right {
    top: 20px;
    right: 20px;
}

.bottom-left {
    bottom: 20px;
    left: 20px;
}

.bottom-right {
    bottom: 20px;
    right: 20px;
}

/* Sets the fade in and out classes */
.fade-in-element {
  color: white;
  opacity: 0;
  transform: translateY(20vh);
  visibility: hidden;
  transition: opacity 0.6s ease-out, transform 1.2s ease-out;
  will-change: opacity, visibility;
}

.fade-in-element.visible {
  opacity: 1;
  transform: none;
  visibility: visible;
}

/* CSS for nice buttons in corner*/
.pretty-button {
  align-items: center;
  background-image: linear-gradient(144deg,#3f1616, #884e4e 50%,#aa8f8f);
  border: 0;
  border-radius: 8px;
  box-shadow: rgba(253, 74, 74, 0.2) 0 0 30px 3px;
  box-sizing: border-box;
  color: rgb(237, 244, 255);
  display: flex;
  font-family: Georgia, serif;
  font-size: 20px;
  justify-content: center;
  line-height: 1em;
  max-width: 100%;
  min-width: 140px;
  padding: 3px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
  white-space: normal; /* Allow text to wrap */
  word-wrap: break-word; /* Break long words */
}

.pretty-button:active,
.pretty-button:hover {
  outline: 0;
  box-shadow: rgba(253, 74, 74, 0.2) 0 0 20px 10px;
  transition: 300ms;
}

.pretty-button span {
  background-color: rgb(3, 3, 3);
  padding: 26px 24px;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  transition: 300ms;
}

.pretty-button:hover span {
  background: none;
}

@media (min-width: 768px) {
  .pretty-button {
    font-size: 24px;
    min-width: 196px;
  }

  .pretty-button-big {
    font-size: 24px;
    min-width: 196px;
  }
}

.pretty-button-big {
    align-items: center;
    background-image: linear-gradient(144deg,#3f1616, #884e4e 50%,#aa8f8f);
    border: 0;
    border-radius: 8px;
    box-shadow: rgba(253, 74, 74, 0.2) 0 0 30px 3px;
    box-sizing: border-box;
    color: rgb(237, 244, 255);
    display: flex;
    font-family: Georgia, serif;
    font-size: 22px;
    justify-content: center;
    line-height: 1em;
    max-width: 100%;
    min-width: 140px;
    padding: 3px;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    cursor: pointer;
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Break long words */
}
  
.pretty-button-big:active,
.pretty-button-big:hover {
  outline: 0;
  box-shadow: rgba(253, 74, 74, 0.2) 0 0 20px 10px;
  transition: 300ms;

}

.pretty-button-big span {
  background-color: rgb(3, 3, 3);
  padding: 16px 24px;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  transition: 300ms;
}

.pretty-button-big:hover span {
  background: none;
}

/* Imports the font from assets folder */
@font-face {
  font-family: 'BebasRegular';
  src: url('assets/BebasNeue-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Containers on the static background (the divs) */
.static-div-flex {
  width: 100%;
  height: 21%;
  display: flex;
  justify-content: space-between; /* Adds space between the two containers */
  align-items: center; /* Aligns items vertically */
}


/* Container for the image on static bg */
.image-container {
  width: 49%;
  height: 211.3px;
  text-align: center;
}

/* Resizes and align the image */
.static-image {
  display: block;
  max-width:100%;
  max-height:90%;
  margin: auto;
  border-radius: 20px;
  border: 2px solid silver;
}

/* Container for the graphic on static bg */
.graphic-container {
  width: 49%;
  height: 211.3px;
  text-align: center;
}

/* Resizes and align the image */
.static-graphic {
  width: 600px;
  height: 210px;
  vertical-align: middle;
}

.section-header {
  padding-left: 30%;
  padding-right: 30%;
  padding-top: 10px;
  color: rgb(237, 244, 255);
  font-family: 'BebasRegular', sans-serif;
  letter-spacing: 3px;
  font-size: 20px;
}

.section {
  padding-left: 20%;
  padding-right: 20%;
  padding-top: 10px;
  color: rgb(237, 244, 255);
  font-family: 'BebasLight', sans-serif;
  letter-spacing: 3px;
  font-weight: 600;
  font-size: 20px;
}

.static-div {
  width: 100%;
  height: 21%;
  justify-content: space-between; /* Adds space between the two containers */
  overflow: hidden;
}

/* Imports the font from assets folder */
@font-face {
  font-family: 'BebasLight';
  src: url('assets/BebasNeue-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Now, we are onto the section for the projects div elements. */
.projects-background {
  background-color: black;
  width: auto; /* Viewport width */
  height: 100vh; /* Viewport height */
  margin: 0; /* Removes any default margin */
  padding: 0; /* Removes any default padding */
}