/*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);
    min-width: 200px;
}

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

.container { 
     display: flex;
     justify-content: left; /* add gap if needed */ 
     overflow-x: scroll;
}

#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%;
}