@font-face {
	font-family: 'Oswald';
	src: url("../police/navsock/Oswald-ExtraLight.ttf") /*VERIFIER LICENCE*/
}
@font-face {
	font-family: 'OswaldReg';
	src: url("../police/navsock/Oswald-Regular.ttf") /*VERIFIER LICENCE*/
}
* {
    margin: 0;
    padding: 0;
    --pink: pink;
    --blue: rgb(82, 235, 255);
    color: white;
}
.background {
    background-image: linear-gradient(0deg, var(--blue) 0%, var(--pink) 100%);
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: -1;
}
html::-webkit-scrollbar {
    display: none;
}
.petal-container {
    position: absolute;
    top: -10px;
    width: 95%;
    height: 100%;
}

.petal {
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url('../img/navsock/petal.webp');
    background-size: contain;
    animation: fall 15s linear infinite;
}

@keyframes fall {
    0% {
        transform: translateY(0) rotate(0);
    }
    100% {
        transform: translateY(300vh) rotate(360deg);
    }
}
.arbre {
    position: absolute;
    background-image: url("../img/navsock/arbre.webp");
    width: 100vw;
    height: 231%;
    margin-top: -184vh;
    background-size: cover;
}
#navsockLogo {
    width: 100%;
    height: 10%;
}
img {
    background-size: cover;
    width: 20%;
    position: fixed;
    /* height: 100%; */
}
li:hover {

}
.top {
    font-family: 'Oswald';
    font-size: 400%;
}
.top div:nth-child(2n-1) {
    padding-top: 15vh;
    padding-left: 10%;
}
.top div:nth-child(2n) {
    padding-left: 20%;
}
.middletext {
    width: 50%;
    margin-left: 25%;
    margin-top: 8%;
    text-align: justify;
    font-family: 'OswaldReg';
    font-size: 110%;
}
.calltoact {
    font-size: 300%;
    text-align: center;
    margin-top: 10%;
}
.pub {
    margin-top: 10%;
    width: 70%;
    margin-left: 15%;
}
.pubtext {
    font-family: 'Oswald';
    text-align: end;
    font-size: 300%;
}
.pubimg {
    background-image: url('../img/navsock/pub.webp');
    background-size: cover;
    height: 46vw;
}

@media screen and (max-width: 700px) {
    ul {
        width: 100%;
        height: 10%;
    }
    img {
        background-size: cover;
        width: 100%;
        position: fixed;
    }
    .middletext {
        width: 80%;
        margin-left: 10%;
    }
}

@media screen and (max-width: 1090px) {
    .arbre {
        /* height: 100%;
        margin-top: -65vh; */
        height: 100%;
        margin-top: -65vh;
    }

    .top {
        padding-top: 30%;
    }
    .top div:nth-child(2n) {
        padding-left: 30%;
    }
    .pub {
        width: 100%;
        margin-left: 0;
    }
    .pubtext {
        font-size: 160%;
    }
    .pubimg {
        padding: 9%;
        margin: 1%;
    }
}