.navbar { background-color:black; width: 100%; height: 30%; position: fixed;}

.img { border-style: solid; border-width: thick; border-color: #7d7d7d; border-radius: 100%; display: block; width: auto; height: auto; position: fixed; top: 15%; left: 50%; transform: translate(-50%, -50%); }

.container { position: relative; width: 50%; max-width: 300px; }

.top-inf { position: fixed; top: 35%; left: 50%; transform: translate(-50%, -50%);}

.full-name {color: #4a4a4a; font-weight: bolder; margin-top: 30%;}

.surname { color:#7d7d7d;}

.linkedin { margin-right: 50px; width: 50px; height: 50px; }

.instagram { margin-right: 50px; width: 50px; height: 50px; }

.mail { margin-right: 50px; width: 50px; height: 50px; }

.github { margin-right: 50px; width: 50px; height: 50px; }

.inf { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.inf-text { color: #4a4a4a; text-align: center; }

@media only screen and (max-width: 768px) { .full-name{font-size: 1.7em;} .inf-text {font-size: 1em;} .inf-title{ font-size: .8em;} }

@media only screen and (max-width: 375px) { .inf-text { margin-top: 30%;} .inf { margin-top: 20px; } .contact { margin-top: 50px;} .inf-title{ font-size: .8em;} .linkedin { margin-right: 50px; width: 25px; height: 25px; }  .instagram { margin-right: 50px; width: 25px; height: 25px; } .mail { margin-right: 50px; width: 25px; height: 25px; } .github { margin-right: 50px; width: 25px; height: 25px; } }

@media only screen and (max-height: 320px) { .img{ width: 72px; height: 72px; } .inf { margin-top: 40px; } .full-name { font-size: x-large } .inf-title { margin-top: 10px; font-size: small; } .inf-text { margin-top: 55px; font-size: medium } .contact { visibility: hidden; } }

@media only screen and (max-height: 700px) { .img{ width: 72px; height: 72px; } .full-name { font-size: x-large } .inf-title { margin-top: 10px; font-size: small; } .inf-text { margin-top: 55px; font-size: medium } .contact { margin-top: 80px; } }

.last-inf { color: #7d7d7d; }

.contact { position: fixed; top: 60%; left: 52%; transform: translate(-50%, -50%); margin-top: 80px; width: auto; }

.inf-title { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; position: fixed; top: 44%; left: 50%; transform: translate(-50%, -50%); }

.container:hover .overlay { opacity: 1; }

.overlay { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; position: absolute; bottom: 0; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.5); color: #f1f1f1;  width: 96.5%; transition: .5s ease; opacity:0; color: white; font-size: 20px; padding: 20px; text-align: center; }

body { font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #111; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; display: flex; min-height: 100vh; flex-direction: column; }

body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }

h1 {font-size: 3em;}

h1, h2, h3, h4, h5, h6 { font-weight: 400; }

.firstFormula { width: 100%; height:50%; text-align:center;}