/*controls how everything that isn't  specific looks.*/
@font-face { font-family: Gotham; src: url('Gotham-Bold.otf'); } 


body{
font-family:Gotham;
text-align: center;
    position: relative;
    width: 100vw;
    min-height: 100vh;
    z-index: 1;
    overflow-x: hidden;
    overflow-y: scroll;
    margin: 0%;
    background-color: #0C0F0A;
    color:#F9E0D9;
}

/* Controls the font and appearance*/
h1{
    font-size: xxx-large;
    text-align: center;
    color: #0C0F0A;
}

/*Buttons and their behavour when hovered over*/

a{
    text-decoration: none;
    line-height: 5;
    background:#0C0F0A;
    padding: 15px;
    border-radius: 5px;
    color:#e3dcdc;
    font-weight: 500;
    transition-duration: 1s;
    transition-delay: 50ms;
    margin: 3px;
}

a:hover{
    border-radius: 25px;
    padding: 25px;
    transition-duration: 1s;
    transition-delay: 50ms;
    color:#0C0F0A;
    background:#e3dcdc;
    filter: drop-shadow(-10px 10px 10px #e3dcdc5c);
}

.heading{
    margin:5%;
    background-color:#e3dcdc;
    padding:50px;
    border-radius: 10px;
    color: #0C0F0A;
    filter: drop-shadow(-10px 10px 10px #e3dcdc5c);
}

.sub{
    margin: 5%;
    background-color: #e3dcdc;
    padding: 15px;
    border-radius: 10px;
    color: #0C0F0A;
    filter: drop-shadow(-10px 10px 10px #e3dcdc5c);
}

.sub1{
    margin: 5%;
    background-color: #000000;
    padding: 15px;
    border-radius: 10px;
    color: #e3dcdc;
    filter: drop-shadow(-10px 10px 10px #000000d8);
}

.container { 
     display: flex;
     justify-content: center; /* add gap if needed */ 
}

#white{
    background:#e3dcdc;
    padding: 5px;
}

#copy{
    padding: 50px;
    filter: drop-shadow(-10px 10px 10px #e3dcdc5c);
    color: #e3dcdc;
}

.header{
    align-items: center;
    margin: 0%;
    padding: 0%;
}



/* Base font size for desktop */
body {
    font-size: 18px; /* Adjust as needed */
}

/* Smaller font size for tablets and small screens */
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }
}

/* Even smaller font size for mobile devices */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
}