/*  */


@font-face {
    font-family: 'Geist';
    src: url('fonts/GeistMono-VariableFont_wght.ttf') format('truetype');
    font-style: normal;
    font-display: swap}


@font-face {
    font-family: 'righteous';
    src: url('fonts/Righteous-Regular.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap}

/* Phones*/
@media only screen and (max-width: 600px) {

    p {
        padding: 0 1.9rem;}

    h2 {
        font-size: 3rem;}

    .about, .contact{
        font-size: 1.7rem;}

}



/* tablets */

@media only screen and (min-width: 600px) and (max-width: 768px) {

    p {
        padding: 0 2.1rem;}

    h2 {
        font-size: 4rem;}

    .about, .contact{
        font-size: 1.8rem;}
    
  }

/* small laptops */
@media only screen and (min-width: 768px) {

    p {
        padding: 0 2.1rem;}

    h2 {
        font-size: 4rem;}

    .about, .contact{
        font-size: 1.8rem;}
  }






* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;}

body {
  font-size:16px;
    background-color:black;
color:white;}

p {
  font-family: Geist, serif;
  line-height: 1;
letter-spacing: -2px;
text-align:center}

a {          
  text-decoration: underline #ffe200 2px;     
  font-weight:600;}

h2 {
  font-family: righteous, sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  padding: 2rem 0;
  text-transform: uppercase;
}




/* Header Section */

.hero {
    width: 100%; /* Makes the image take up 100% of the container's width */
    height: auto; /* Maintains the aspect ratio */
    display: block; /* Removes any inline spacing */
}






.about-frame {
      padding: 0 1rem;
}


.about {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}



/* Get in Touch */


.contact-frame{
    padding: 2rem 1rem 15rem 1rem;}


.contact {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 1.5rem;}

.form {
    padding: 1rem;}



/* Footer */

footer {
    font-family: Geist, sans-serif;
    background: #333;
    padding: 1rem;
    text-align: center;
}

footer h2{
    font-family: sans-serif;
    font-size: 2.3rem;
    font-weight: bold;
    padding:0 0 0.5rem 0;
}


.social{
  display:none;
  padding: 1rem 0;
}

footer a {
    margin: 0 0.5rem;
  text-transform: uppercase;
}