@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Quicksand:wght@300..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


:root {
  --base-color: #000000;
  --text-color: #ffffff;
  --primary-color: #000000;
  --secondary-color: #ff0000;
  --color-1: #f9f6f3;
  --color-2: #f3f7f9;
  --color-3: #242325;
}


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

html {
    font-family : quicksand , sans-serif ;
    color: var(--text-color);
    scroll-behavior: smooth;
}

body {
    padding: 5em;
    background-color: var(--base-color);
}

h1 {
    font-family : Merriweather; sans-serif;
    color: var(--text-color);
}

h2 {
    font-family : Merriweather; sans-serif;
    font-size: larger;
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 1em ;
}

nav {
    margin: 1em auto 3em auto;
    width: min(10000px, 100%);
    color: var(--secondary-colorr);
}


nav ul {
    display: flex ;
    align-items: center ;
    list-style: none;
    gap: 1em;
   
}

nav li:first-child {
    margin-right:auto;
    font-weight: bold;

}

nav a {
    text-decoration: none;
    font-weight: bold;
    color: var(--primary-color);
    padding: .5em .5em;
    border-radius: .5em;
}

nav a:hover{
    transform: scale(1.15);
    filter: drop-shadow(0 0 0.4rem var(--secondary-color));
}


header, section{
    width: min(75rem, 100%);
    margin: 3rem auto;
    padding: clamp(2rem, 5vw, 4rem);
    background-color: #242222;
    border-radius: 1rem; 
    
}

header {
    height: auto;
    min-height: unset;
}

section {
    min-height: 80vh;
}

.flex-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7em ;
    width: 100%;
}

header img{
    max-width: 100%;
    border-radius: 1em ;
    object-fit: cover;
    object-position: center;
}

.text-container {
    width: 100%;
    max-width: 65rem;
}

h1 {
    font-size:2.5rem;
}

.text-container p{
    margin: .75em 0  1em 0;
    font-size: 1rem;
}

.cta-button{
    margin-top: 2em;
    display: inline-block;
    font-family: Merriweather;
    text-decoration: none;
    color: var(--primary-color);
    background-color: var(--secondary-color);
    padding: .5em 1em;
    border-radius: 1em;
    font-weight: 600;
    margin-left: 1em;
}
.cta-button-text:hover{
    transform: scale(1.09);
    filter: drop-shadow(0 0 0.9rem var(--primary-color));
}


.skills-container{
      flex: 0 1 100em;
      
}

.skill-logo{
    width: 5rem;
    height: 5rem;
    object-fit: contain;
}

.skill-logo-sv{
    width: auto rem;
    height: auto rem;
    object-fit: contain;
}

.skill-logo-cs{
    height: 5.5rem;
    width: 6rem;
}

.nav-logo{
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.youtube-logo{
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;

}

.profile-image{
    display: block;
    width: 300px;
    height: 250px;
    object-fit: cover;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8em;
    border-radius: 1rem;
}

.projects-container{
    margin-top: 8rem;
}

.hardware-projects-title{
    margin-top: 7rem;
}

.project-grid {
    margin-top: 2em;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.project-card {
    border-radius: 1rem;
    background-color: #000000;
    padding: clamp(2rem, 5vw, 4rem);
    flex: 1 1 20rem;
    min-height: 32rem;
    display: flex;
    flex-direction: column;
    

}
.project-card:hover{
    transform: scale(1.005);
    filter: drop-shadow(0 0 0.4rem var(--secondary-color));
}

.project-tech {
    margin-top: auto;
    display: flex;
    gap: 1rem;
    align-items: center;
    padding-top: 2rem;
}

.project-logo {
    width: 4rem;
    height: 4rem;
    object-fit: contain;
}

.verilog-project-logo{
    width: 7rem;
    height: 7rem;
    object-fit: contain;
}

.css-project-logo{
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain;
} 

.contact-container{
    display: flex;
    flex-direction: column;
    align-items: center;

}

h3 {
    font-family : Merriweather; 
    font-size: 3em;
    font-weight: bold;
    color: var(--text-color);
}

.contact-message{
    margin-top: 6em;
    font-size:xx-large ;
    font-weight: bold ;
}

.contact-plane{
    margin-top: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.contact-info{
    font-weight:500;
    font-size: x-large;
}

.contact-form{
    margin-top: 2em;
    width: min(35rem, 100%);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form-row{
    display: flex;
    gap: 0.75rem;   
}

.contact-form input,
.contact-form text {
    width: 100%;
    padding: 1em;
    border: none;
    border-radius: 0.5rem;
    background-color: #000000;
    color: white;
    font-family: Quicksand, sans-serif;
    font-weight: bold;
}

.contact-form textarea{
    min-height: 8rem;
    resize: vertical;
    background-color: #000000;
    color: white;
    border: none;
    border-radius: 0.1rem;
    font-family: Quicksand, sans-serif;
    font-weight: bold;

}
.contact-form button{
    padding: 1em;
    border: none;
    border-radius: 0.5rem;
    background-color: #000000;
    color: white;
    font-family: Merriweather, sans-serif;
    font-weight: bold;
}