@font-face {
    font-family:Barbaro;
    src:url(./assets/barbaro.otf);
    ascent-override: 95%;
    descent-override: normal;
}
@font-face {
    font-family:RobotoCondensed;
    src:url(./assets/RobotoCondensed.ttf) 
}
body {
    margin:0;
    padding:0;
    border:0;
    height:100%;
    font-family:Barbaro 
}
section{
    width:100%;
    height:100%;
    overflow:hidden;
    text-align:center 
}
nav {
    margin: 4vw 4vw 0 4vw;
    display:flex;
    justify-content:space-between 
}
#logo > a > img {
    height: 8vw;
    opacity:80% 
}
#links {
    float:right;
    margin-top:auto;
    margin-bottom:auto;
    opacity:80%;
}
#links > a {
    color:#FFF;
    font-size:6vw;
    font-weight:400;
    text-decoration:none;
    
}
#sect4Content{
    padding: 12vw 0 12vw 0;
    overflow:hidden;
    display:flex;
    gap: 4vw;
    margin:auto;
    flex-direction:column;
    justify-content:space-around;
    align-items:baseline;
    text-align:center;
}

#section4{
    background:url(./assets/noise15.png) repeat,radial-gradient(87.09% 87.09% at 50.00% 50.00%,#FFF 0%,#4a4a4a 100%);
}

#sect4Content {
    align-items:center;
    position: relative;
}

#logo2 {
    margin:auto;
    width: 50vw;
}

#sect4Content > #links {
    display: flex;
    gap: 4vw;
    margin: auto;
    transition: all .3s;
    flex-direction: column;
}
#sect4Content > #links > a {
    color:#292A2F;
    font-size: 8vw;
    font-weight:400 
}

#copyright {
    color:#292a2fd6;
    font-family:RobotoCondensed;
    font-weight:400;
    position:absolute;
    bottom:0;
    margin: auto;
    font-size: 3vw;
}
#links > a {
    transition:all .3s;
    display:block;
    cursor:pointer;
}
#links > a:hover {
    transform:scale(1.05) 
}


@media screen and (min-width: 1000px) and (min-aspect-ratio: 1/1) {
    section{
        width:100%;
        height:100vh;
        overflow:hidden;
    }
    nav {
        margin: 4vh 4vw 0 4vh;
    }
    #logo > a > img {
        height: 10vh;
    }
    #links > a {
        font-size: 8vh;
    }

    #sect4Content {
        padding: 5vh 0 5vh 0;
        gap: 3vh;
    }
    
    #section4{
        height: 100%;
    }
    #sect4Content {
        flex-direction: row;
        padding: 2vw;
    }
    #logo2 {
        width: 30vw;
    }
    #sect4Content > #links {
        flex-direction: row;
        gap: 4vw;
        margin-right: 1vw;
    }
    #sect4Content > #links > a {
        font-size: 4vw;
        line-height: normal;
        padding-bottom: 5%;
    }
    #copyright {
        font-size: 2vw;
        left: 0;
        margin-left: 2vw;
    }
}