@import url('https://fonts.googleapis.com/css2?family=WindSong&display=swap');
@import url('Animation.css');

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

:root{
   --primary-font: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;  
   --secondary-font: 'WindSong', cursive;
   --color-one: #a5a4a4;
   --color-two: #000000;
   /* GLASS EFFECT: */
   --background-color: #ffffff59;
   --shadow-color: #0000005e;
   --border-color: #ffffff2e;
}

body{
   background-image: url("../../images/03.webp");
   background-attachment: fixed;
   font-family: var(--primary-font);
}

/* ASIDE */

.container-1{
   margin: 20px;
   width: 320px;
   position: fixed;
   /*DESIGN*/
   background: var(--background-color);
   box-shadow: 0 8px 32px 0 var(--shadow-color);
   backdrop-filter: blur( 4px );
   border-radius: 30px;
   border: 1px solid var(--border-color);
}

.my-info{
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   margin-top: 10px;
   margin-bottom: 10px;
}

.profile-photo, .about-me, .contact-me, .occupation-area{
   margin: 10px;
}

.profile-photo img{
   width: 200px;
   /*DESIGN*/
   border-radius: 100px;
}

.about-me h1{
   margin-bottom: 10px;
}

.contact-me{
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 250px;
   margin: auto;
}

.contact-me img{
   width: 28px;
}

.occupation-area *{
   margin-bottom: 10px;
}

/* MAIN */

.container-2{
   margin: 20px;
   padding-left: 350px;
   text-align: center;
   /*DESIGN*/
}

.title-container{
   border-bottom: 1px solid var(--color-one);
}

.title{
   min-width: 320px;
   text-align: center;
   /*DESIGN*/
   backdrop-filter: blur(4px);
   border-radius: 30px;
   border: 1px solid transparent;
}

.title *{
   margin: 10px;
}

.title hr{
   width: 50%;
   margin: auto;
   /*DESIGN*/
   color: var(--color-one);
}

.projects-container{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

.project{
   width: 400px;
   margin: 20px;
   /*DESIGN*/
   background: var(--background-color);
   box-shadow: 0 8px 32px 0 var(--shadow-color);
   backdrop-filter: blur( 4px );
   border-radius: 30px;
   border: 1px solid var(--border-color);
}

.project-image img{
   width: 100%;
   /*DESIGN*/
   border-top-left-radius: 30px;
   border-top-right-radius: 30px;
}

.project-description{
   margin: 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.project-name{
   margin-bottom: 10px;
   padding-bottom: 5px;
   /*DESIGN*/
   border-bottom: 1px solid;
}

.project-techs{
   margin-top: 10px;
   margin-bottom: 10px;
}

.tech-images{
   display: flex;
   align-items: center;
}

.tech-images figure{
   display: contents;
}

.tech-images img{
   width: 25px;
   margin-right: 5px;
}

.see-more{
   width: 100px;
   margin: auto;
   padding: 5px;
   /*DESIGN*/
   border: 1px solid;
   border-radius: 20px;
}

a:link{
   color:var(--color-two);
   text-decoration: none;
}

a:visited{
   color: var(--color-two);
   text-decoration: none;
}

/* FOOTER */

.footer-container{
   margin: 20px;
   margin-left: 350px;
   text-align: center;
   /*DESIGN*/
   border-top: 1px solid  var(--color-one);
}

.footer-description{
   margin: 5px;
   text-align: center;
}

.footer-description span{
   font-family: var(--secondary-font);
   font-size: 25px;
}

.svgrepo{
   margin-top: 10px;
   /*DESIGN*/
   font-style: italic;
}