@font-face {
    font-family: "Forum"; 
    src: url("font/Forum/Forum-Regular.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: normal; 
} 

@font-face {
    font-family: "Inter"; 
    src: url("font/Inter/Inter-VariableFont_slnt,wght.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: normal; 
}

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

a, button{
    cursor: pointer;
}

body > div {
    position: relative;
}

h1 {
    position: fixed;
    cursor: pointer;
    top: 3vh;
    left: 0;
    width: 100%;
    font-weight: 400;
    text-align: center;
    font-family: cursive;
    font-size: 11vw;
    letter-spacing: 0.8vw;
    color: #e8e6e0;
    text-shadow: black 1.5px 1.5px, black -1.5px -1.5px, rgba(0,0,0, 0.3) 3px 2px 4px, rgba(255, 255, 255, 0.9) -3px -2px 3px;
}

body > div > img {
    position: fixed;
    z-index: -6;
    top: 0;
    left: 0;
    width: 100vw;
}

header {
    position: sticky;
    z-index: 11;
    margin-top: 55vh;
    left: 0;
    top: 0;
    width: 100%;
}

nav ul {
    width: 100%;
    padding: 2vw 10vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav li {
    padding: 1vw 1.5vw;
    font-size: 1.65vw;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-transform: uppercase;
    color: #1c1c1c;
    background-color: #e7e5dd;
    text-shadow: #b3c4a8 1px 1px, #b3c4a8 -1px -1px, rgba(0,0,0, 0.3) 3px 2px 4px, rgba(255, 255, 255, 0.9) -3px -2px 3px;
    letter-spacing: 2px;

    border-radius: 1.7vw;
    box-shadow: -0.35vw -0.3vw 5px 2px rgba(255, 255, 255, 0.9), 0.35vw 0.3vw 5px 2px rgba(0,0,0, 0.2),
     inset -0.1vw -0.1vw 5px rgba(255, 255, 255, 0.8), inset 0.1vw 0.1vw 5px rgba(0,0,0, 0.2);

    border: 0.4px solid #b3c9a6;
    transition: 0.4s;
    list-style-type: none;

    cursor: pointer;
}

nav li:hover {
    box-shadow: -0.35vw -0.3vw 5px 2px rgba(255, 255, 255, 0), 0.35vw 0.3vw 5px 2px rgba(0,0,0, 0), 
       inset -0.3vw -0.25vw 5px 2px rgba(255, 255, 255, 0.7), inset 0.35vw 0.3vw 5px 2px rgba(0,0,0, 0.2);

    text-shadow: #c4cebe 1px 1px, #c4cebe -1px -1px, rgba(0,0,0, 0.5) 5px 3px 4px, rgba(255, 255, 255, 0.9) -3px -2px 3px;
}

main {
    position: relative;
    left: 0;
    top: 0;
    background-color: #e7e5dd;
    box-shadow: 0 -5px 15px #cbd5c4;
    width: 100%;    
    z-index: 1;
}

main::before {
    content: '';
    position: absolute;
    top: -75vh;
    left: 0;
    width: 100%;
    height: 75vh;
    background: linear-gradient(rgba(0,0,0, 0), rgba(0,0,0, 0.85));
    z-index: -4;
}

.card-box:first-child {
    position: sticky;
    left: 0;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    width: 100%;
    gap: 4vw;
    height: 100vh;
    padding: 10vw 0;
}

.card{
    padding: 1.5vw 2vw;
    font-size: 1.6vw;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: #1c1c1c;
    background-color: #e8e6e0;
    text-shadow: #b3c4a8 1px 1px, #b3c4a8 -1px -1px, rgba(0,0,0, 0.3) 3px 2px 4px, rgba(255, 255, 255, 0.9) -3px -2px 3px;
    letter-spacing: 0.23vw;

    border-radius: 1.7vw;
    box-shadow: -0.35vw -0.3vw 5px 2px rgba(255, 255, 255, 0.9), 0.35vw 0.3vw 5px 2px rgba(0,0,0, 0.2),
     inset -0.1vw -0.1vw 5px rgba(255, 255, 255, 0.8), inset 0.1vw 0.1vw 5px rgba(0,0,0, 0.2);

    border: 0.4px solid #b3c9a6;
    transition: 0.4s;

    display: flex;
    flex-direction: column;
    gap: 1.25vw;
    list-style-type: none;
}

.card:hover {
    box-shadow: -0.35vw -0.3vw 5px 2px rgba(255, 255, 255, 0), 0.35vw 0.3vw 5px 2px rgba(0,0,0, 0), 
       inset -0.3vw -0.25vw 5px 2px rgba(255, 255, 255, 0.7), inset 0.35vw 0.3vw 5px 2px rgba(0,0,0, 0.2);

    text-shadow: #c4cebe 1px 1px, #c4cebe -1px -1px, rgba(0,0,0, 0.5) 5px 3px 4px, rgba(255, 255, 255, 0.9) -3px -2px 3px;
}

main a {
    color: #1c1c1c;
    cursor: pointer;
}

main li:nth-child(1) {
    text-align: center;
    font-size: 1.8vw;
    margin-bottom: 0.3vw;
    font-weight: 500;
}

.card-box:nth-child(2) {
    position: sticky;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 2.5vw 4vw;
    height: 100vh;
    background-color: #c4cebe;
    z-index: 2;
    padding: 10vh 5vw 0 5vw;
}

.anton-box {
    margin-left: 10vw;
}

.anton-box img {
    position: absolute;
    left: 13vw;
    top: 30vh;
    width: 20vw;
    border-radius: 1vw;
    border: 2px solid #1c1c1c;
    transform-origin: 100% 100%;
    transition: 0.7s;
    box-shadow: 0 0 10px black;
}

.code {
    padding: 2vw 3vw;
    font-size: 2vw;
    color: #e8e6e0;
    background-color: #1c1c1c;
    border-radius: 2vw;
    box-shadow: -0.15vw -0.1vw 5px 2px rgba(0,0,0, 0.5), 0.15vw 0.1vw 5px 2px rgba(0,0,0, 0.5),
     inset -0.15vw -0.15vw 5px rgba(210, 6, 6, 0.8), inset 0.15vw 0.15vw 5px rgba(51, 101, 250, 0.8);

     text-shadow: rgba(210, 6, 6, 0.8) 1px 1px, rgba(51, 101, 250, 0.8) -1px -1px;
}

footer {
    width: 100%;
    position: relative;
    background-color:#1c1c1c ;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 3.5vw;
}

footer a, 
footer h2 {
    color: #e8e6e0;
    font-size: 4vw;
    text-decoration: none;
    cursor: pointer;
    transition: 0.3s;
}

footer a:hover{
    text-shadow: rgba(210, 6, 6, 0.9) 3px 3px, rgba(51, 101, 250, 0.9) -3px -3px;
}

footer img {
    width: 30vw;
    border-radius: 2vw;
    transition: 1s;
    cursor: pointer;
}

footer img:hover {
    background: linear-gradient(rgba(210, 6, 6, 0.9), rgba(51, 101, 250, 0.9));
    border: 3px dotted #1c1c1c;
}