*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:"Century Gothic", Arial, sans-serif;
background:#2b2b2b;
color:white;
line-height:1.8;
}

/* TOP BAR */

.topBar{
    position:sticky;
    top:0;
    z-index:100;

    background:rgba(43,43,43,0.88);

    backdrop-filter:blur(10px);

    padding:1.4rem 0;

    transition:0.35s ease;
}

/* INNER */

.topBarInner{
width:100%;
max-width:960px;

margin:0 auto;

padding:0 1.8rem;

display:flex;
justify-content:space-between;
align-items:center;
}

/* MENU */
.menu-icon{
width:28px;
cursor:pointer;

opacity:0.8;

transition:0.3s;
}

.menu-icon:hover{
opacity:1;
}

nav{
position:fixed;

top:0;
right:0;

width:22%;
height:100vh;

background:rgba(40,40,40,0.75);

transform:translateX(100%);

transition:transform 0.5s ease;

display:flex;
justify-content:flex-start;
align-items:center;

padding-top:18vh;

z-index:1000;
}

nav.open{
transform:translateX(0);
}

.close-icon{
position:absolute;

top:5%;
right:15%;

width:24px;

cursor:pointer;
}

nav ul{
list-style:none;
width:100%;
padding-right:22%;
text-align:right;
margin-top:-30vh;
}

nav li{
margin:22px 0;
}

nav a{
text-decoration:none;
color:white;
font-size:20px;
font-family:"Century Gothic", Arial, sans-serif;
text-transform:uppercase;
letter-spacing:4px;
line-height:1.5;
opacity:0.85;
}

nav a:hover{
opacity:1;
}


/* HOME */

.home-link{
    display:inline-flex;
    align-items:center;
}

.home-link img{
    width:28px;

    opacity:0.8;
    transition:0.3s;
    cursor:pointer;
}

.home-link img:hover{
    opacity:1;
}

/* MAIN */

main{
max-width:980px;
margin:0 auto;
padding:80px 40px 120px;
}

/* TITLES */

h2{
font-size:28px;
margin-bottom:20px;
font-weight:normal;
}

h3{
font-size:22px;
margin:60px 0 20px;
font-weight:normal;
}

/* TEXT */

p{
font-size:18px;
line-height:1.9;

margin-bottom:24px;

opacity:0.87;

text-align:justify;
}

/* INFO */

.info{
margin-top:60px;
}

.info p{
margin-bottom:10px;
font-size:17px;
}

.info a{
color:white;
text-decoration:none;
}

.info a:hover{
opacity:0.7;
}

/* CREDITS */

.credits{
margin-top:50px;

font-size:13px;

opacity:0.6;

text-align:right;

letter-spacing:0.5px;
}

.credits a{
color:white;
text-decoration:none;
}

.credits a:hover{
opacity:0.7;
}

/* FOOTER */

footer{
padding:24px 0 40px;
display:flex;
justify-content:center;
}

.social{
display:flex;
gap:28px;
}

.social img{
    width:24px;
    cursor:pointer;

    opacity:0.7;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.social img:hover{
    opacity:1;
    transform:translateY(-1px);
}

/* MOBILE */

@media(max-width:600px){

main{
padding:50px 24px 100px;
}

h2{
font-size:24px;
}

h3{
font-size:20px;
}

p{
font-size:16px;
}

.social{
gap:20px;
}

.social img{
width:22px;
}

.credits{
font-size:12px;
}

nav{
width:100%;
}

}