body {
        margin: 0; 
        padding: 0;
        font-family: sans-serif;
		background-color: #ecedee;
    }

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
	color: white;
}

  .summary, .devbox {
    background-color: #1E1E1E !important;
	color: white;
  }

.devcard {
    background-color: #2b2b2b !important;
	color: white;
 }
 
  .qicon {
    filter: invert(1);
  }
}

    html {
        margin: 0;
        padding: 0;
    }

    .devcard {
        background-color: #f4f4f5;
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 20px;
    }

    .devbox {
        background-color: #ffffff;
        border-radius: 20px;
        padding: 20px;
        font-size: 26px;
        margin: 20px;
    }

    .summary {
        background-color: #ffffff;
        border-radius: 20px;
        padding: 20px;
        font-size: 26px;
        margin: 20px;
        display: flex;
        align-items: center;
        gap: 30px;
        flex-direction: row;
    }

    .text-content {
        flex-grow: 1; 
    }

    .summary-image {
        max-width: 450px; 
        height: auto;
		border-radius: 12px;
    }

    .header {
        margin: 0;
        height: fit-content;
        background: linear-gradient(to bottom right, #1de6b7, #267bfc);
        color: white;
        display: flex;
        align-items: center; 
        justify-content: space-between; 
        height: 94px;
		position: sticky;
	    top: 0;
	    z-index: 100;
    }

    .header p {
        margin: 0; 
        padding: 0;
        display: flex;
        align-items: center;
    }

    .header-left {
        padding-left: 20px; 
    }

    .header-right {
        padding-right: 30px; 
        font-size: 25px;
        font-weight: bold;
        cursor: pointer;
    }

	.download {
        background-color: blue;
		border-radius: 10px;
		color: white;
		text-decoration: none;
		padding: 7px;
	}

.rotate-image {
  /* Duration and smoothness of the rotation */
  transition: transform 1s ease-in-out;
}

.rotate-image:hover {
  transform: rotate(360deg); 
}