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

@font-face {
    font-family: 'Kristi';
    src: url('fonts/kristi.woff2') format('woff2'),
         url('fonts/kristi.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
  
:root {
    --font-family-kristi: 'Kristi', sans-serif;
    --font-family-poppins: 'Poppins', sans-serif;
}

body {font-family: var(--font-family-poppins); overflow:hidden;}

.top {padding-bottom: 50px; }

.logo {scale: 30%; position: fixed; top: -20px; left: -20px;}

.dark_button {position:fixed; background-color: white; color: black; right: 10px; top: 10px;}

.dark-mode {background-color: #272727; color: white;}

.contact_container {display: inline-flex; flex-direction: row; align-items: center; margin-top: -10vh; margin-left: 15vw; margin-right: 5vw;}

.contact-right img{scale: 70%; margin-top: 2.5vh}

.contact_left {width: 800px; display: flex; flex-direction:column; align-items: start; gap: 20px; }

.contact-left-title h2{margin-bottom: 5px;}

.contact-left-title hr{margin-bottom: 10px; width: 400px; }

.contact-inputs{ font-family: var(--font-family-poppins); width: 400px; height: 20px; margin-bottom: 10px; padding: 15px; border: none; outline: none; border-radius: 10px; background-color: rgb(239, 239, 238);}

.contact-left textarea {height: 100px; border-radius: 10px;}


.contact-inputs:focus {border: 2px solid pink;}

button { font-family: var(--font-family-poppins);
    margin-top: 5px;
    margin-left: 2px;
    margin-right: 10px; 
    font-size: 100%; 
    border: 0; 
    background-color: pink;
    border-radius: 30px;
    padding: 5px 20px;
    height: fit-content;
  }
  
a {color: gray; text-decoration: none;}

button:hover {
    background-color: #dbe2f0; /* White background on hover */
}


@media(max-width: 800px) {
    .contact-left{
        margin-top: 37vh;
        width: 80vw;
        margin-left: -5vw;
    }

    .contact-left-title hr{width: 80vw;}
    
    .contact-inputs{width: 80vw}

    .contact-right{
        display: none;
    }
    }