@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DotGothic16&family=Geo:ital@0;1&family=Jura:wght@300..700&display=swap');

:root{
     --Blue:#7AC4CF;
     --Fond:#08090B;
     --Text:white;
     --Grey:#CEDDDE;
     --Other-blue:#A9C3C6;
}

body{
     font-family: 'jura', sans-serif;
     background-color: var(--Fond);
     color: var(--Text);
     margin: 0;
     padding: 0;
}

/* NAV BAR */

nav{
     padding: 20px 0px;
     text-align: center;
     z-index: 99;
}

nav ul{
     list-style: none;
     display: flex;
     justify-content: center;
     padding: 0;
}

nav ul li{
     margin: 15px 10px 10px 10px;
}

nav ul li a{
     text-decoration: none;
     font-family: 'rocket rinder', sans-serif;
     font-size: 14px;
     color: white;
     text-transform:uppercase;
     letter-spacing: 1px;
}

nav ul li a:hover{
     text-decoration:wavy;
     color: var(--Blue);
}

/*CACHER TOGGLE DESKTOP*/

.menu-toggle{
     display: none;
}
/**/

section{
     margin-bottom: 5vw;
}

section h2{
     font-family: 'Rocket rinder', sans-serif;
     font-size: 20px;
     text-align: center;
     letter-spacing: 1px;
}

/* HERO */

#hero{
     background-image: url('/img/hero.webp');
     background-position: bottom;
     text-align: center;
     padding: 25vh 5vw;
}

#hero h1, #hero p{
     font-family: 'Dogica', sans-serif;
     font-weight: bold;
     text-transform: uppercase;
     color: var(--Text);
     text-shadow: 1px 1px 2px white, 0 0 25px var(--Blue), 0 0 5px var(--Other-blue);
     padding: 20px 0px 20px 0px ;
}

#hero h1{
     font-size: 28px;
}

#hero p{
     font-size: 24px;
}

.border-hero{
     border: 6px ridge var(--Grey);
     box-shadow: rgba(255, 255, 255, 0.3) 0px 4px 12px;
     width: 70vw;
     margin: auto;
}

/* ABOUT */

#about{
     padding: 0 10vw;
     color: azure;
}

h2 {
     display: grid;
     width: 100%;
     align-items: center;
     text-align: center;
     grid-template-columns: minmax(10px, 1fr) auto minmax(10px, 1fr);
     grid-gap: 20px;
 }
 
 h2:before,
 h2:after {
     content: '';
     border-top: 3px solid;
 }

#about p{
     text-align: center;
     font-weight: light;
     font-size: 15px;
     padding: 0 10vw 0 10vw;
     line-height: 26px;
}

/* PROJECTS */

#projects{
     margin-top: 10vw;
}

.project-container{
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
     padding: 3vw 3vw;
     flex-wrap: wrap;
}

.project-card{
     padding: 2vw;
     overflow: hidden;
     background-color: #171616;
     border: 4px ridge var(--Text);
     border-radius: 10px;
     box-shadow: rgba(255, 255, 255, 0.3) 0px 4px 12px;
}

.project-card a{
     text-decoration: none;
     color: var(--Blue);
}

.project-card a:hover{
     color: var(--Other-blue);
}

.project-card a:visited{
     color: var(--Grey);
}

.project-card img{
     border-radius: 10px;
     border: 1.5px dotted var(--Blue);
     width: 100%;
     height: 150px;
     object-fit: cover;
}

.project-card h3{
     text-align: center;
     padding-top: 0.75vw;
     text-transform: uppercase;
     font-family: 'dogica pixel', sans-serif;
     font-size: 12px;
     color: var(--Blue);
     font-weight: bold;
}

.project-card p{
     font-size: 13px;
     text-align: justify;
     font-family: 'jura', sans-serif;
     font-weight: lighter;
     margin: 2vw 1vw;
}

.project-card .btn{
     display: block;
     text-align: center;
     padding: 10px;
     margin:10px;
     background-color: var(--Text);
     color: var(--Blue);
     font-family: 'geo', sans-serif;
     font-size: 16px;
     text-decoration: none;
     text-transform: uppercase;
     font-weight: bolder;
     border-radius: 5px;
     transition: background-color 0,3s;
}

.project-card .btn:hover{
     background-color: var(--Blue);
     color: var(--Text);
}

/* SKILLS */

#skills{
     display: block;
     text-align: center;
     color: white;
}

.skill-container{
     display: flex;
     justify-content: center;
     gap: 2.5vw;
     padding-top: 3vw;
     flex-wrap: wrap;
}

.skill-card{
     width: 100px;
     display: flex;
     flex-direction: column;
}

.circle{
     width: 100px;
     height: 100px;
     background: white;
     border-radius: 50%;
}

#skills img{
     margin-top: 1.2vw;
     width: 67px;
     height: 67px;
}

#skills img:hover{
     transform: scale(1.5);
}

.skill-card p{
     font-size: 14px;
}

/* CONTACT */

#contact{
     display: flex;
     flex-direction: column;
     align-items: center;
}

#contact h2{
     margin-bottom: 4vw;
}

form{
     max-width: 45vw;
     width: 100%;
     margin: 0 auto;
     padding: 4vw 3vw 1.5vw 3vw;
     background-color:#171616;
     border-radius: 8px;
     border: 5px ridge white;
}

form div{
     margin-bottom: 2vw;
}

form input, form textarea{
     background-color: var(--Text);
     max-width: 100%;
     min-width: 100%;
     padding: 12px 5px;
     border: 1px solid #555;
     border-radius: 5px;
     box-sizing: border-box;
}

form textarea{
     min-height: 130px;
}

form label{
     display: block;
     margin: 5px 0px 10px 5px;
     font-family: 'geo', sans-serif;
     font-weight: bold;
     font-size: 17px;
     color:var(--Text);
}

form input{
     padding-left: 10px;
     font-family: 'jura', sans-serif;
     font-size:13px;
}

form button{
     padding: 15px;
     width: 100%;
     border-radius: 7px;
     background: #A9C3C6;
     color: var(--Text);
     border: none;
     font-weight: bold;
     font-size: 12px;
     text-transform: uppercase;
     font-family: 'Dogica', sans-serif;
     transition: background-color 0.3s;
}

form button:hover{
     scale: 1.01;
     background-color: var(--Text);
     color: var(--Blue);
}

#message{
     padding-left: 15px;
     font-style: italic;
     font-size: 11px;
}

footer{
     display: flex;
     justify-content: center;
     font-family: 'rocket rinder', sans-serif;
     font-size: 12px;
     letter-spacing: 1.5px;
     color: white;
     padding-top: 50px;
     padding-bottom: 10px;
}

/* RESPONSIVE */

@media(max-width: 768px){

.menu-toggle{
     display: block;
     font-size: 30px;
     cursor: pointer;
}

nav{
     position: sticky;
     top: 0;
     height: 45px;
     background-color: var(--Fond);
}

#nav-links{
     display: none;
}

#nav-links.show{
     display: flex;
     flex-direction: column;
     background-color: var(--Fond);
     width: 100%;
     padding: 0px 0px 15px 0px;
}

}