*{
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body{
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: 'DM Sans', sans-serif;
    display: flex;
    flex-direction: column;
    background: burlywood;

 
    background-image:
        radial-gradient(circle 1300px at 50% 50%, 
            rgba(194, 65, 12, 0.18) 0%, 
            rgba(194, 65, 12, 0.1) 25%, 
            rgba(194, 65, 12, 0.04) 35%, 
            transparent 50%
    );
}
#maincontainer{
    margin: 0;
    padding: 0;
    flex: 1;
}
.mid-cont{
    margin: auto;
    padding: 0 20px;
    max-width: 1180px;
    min-width: 350px;
    position: relative;
}

#maincontainer .mid-cont{
    padding: clamp(80px, 10%, 150px) 20px 0;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}
h1{
    margin: 0 0 3rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 1rem + 4vw, 3rem);
    color: white;

    letter-spacing: 1px;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
}
h1 span{
    font-size: clamp(1.25rem, 0.75rem + 2.5vw, 1.75rem);
    letter-spacing: 0;
}
#maincontainer p{
    color: #2F3542;
    font-weight: 500;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    column-gap: 10px;
}
#maincontainer > .mid-cont p:nth-child(2){
    margin: 0 0 clamp(0.6rem, 1.5vw, 0.9rem);
    font-size: clamp(1rem, 2.5vw, 1.1rem);
}
#maincontainer > .mid-cont p:nth-child(3){
    margin: 0 0 clamp(0.6rem, 1.5vw, 0.9rem);
    font-size: clamp(1rem, 2.5vw, 1.1rem);
}
#maincontainer > .mid-cont p:nth-child(4){
    margin: 0 0 clamp(0.6rem, 1.5vw, 0.9rem);
    font-size: clamp(1rem, 2.5vw, 1.1rem);
}

#maincontainer > .mid-cont p:nth-child(6){
    margin: 0 0 1.5rem;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
}
#maincontainer > .mid-cont div:nth-child(7){
    margin: 0 0 2rem;
    display: flex;
    justify-content: center;
    gap: 1.15rem;
}
#maincontainer > .mid-cont a{
    color: white;
    text-decoration: unset;
}

#pixelart{
    margin: -35px 0 0;
    width: 400px;
    max-width: 100%;
    height: auto;
    user-select: none;
}

#clockdiv{
    width: 205px;
    font-size: 0.875rem;
    color: white;
    position: absolute;
    top: 10px;
    right: 10px;
}

footer{
    display: none;

    padding: 4px 0;
    width: 100vw;
    min-width: 350px;
    font-size: 0.8rem;
    color: white;
    background: #2F3542;
}
footer a{
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.8rem;
    color: white;
    text-decoration: none;
}

/* Text select color */
::selection {
  background-color: #2f3542; /* Changes the highlight background */
  color: #f1f2f6;            /* Changes the text color itself */
}

/* older Mozilla Firefox */
::-moz-selection {
  background-color: #2f3542;
  color: #f1f2f6;
}