@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&family=Edu+AU+VIC+WA+NT+Pre:wght@400..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');



main{
    background-color: #686868;
    display: flex;
    flex-direction: column; 
    text-align: center;
    font-family: "Roboto", sans-serif;
}

h1{
    font-family: "Edu AU VIC WA NT Pre", cursive;
    font-size: 2rem;
    font-weight: 800;
}

h2{
    font-family: "Doto", sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
}

h3{
    font-size: 1.5rem;
    font-weight: 600;
}

P{
    font-size: 1.25rem;
    font-weight: 600;
}

.wrapper{
    display: flex;
    flex-direction: column;
    margin: 2rem auto;
    width: 80%;
    gap: 2rem;
}

nav{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    gap: 2rem;
}

.links-page-link{
    font-size: 1rem;
    font-weight: 800;
    width: 100%;
    margin: auto;
    padding: 0.5rem;
    border: .25rem solid #242424;
    color: #242424;
    background-color:  #ff1a1a;
    border-radius: 4rem;
    transition: 0.5s;
}

.links-page-link:hover{
    border: .25rem solid #ff1a1a;
    color: #ff1a1a;
    background-color:  #242424;
}

#Links-Page-Link-Youtube{
    border: .25rem solid #FF0000;
    color: #FF0000 ;
    background-color:  #fff ;
}

#Links-Page-Link-Youtube:hover{
    border: .25rem solid #FF0000;
    color: #fff ;
    background-color:  #282828 ;
}

#Links-Page-Link-FB{
    border: .25rem solid #17A9FD;
    color: #17A9FD ;
    background-color:  #fff;
}

#Links-Page-Link-FB:hover{
    border: .25rem solid #fff;
    color: #fff ;
    background-color:  #43609C;
}

#Links-Page-Link-Instagram {
    border: .25rem solid #5851db;
    color: #833ab4 ;
    background-color:  #fff;
}

#Links-Page-Link-Instagram:hover {
    border: .25rem solid #fff;
    color: #fff ;
    background-color:  #e1306c;
}

#Links-Page-Link-Threads {
    border: .25rem solid #000;
    color: #000 ;
    background-color:  #fff;
}

#Links-Page-Link-Threads:hover {
    border: .25rem solid #fff;
    color: #fff ;
    background-color:  #000;
}

#Links-Page-Link-X {
    border: .25rem solid #000;
    color: #000 ;
    background-color:  #fff;
}

#Links-Page-Link-X:hover {
    border: .25rem solid #fff;
    color: #fff ;
    background-color:  #000;
}

@media screen and (min-width: 360px) {
    .wrapper{
        margin: 3.5rem auto;
        gap: 3.5rem;
    }
    nav{
        gap: 3.5rem;
    }
}

@media screen and (min-width: 375px) {
    .wrapper{
        margin: 2rem auto;
        gap: 2rem;
    }
    nav{
        gap: 2rem;
    }
}

@media screen and (min-width: 390px) {
    .wrapper{
        margin: 3.5rem auto;
        gap: 3.5rem;
    }
    nav{
        gap: 3.5rem;
    }
}

@media screen and (min-width: 414px) {
    .wrapper{
        margin: 4rem auto;
        gap: 4rem;
    }
    nav{
        gap: 4rem;
    }
}

@media screen and (min-width: 768px) {
    .wrapper{
        margin: 4.5rem auto;
        gap: 4.5rem;
    }
    nav{
        gap: 4.5rem;
    }
}

@media screen and (min-width: 820px) {
    .wrapper{
        margin: 5.5rem auto;
        gap: 5.5rem;
    }
    nav{
        gap: 5.5rem;
    }
}

@media screen and (min-width: 1024px) {
    .wrapper{
        margin: 6.5rem auto;
        gap: 6.5rem;
    }
    nav{
        gap: 6.5rem;
    }
}

@media screen and (min-width: 1367px) {
    .wrapper{
        margin: 6.5rem auto;
        gap: 6.5rem;
        width: 35%;
    }
    nav{
        gap: 6.5rem;
    }
}