@charset "UTF-8";
body {
	background-color:#000000;
	color:#000000;
    font-family:"Calligraffitti", cursive;
    margin:0;
    padding:0%;
	box-sizing: border-box;
}

h2 {
	color: azure
}
.container {
    width: 90%;
    margin: auto;
    padding: 2%;
    box-sizing: border-box;
}

.navi {
	min-height: 60px;
    display: flex;
    list-style: none;
    justify-content: center;
    align-items: center;
    gap: 10%; 
    padding: 0;
    margin: 0;
}

.navi a:link, a:visited{
	text-decoration:none;
	font-family:"Calligraffitti", cursive;
  	font-weight: 400;
    font-size: 1.3em;
    color: #FFFFFF;
}

.navi a:hover, a:active{
	color: #F6C8C8;
    text-decoration: underline;
	border-bottom: 2px #F6C8C8;
}

.section{
	min-height: 100vh;
	width: 90%;
	margin: auto;
	position: relative;
}

.profile_title{	
	font-family: "Calligraffitti", cursive;
  	font-weight:bold;
    font-size: 1.3em;
	background:#FFFFFF;
	text-align: center;
	width: 100px;
	height:70px;
	border-radius:20px;
	float: left;
}

.gd{
	font-family: "Calligraffitti", cursive;
  	font-weight: 400;
    font-size: 1.3em;
	color: #FFFFFF;
	text-align: left;
}

.profile{
	font-family: "Cherry Swash", serif;
  	font-weight: 400;
	font-size: 1.2em;
	color: #FFFFFF;
	text-align: left;
}

.experience{
	font-family: "Gabriela", serif;
  	font-weight: 400;
	color: #FFFFFF;
	margin-top: 10%
}

.exp{
	outline-color: #FFFFFF;
	padding:1%;
	width: 70%;
	margin-left: 300px;
	border-radius: 30px;
	border:2px solid #FFFFFF;
	font-family: "Cinzel", serif;
  	font-optical-sizing: auto;
  	font-weight:400;
	color: #FFFFFF;
	text-align: left;
	
}

.rotated-text{
	transform:rotate(270deg);
    transform-origin:left;
	position: absolute; 
	color: #FFFFFF;
	font-size: 12em;
	font-family: "Calligraffitti", cursive;
	margin-left: 13%;
	margin-top: 50%;
	opacity:40%;
}

img[alt="img_left"]{
	float:left;
	margin-left: 6%;
	margin-right:10%;
	margin-bottom:2%
}

.skills_title{
	font-family: "Carattere", cursive;
  	font-weight: 400;
	font-size: 2.8em;
	color:#FFFFFF;
	text-align: left;
	margin-left: 35%;
}

.skills{
	font-family: "Cagliostro", sans-serif;
 	font-weight: 400;
	font-size: 1.4em;
	color:#FFFFFF;
	text-align: left;
	padding-top: 22px
}

.hard{
	font-family: "Cagliostro", sans-serif;
 	font-weight: 400;
	font-size: 1.4em;
	color:#FFFFFF;
	text-align: left;
	margin-right: 20px;
}

.row{
	display: flex;
	justify-content:flex-end;
	gap:20%;
	text-align:left;
}

.contacts_title{
	font-family: "Cinzel", serif;
  	font-optical-sizing: auto;
  	font-weight:400;
	color: #FFFFFF;
	text-align: center;
}

.contacts{
	font-family: "Castoro", serif;
  	font-weight: 400;
	color: #FFFFFF;
	font-size: 1.4em;
	text-align: left;
}

.allcontacts{
	background:#560000;
	padding:1%;
	padding-left: 4%;
	width: 101%;
	margin-top: 10%;
	border-radius: 30px;
	border:2px solid #FFFFFF;
	clear:both;
	float:left;
}

.languages_title{
	font-family: "Calligraffitti", cursive;
  	font-weight:bold;
    font-size: 1.3em;
	background:#FFFFFF;
	text-align: center;
	width: 100px;
	height:70px;
	border-radius:20px;
	float: left;
}
.languages{
	font-family: "Cagliostro", sans-serif;
 	font-weight: 400;
	font-size: 1.4em;
	color:#FFFFFF;
	text-align: left;
}

.alllanguages {
    margin-top: 30%;
}

.education_title{
	font-family: "Calligraffitti", cursive;
  	font-weight:bold;
    font-size: 1.3em;
	background:#FFFFFF;
	text-align: center;
	width:100px;
	height:70px;
	border-radius:20px;
	float: left;
}

.education{
	font-family: "Cagliostro", sans-serif;
 	font-weight: 400;
	font-size: 1.4em;
	color:#FFFFFF;
	text-align: left;
}

.alleducation{
	margin-top: 12%; 
}

@media only screen and (max-width:996px){
	html{
		scroll-behavior: smooth;
		scroll-padding-top:120px;
	}
	
	.navi li{
		font-size: 0.5em;
		padding-bottom: 2.5%;
	}
	
    .profile_title,
    .languages_title,
    .education_title {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }

    .rotated-text {
        font-size: 15em;
        margin-left: 15%;
    }

    .exp {
        width: 90%;
        margin-left: 0;
    }

    .row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    img[alt="img_left"] {
        width: 70%;
        height: auto;
        float: none;
        margin: 0;
    }

	.allcontacts,
    .alllanguages,
    .alleducation {
        width: 100%;
        margin: 10% 0;
    }
}