@charset "utf-8";
/* CSS Document */

<style>
	main{
		background-image: url(lettera.png);
	}
	.tab {
            position: relative;
            margin-bottom: 2em;
            width: 100%;
            color: #fff;
            overflow: hidden;
        }
	    .tab-content a{
		font-size:medium !important;
	}
        
        input {
            position: absolute;
            opacity: 0;
            z-index: -1;
        }
        
        label {
            position: relative;
            display: block;
            padding: 0 0 0 1em;
            background: var(--main-bg);
            font-weight: bold;
            line-height: 3;
            cursor: pointer;
			color:white;
        }
        
        .tab-content {
            max-height: 0;
            overflow: hidden;
            background: aliceblue;
			border: 2px solid var(--main-bg);
            -webkit-transition: max-height .35s;
            transition: max-height .35s;
        }
        
        .tab-content p {
            margin: 1em;
			color: black;
        }
        /* :checked */
        
		.tab-content li {
            margin-left: 2em;
			
        }
		
        input:checked ~ .tab-content {
            max-height: 20em;
        }
        /* Icon */
        
        label::after {
            position: absolute;
            right: 0;
            top: 0;
            display: block;
            width: 3em;
            height: 3em;
            line-height: 3;
            text-align: center;
            -webkit-transition: all .35s;
            transition: all .35s;
        }
	input[type=checkbox] + label::after {
        content: "+";
	}
	input[type=checkbox]:checked + label::after {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
@media only screen and (max-width:600px) {
	i{
		display:none;
	}

}
  </style>