@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
	margin: 0;
	paddinG: 0;
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
.container {
	display: flex;
	min-height: 100vh;
}
/*******************
   main section
********************/
.main-section {
    flex: 3;
    padding: 20px;
}
/*******************
       card
*******************/
.card {
    border: 1px solid #ccc;
    border-radius: 8px;
    /*padding: 20px;*/
    margin-bottom: 20px;
    box-shadow: 0 0 8px rgba(12, 12, 12, 0.3);
    cursor: pointer;
}

.card-header {
    /*margin-bottom: 15px;*/
    padding: 10px;
    margin:0;
    text-align: center;
    background: #1b1b1b;
    color: #fafafa;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.card-content {
    display: flex;
    align-items: center;
    padding: 20px;
}
.card-text {
    flex: 1;
}
.card-image {
    margin-left: 15px;
    max-width: 100%;
    height: auto;
    opacity: 0.5;
    transition: .8s ease;
}
.card:hover .card-image {
    transform: scale(1.2);
    opacity: 1;
}
/*
.card-image:hover {
    transform: scale(1.2);
    opacity: 1;
}
*/
.card ul {
    list-style: none;
    margin: 10px;
}
.card li {
    padding: 8px;
    margin-bottom: 5px;
    border-radius: 4px;
    background: linear-gradient(to right, yellow 15%, whitesmoke 85%); /*a2f0c2*/
    transition: background-color 0.5s ease, opacity 0.5s ease;
    opacity: 1; /* Opacità iniziale a 1 (completamente visibile) */
}
.card li:hover {
    transition: background-color 0.5s ease, opacity 0.5s ease;
    opacity: 0.5; /* Opacità finale a 0.5 (opaco) */
}
.additional-section {
    margin-top: 20px;
}

/*********************
     sidebar
*********************/
.sidebar {
    /*flex: 1;*/
    width: 25%;
     background-image: linear-gradient(to right left, #ffffff, #f4f6f8, #e7eeef, #dde6e2, #d9dcd2);
    padding: 20px;
}
.sidebar ul {
    list-style: none;
    margin: 10px 0;
}
.sidebar li {
    margin-bottom: 3px;
}
.sidebar li a {
	  position: relative;
    text-decoration: none;
    color: #333;
    display: block;
    margin: 3px auto;
    padding: 8px 5px;
    border-radius: 4px;
    opacity: 0.8;
    /*background-image: linear-gradient(to right, #f5f6fa 50%, #e6ebdb 50%);*/
    background-image: linear-gradient(to right, #e6ebdb 50%, #f2f9f2 50%);
    background-position: right;
    background-size: 200%;
    transition: all .5s ease-in-out;
    /* transition: color 0.5s ease;
    transition: background: 0.5s ease; */
}

.sidebar li a:hover {
	  background-position: left;
	  opacity: 1;
}

/*********************************
       back to top arrow
*********************************/   
#top {
   position: fixed;
   top: 0;
}
.back-to-top img {
   position: fixed;
   right: 35px;
   bottom: 10%;
   width: 30px;
   height: 30px;
   transition: all .5s;
   opacity: .5;
}
.back-to-top img:hover {
   opacity: 1;
   transform: translateY(-10px);
}

/***********************
    slide button sidebar
************************/
.button-slide {
  width: 100%;
  background: #ffff00;
  color: #000;
  border: 2px solid #000;
  border-radius: 50px;
  padding: 12px 24px;
  display: inline-block;
  margin: 0 auto;
  text-align:center;
  font-family: "Open-sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #000;
  transition: ease-out 0.4s;
}

.button-slide:hover {
   color: #fff;
   border:2px solid #252525;
}
.slide-down:hover {
  box-shadow: inset 0 100px 0 0 #111;
}
/************************
    back to top arrow
*************************/
.back-to-top img {
   position: fixed;
   right: 35px;
   bottom: 5%;
   width: 30px;
   height: 30px;
   transition: all .5s;
   opacity: .5;
}
.back-to-top img:hover {
   opacity: 1;
   transform: translateY(-10px);
}
/***********************************
   media queries mobile viewport
************************************/

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .main-section, .sidebar {
        flex: 1;
        margin-bottom: 20px;
    }
    .sidebar {
       order: -1;
       width: 100%;
    }
    .card-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .card-image {
    	  margin: 10px auto;
    }
}