/* 
Errors to adjust:
- size of the images in the carousel og Galaxy Tour;
- white colors of buttons in the index;
- size of the first dive in the index;
- javascript of the first exercise is not working;
*/



/*/*//*/*//*/*//*/*//*/*//*/*//*/*//*/*//*/*//*/*//*/*//*/*//*/*//*/*/
/*title index animation*/
@keyframes titleAnimation {
	0% {
	  font-weight: 200;
	  transform: scale(1);
	}
	25% {
	  font-weight: 300;
	  transform: scale(1.1);					
	}
	50% {
	  font-weight: 400;
	  transform: scale(1.2);
	} 
	75% {
	  font-weight: 300;
	  transform: scale(1.1);
	}
	100% {
	  font-weight: 400;
	  transform: scale(1);
	}
  }
  
  .animate-on-load {
	animation-name: titleAnimation;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
  }

  /*/*//*/*//*/*//*/*//*/*//*/*//*/*//*/*//*/*//*/*//*/*/
a {
	color: #595963ea;
	text-decoration: none;
}

a:hover {
	color: rgba(190, 190, 190, 0.788) !important;
    text-decoration: underline; /* Aggiunge sottolineatura al passaggio del mouse */
    cursor: pointer; /* Cambia il cursore del mouse */
	transition: color 0.5s ease-in-out !important;
}

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap'); /*Font for index body*/

body.index {
	font-family: "Josefin Sans", sans-serif;
	font-weight: 200;
	margin: 0;
	padding: 0;
	background-color: #f4f4f4;
}

header.index {
	font-family: "M PLUS Code Latin", monospace;
	font-size: 3vh;
	font-weight: 300;
	background-color: #1bdbbb;
	color: #fff;
	padding: 20px 0;
	text-align: center;
}
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Code+Latin:wght@100..700&display=swap'); /* Font for the title Web Tech Projects*/

#TitleAnimation a:hover {
	color: #1717175d !important; /* Colore al passaggio del mouse */
	transition: color 0.7s ease-in-out !important; /* Transizione al cambiamento di colore */ 
  }
  

h1.index {
	margin: 0;
}
.container {
	max-width: 1200px;
	margin: 20px auto;
	padding: 0 20px;
}
.project {
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	padding: 20px;
	margin-bottom: 20px;
}
.project h2 {
	font-family: "Josefin Sans", sans-serif;
	font-weight: 400;
	margin-top: 0;
	color: white !important;
}
.project p {
	margin-top: 10px;
}
.project a:hover {
    color: #0b7464a2; /* Cambia colore al passaggio del mouse */
    text-decoration: underline; /* Aggiunge sottolineatura al passaggio del mouse */
    cursor: pointer; /* Cambia il cursore del mouse */
}
.project span {
    display: inline-block;
    padding: 8px 16px; /* adjust padding as needed */
    background-color: #1bdbbb; /* background color */
    color: white !important; /* text color */
    border: none;
    border-radius: 4px; /* rounded corners */
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-size: 16px; /* adjust font size as needed */
}

.project span:hover {
    background-color: #108673; /* color change on hover */
}
.project a {
    color: #0f7463; /* Colore dei link */
    text-decoration: none;
    transition: color 0.3s ease; /* Transizione del colore */
}
footer.index {
	background-color: #1bdbbb;
	color: #fff;
	text-align: center;
	padding: 20px 0;
	position:relative ;
	width: 100%;
	bottom: 0;
}
		
		/* Dropdown container, Index page */
.dropdown {
	position: relative;
	/*display: inline-block;*/
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	padding: 20px;
	margin-bottom: 20px;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
	z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
	background-color: #f1f1f1;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
	display: block;
}


  /* Style to display the FORMS side by side */
.form-container {
    display:inline-flex;
    justify-content:center;
  }

html#forms {
	height: 100%; 
	background: linear-gradient(to bottom, #df5d5d, #3b32b6); 
  }
  
/*Style for Galaxy Tour*/


/* STYLE FOR ARTICLES */

body.articles {
	font-family:"Caslon Pro", serif;
	font-size: 1.65em;
	font-weight: 400;
	line-height: 1.75em;
	margin: 7% auto;
	padding: 10px 20px 10px 20px;
	max-width: 900px;
}


.dropcap::first-letter {
	float: left;
    font-size: 3em;
    margin-bottom: -0.2em;
    padding:0.45em 0.06em 0 0;
}


#icon{
	text-align: center;
	display: block;
    margin: 0 auto;
    width: 35%;
}

img.big {
	width: 90%;
	height: auto;
}


/* New Yorker article*/

/* IMPORTED FONTS */

@font-face {
    font-family: "Irvin Heading";
    font-weight: 400;
    src: url("fonts/Irvin-Heading.woff2") format("woff2");
    }

@font-face {
    font-family: "Caslon Pro";
    font-weight: 400;
    src: url("fonts/Caslon-Pro-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Caslon Pro";
    font-weight: 400;
    font-style: italic;
    src: url("fonts/Caslon-Pro-Italic.woff2") format("woff2");
}

@font-face {
    font-family: "Graphik Medium";
    font-weight: 500;
    src: url("fonts/Graphik-Medium.woff2") format("woff2");
}

/* Texas Monthly article (Trigger)*/

#Texas-title-logo{
	display: block;
	width: 30%;
	margin-bottom: 2em;
	margin-right: auto;
}

#txs{
	font-family: "Chronicle Display", serif;
	font-size: 47px;
	font-weight: 600;
	line-height: 1.25em;
}


.uppercase {
	font-family: "Titillium Web", sans-serif;
	font-size: 16.5px;
	font-weight:700;
	line-height: 1em;
	text-transform: uppercase;
}

table#tableTrigger {
	width: 100%;
	text-align: left;
	margin-bottom: 1.5em;
	border-collapse: collapse;
}

th, td {
	padding: 1.4em 0 1.4em 0;
	border-bottom: 1.5px solid rgba(229,229,229,1);
}


/* IMPORTED FONTS FOR ARTICLES */

@font-face {
    font-family: "Titillium Web";
    font-weight: 700;
    src: url("fonts/TitilliumWeb-Bold.ttf");
}

@font-face {
    font-family: "Chronicle Display";
    font-weight: 400;
    src: url("fonts/ChronicleDisp-Roman.otf") format("opentype");
}

@font-face {
    font-family: "Chronicle Display";
    font-weight: 400;
    font-style: italic;
    src: url("fonts/ChronicleDisp-Italic.otf") format("opentype");
}

@font-face {
    font-family: "Chronicle Display";
    font-weight: 600;
    src: url("fonts/ChronicleDisp-Semibold.otf") format("opentype");
}

@font-face {
    font-family: "Chronicle Display";
    font-weight: 600;
    font-style: italic;
    src: url("fonts/ChronicleDisp-SemiboldItal.otf") format("opentype");
}

@font-face {
    font-family: "Chronicle Display";
    font-weight: 700;
    src: url("fonts/ChronicleDisp-Bold.otf") format("opentype");
}

@font-face {
    font-family: "Chronicle Display";
    font-weight: 700;
    font-style: italic;
    src: url("fonts/ChronicleDisp-BoldItal.otf") format("opentype");
}

@font-face {
    font-family: "Chronicle Display Condensed";
    font-weight: 400;
    src: url("fonts/ChronicleDispCond-Roman.otf") format("opentype");
}