/* Buttons will be side by side */
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    height: 100vh;
}

/*gives button a colour gradient */
.gradient-button {
    width: 180px;
    height: 60px;

    display: flex;
    justify-content: center;
    align-items: center;

    background: linear-gradient(to right, #56340d, #743908);
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;

    position: relative;
    overflow: hidden;

    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* gives the button a shadow (for pop-out effect! so cute!) */
.gradient-button:hover {
    background: linear-gradient(to right, #1b80ba, #075ca2);
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

/* scales the shadow to be bigger when cursor hovers */
.gradient-button:active {
    transform: scale(0.97);
}

.namefont {
  font-family: "Explora", serif;
  font-weight: 800;
  font-style: bold;
  font-size: 65px;
}

.namefont2 {
    font-family: "Explora", serif;
    font-weight: 800;
    font-style: bold;
    font-size: 65px;
    position: absolute;   /* take it out of normal flow */
    top: 20px;            /* distance from the top of the page */
    right: 20px;          /* distance from the right edge */
    margin: 0;            /* remove default margins */
    color: rgb(59, 31, 12);
}

.namefont3 {
    font-family: "Explora", serif;
    font-weight: 800;
    font-style: bold;
    font-size: 65px;
    position: absolute;   /* take it out of normal flow */
    top: 20px;            /* distance from the top of the page */
    left: 20px;          /* distance from the right edge */
    margin: 0;            /* remove default margins */
    color: rgb(59, 31, 12);
}

body {
    font-family: "times new roman", serif;
    text-align: left;
    background-color: rgba(235, 227, 168, 0.541);
}


.transparent-textbox {
    width: 300px;
    min-height: 170px;

    background: transparent;   /* transparent background */
    border: none;              /* remove borders */
    color: rgb(59, 31, 12);              /* text color */
    padding: 0;
    resize: none;
    outline: none;
    line-height: 1.6;

    /* Auto line wrapping */
    white-space: pre-wrap;
    word-wrap: break-word;

    /* remove the default styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;

    position: relative;
    left: -60px;   /* move right by 30px */
    top: -1px;
}

.transparent-textbox2 {
    width: 300px;
    min-height: 170px;

    background: transparent;   /* transparent background */
    border: none;              /* remove borders */
    color: rgb(59, 31, 12);              /* text color */
    padding: 0;
    resize: none;
    outline: none;
    line-height: 1.6;

    /* Auto line wrapping */
    white-space: pre-wrap;
    word-wrap: break-word;

    /* remove the default styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;

    position: relative;
    left: -60px;   /* move right by 30px */
    top: 50px;
}

.hero {
    background-image: url('../images/bd4d34d9-9bea-4d5f-a930-56e25a145046.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: rgb(44, 20, 4);
    padding: 0;
    position: relative;
}

.hero2 {
    background-image: url('../images/bb31bbbe-1fc3-46a9-8a86-cdb8e07eefde.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: rgb(44, 20, 4);
    padding: 0;
    position: relative;
}

.drifting-text {
    position: relative;
    left: -70px;  /* move left */
    top: -25px;   /* move up */

}

.drifting-text2 {
    position: relative;
    left: -60px;  /* move left */
    top: -35px;   /* move up */

}

.guide-text {
    position: absolute;   /* place it anywhere on the page */
    top: 260px;           /* adjust vertical position */
    left: 20px;           /* distance from left edge */
    width: 250px;         /* optional: limit width */
    text-align: left;     /* align text and list inside container */
}

.button-level {
    position: absolute;   /* place it anywhere on the page */
    top: 500px;           /* adjust vertical position */
    right: 630px;          /* distance from right edge */
    background: linear-gradient(to right, #56340d, #743908);
    color: rgb(239, 225, 214);
    border: none;
}

.hero3 {
    background-image: url('../images/a9a94c36-f802-4a4a-8cdd-dab78ec06c89.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: rgb(44, 20, 4);
    padding: 0;
    position: relative;
}

.button-level2 {
    position: absolute;   /* place it anywhere on the page */
    top: 260px;           /* adjust vertical position */
    right: 630px;          /* distance from right edge */
    background: linear-gradient(to right, #56340d, #743908);
    color: rgb(239, 225, 214);
    border: none;
}