/* Body styles */
body {
    background: linear-gradient(135deg, #6a6a6a, #4d4d4d); /* Subtle grey gradient for a clean backdrop */
    color: #ffffff; /* White text for readability */
    font-family: 'Arial', sans-serif; /* Clean, professional font */
    margin: 0;
    padding: 0;
}


/* Cover image */
.cover_img {
    margin: 5px;
    width: 100%;
}

/* Horizontal container */
.horz_cont {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* Vinyl canvas texture container */
.container {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background: 
        repeating-linear-gradient(45deg, #5a5a5a 0px, #5a5a5a 10px, #6e6e6e 10px, #6e6e6e 20px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.1));
    border: 2px solid #3c3c3c; /* Thin, clean dark grey border */
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.4); /* Inner and outer shadows for depth */
    position: relative;
    overflow: hidden;
}

/* Adding stitch-like patterns to simulate seams */
.container:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        #3c3c3c 0px,
        #3c3c3c 2px,
        transparent 2px,
        transparent 8px
    ); /* Mimicking vertical stitches */
    opacity: 0.5;
    transform: translateX(-50%);
}

.container:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(
        to right,
        #3c3c3c 0px,
        #3c3c3c 2px,
        transparent 2px,
        transparent 8px
    ); /* Horizontal stitch line */
    opacity: 0.5;
    transform: translateY(-50%);
}

/* Buttons styled to look like inflatable pieces */
.home-button {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.1em;
    padding: 15px 30px;
    margin: 10px;
    color: #ffffff; /* White text */
    background-color: #002b4e; 
   
    border-radius: 2px; /* Rounded edges for a "bouncy" look */
    cursor: pointer;
    box-shadow: 6px 6px 0 #333333; /* Drop shadow for depth */
    text-decoration: none;
    display: inline-block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-button:hover {
    background-color:#144fbb ; /* Lighter orange on hover */
    box-shadow: 8px 8px 0 #222222; /* Deeper shadow */
    transform: translate(-1px, -5px); /* "Bounce up" effect */
}

.home-button:active {
    background-color: #ff5733;
    box-shadow: 4px 4px 0 #111111; /* Reduced shadow for pressed look */
    transform: translate(0, 0);
}

.horz_cont {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.vert_cont {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Professional button option */
button {
    width: 150px;
    padding: 10px;
    margin: 10px;
    border: 2px solid #3c3c3c; /* Thin, clean border */
    background: 
        linear-gradient(135deg, #4d4d4d, #5e5e5e), 
        linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));
    background-blend-mode: overlay;
    color: #ffffff; /* White text for clarity */
    font-size: 16px;
    font-family: 'Arial', sans-serif;
    cursor: pointer;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3), 0 5px 10px rgba(0, 0, 0, 0.5); /* Inner and outer shadows for depth */
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.hel{
    width:95%;
    background-color: #273246;
    padding: 20px;
    font-size: 1.5em;
}
.unit{
    background-color:#002b4e;
    height: 100%;
    margin: 2px;
    padding: 20px;
    font-size: 1.5em;
}
.bunit{
    background-color:#636363;
    height: 100%;
    margin: 2px;
    padding: 20px;
    font-size: 1.5em;
}
button:hover {
    transform: translateY(-2px); /* Subtle lift on hover */
    background: 
        linear-gradient(135deg, #5e5e5e, #6e6e6e), 
        linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.3));
}

button:active {
    transform: translateY(0); /* Pressed state */
    background: linear-gradient(135deg, #4d4d4d, #5e5e5e);
}