@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --bgColor: #23262C;
    --mainColor: #FE7733;
    --secondaryColor: #B1FA63;
    --txtColor: #FFFFFF;
    --projectBgColor: #23262C;
    --projectHoverBgColor: #3A3F47;
    --font-body-family: "Exo", sans-serif;
}

/* Tema scuro (default) */
:root[data-theme="dark"]{
    --bgColor: #23262C; /* Graphite900 */
    --mainColor: #FE7733; /*Safty Orange*/
    --secondaryColor: #B1FA63; /*Neon Sprout*/
    --txtColor: #FFFFFF; /*Paper white*/
    --projectBgColor: #23262C; /* Graphite900 */
    --projectHoverBgColor: #3A3F47; /* Graphite700 */
}

/* Tema chiaro */
:root[data-theme="light"]{
    --bgColor: #CFDBD5; /*Alabaster Grey*/
    --mainColor: #FF7247; /*Coral Glow*/
    --secondaryColor: #F5CB5C; /*Tuscany Sun*/
    --txtColor: #333533; /*Graphite*/
    --projectBgColor: #CFDBD5; /*Alabaster Grey*/
    --projectHoverBgColor: #E8EDDF; /*Light Linen*/
}

html{
    font-size: 100%;
    font-family: var(--font-body-family);
    line-height: 1.5em;
    margin: auto;
}

body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bgColor);
}



header{
    background-color: var(--bgColor);
    color: var(--mainColor);
    padding: 1em 1em 0em 1em;
    border-bottom: 2px solid var(--mainColor); 
    border-radius: 3px;
}

.navigationhelp{
    position: absolute;
    text-indent: -999em;
}

header nav #menu{
    margin-left: 10%;
    text-align: right;
    font-size: 1em;
}

a:link{
    color: var(--mainColor);
}

a:visited{
    color: var(--secondaryColor);
}


#menu ul{
    margin: auto;
    padding: 1em;
    list-style-type: none;
    border-bottom: 2px solid var(--mainColor);
}

#menu ul li{
    text-align: center;
    display: inline-block;
    width: 20%;
    margin: 0 0.5em; 
}

#menu ul li a{
    display: block;
}

#breadcrumb{
    margin: auto;
    text-align: left;
    padding:0.5em;
    color: var(--secondaryColor);
}

main{
    background-color: var(--bgColor);
    color: var(--txtColor);
    margin: auto;
    width: 80%;
    max-width: 1200px;
}

.logo{
    text-indent: -999em;
    background-repeat: no-repeat;
    background-size: contain;
    line-height: 1.5em;
    color:black;
    background-position: center;

  } 

ul {
    list-style-position: inside;
}
  
#instagram{
    background-image: url("../img/social-logo/instagram.svg");
}
#github{
    background-image: url("../img/social-logo/github.svg");
}
#linkedin{
    background-image: url("../img/social-logo/linkedin.svg");
}
#facebook{
    background-image: url("../img/social-logo/facebook.svg");
}
#spotify{
    background-image: url("../img/social-logo/spotify.svg");
}
#twitter{
    background-image: url("../img/social-logo/twitter.svg");
}
#goodreads{
    background-image: url("../img/social-logo/goodreads.svg");
}
#email{
    background-image: url("../img/social-logo/email.svg");
}
#tvtime{
    background-image: url("../img/social-logo/tvtime.svg");
}
#bingers{
    background-image: url("../img/social-logo/bingers.svg");
}

#home-logo{
    text-indent: -999em; 
    background-repeat: no-repeat;
    background-size: contain;
    line-height: 1.5em;
    color:black;
    background-position: center;
    background-image: url("../img/logo.svg");
    font-size: 2em;
}
#togglemenu{
    display: none;
}

/* footer */
footer{
    background-color: var(--bgColor);
    color: var(--txtColor);
    padding: 1.0em;
    text-align: center;
    margin: auto;
    margin-bottom: 0px;
    border-top: 2px solid var(--txtColor); 
    border-radius: 3px;
}


/*home*/
#home-container {
   
}

#home-container > #home-content{

}



.home{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1em;
}
.home > img {
    width: 30%;
    margin: 1em;
}
#social-list{
    margin: auto;
    padding: 1em;
    list-style-type: none;
    text-align: center;
    display: block;
    width: 100%;
    
}

#social-list li{
    display: inline-block;
    width:10%;
    margin: 0 0.5em; 
}

#social-list li a{
    display: block;
}

main > h1, main > h2, main > h3, main > h4{
    margin: 0.5em auto; 
}

main > h1{
    text-decoration: solid;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 3em;
}

.about-me{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    grid-gap: 0.3em; 
    grid-template-areas: 
        "h h h" 
        "i c c" 
        "t t t"
        "e e e"
        "s s s";
}

.about-me > h2{
    grid-area: h;
}
.about-me > #paragraphs{
    grid-area: c;
}
.about-me > img{
    grid-area: i;
    width: 20vw;
    border-radius: 50%;
}
.about-me > h3{
    grid-area: e;
}
.about-me > ul{
    grid-area: s;
}

a.button-link{
    display: inline-block;     
    padding: 0.5em;     
    margin: 0.5em;
    color: var(--bgColor);            
    text-align: center;        
    text-decoration: none;     
    border-radius: 5px;       
    font-weight: bold;        
    cursor: pointer;          
}

a.button-link:visited{
    background-color: var(--secondaryColor);
}

a.button-link:link{
    background-color: var(--mainColor);
}

a.button-link > img{
    height: 1em;
    margin-left: 10px;
}
#paragraphs p:nth-of-type(2) {
    margin-top: 2em;
}

/* Contacts */
.contacts{
    text-align: center;
}
form{
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
fieldset {
    border: none;  
    margin: 1em; 
    margin-top:2em;
}
legend {
    text-align: center; 
    margin-bottom: 0.5em; 
    display: block; 
}
input:focus, textarea:focus{
    outline: 3px solid var(--mainColor);
}

form fieldset{
    border-radius: 0px 20px 20px 20px;
    padding:1em;
    width:70%;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-left: 2em; 
    width: 90%;
}
.form-group input, .form-group textarea {
    width: 90%;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #cec8da;
    color: #09151c;
    padding:1em;
    margin-left: 1.5em; 
    margin-right: 1.5em; 
    margin-top: 0.5em;
    margin-bottom:0.5em;
    border-radius: 5px;
    /*background-color: var(--headerBgColor);*/
}
.form-group textarea {
    resize: vertical;
}

input::placeholder, textarea::placeholder {
    color: #09151c; 
    opacity: 0.7; 
}

.form-group input[type="submit"] {
    width: 15vb;
    background-color: var(--secondaryColor);
    color: var(--bgColor);
    border: none;
    border-radius: 10px;
    cursor: pointer;
}
.form-group input[type="submit"]:hover {
    background-color: var(--mainColor);
}

.errorSuggestion{
    margin-left: 2em; 
    width: 90%;
    color: var(--mainColor);
}

.contacts > p{
    margin-top: 2em;
}

/*Projects*/

.project-nolink{
    display: block;
    text-decoration: none;
    color: var(--txtColor);
    margin-bottom: 2em;
}

.project-link{
    display: block;
    text-decoration: none;
    color: var(--txtColor);
    margin-bottom: 2em;
}

.project-link:visited{
    color: var(--secondaryColor);
}

.project-div{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;  
    grid-gap: 2em;
    background-color: var(--projectBgColor);
    padding: 1em;
    border-radius: 30px;
    
    color: var(--txtColor);
    
}

.project-nolink > div.project-div:hover{
    border: 0px solid var(--mainColor);
    background-color: var(--projectBgColor);
}

.project-nolink > .project-div:hover h2.project-title{
    color: var(--txtColor);
}

.project-div:hover{
    border: 2px solid var(--mainColor);
    background-color: var(--projectHoverBgColor);
    
}


.right-project-div{
    grid-template-areas: "i i t t t";
}

.left-project-div{
    grid-template-areas: "t t t i i";
}

.project-img{
    grid-area: i;
    width: 100%;
    border-radius: 30px;
    max-height: 300px;
    max-width: 700px;

}

.project-img-reduced{
    max-height: 150px;
}

.project-text{
    grid-area: t;

}   

.project-title{
    text-align: center;
    text-transform: uppercase;
}

.project-main > .updated-to{
    text-align: center;
}

.project-div:hover h2.project-title{
    color: var(--mainColor);
}

.project-tags{
    margin: auto;
    padding: 1em;
    list-style-type: none;
    text-align: center;
    display: block;
    width: 80%;
}

.project-tag{
    display: inline-block;
    margin: 0 0.5em;
    padding: 0.1em 0.5em;  
    border-radius: 10px;  
    color: var(--bgColor);  
    border: 2px solid var(--txtColor);
}

.project-description{
    overflow-wrap: break-word;
}

.unipd-tag{
    background-color:#f9acac;
    border-color: #f79b9b;
}

.akite-tag{
    background-color: #b7ecfa;
    border-color: #76b5c7;
}

.completed-tag{
    background-color: #48EC66;
    border-color: #39eb5a;
}

.progress-tag{
    background-color: #c1eec9;
    border-color: #a0e6ad;
}

.award-tag{
    background-color: #ecf4a6;
    border-color: #e4ef82;
}

.einaudi-tag{
    background-color: #f4d2a6;
    border-color: #f1b566;
}

.tradesecret-tag{
    background-color:#f9acac;
    border-color: #f79b9b;
}

/*Project*/

main.project-main > h2.project-title{
    font-size: 2em;
}

.project-title-logo{
    text-indent: -999em;
    background-repeat: no-repeat;
    background-size: contain;
    line-height: 1.5em;
    color:black;
    background-position: center;
}

#demeter-logo{
    font-size: 8em;
    margin-bottom: 0em;
    margin-top: 0.2em;
    background-image: url("../img/projects/logos/demeter.svg");
}

#achilles-logo{
    font-size: 7em;
    margin-bottom: 0em;
    margin-top: 0.3em;
    background-image: url("../img/projects/logos/achilles.svg");
}

#apollon-logo{
    font-size: 5em;
    margin-bottom: 0em;
    margin-top: 0.3em;
    background-image: url("../img/projects/logos/apollon.png");
}

#asqlepio-logo{
    font-size: 4em;
    background-image: url("../img/projects/logos/asqlepio.png");
}

.right-img {
    float: right;
    margin: 0 0 10px 10px;
    max-width: 40%; /* Modifica la dimensione dell'immagine a seconda delle tue esigenze */
}

.left-img {
    float: left;
    margin: 0 10px 10px 0;
    max-width: 40%; /* Modifica la dimensione dell'immagine a seconda delle tue esigenze */
}

.project-resources{
    clear: both;

}

.fixed-img{
    float: right; 
    margin-left: 1em; 
    margin-bottom: 1em;
    width: 30%; 
    height: auto; 
}
.project-description > div {
    width: 100%;
}

.project-img-wide {
    display: block;
    width: 100%;
    max-width: 700px;
    margin: 2rem auto 0 auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* THEME */
.theme-toggle-btn {
    position: absolute;
    top: 1em;
    right: 1em;
    background-color: var(--projectBgColor);
    color: var(--txtColor);
    border: none;
    padding: 0.5em 0.75em;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8em;
    transition: background-color 0.3s ease;
}

.theme-toggle-btn:hover {
    background-color: var(--projectHoverBgColor);
}