@font-face {
    font-family: "Gilmer Heavy";
    src: url(assets/fonts/Gilmer\ Heavy.otf);
}
@font-face {
    font-family: 'Proxima Nova';
    src: url(assets/fonts/ProximaNova-Regular.otf);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url(assets/fonts/proximanova-regularitalic.otf);
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url(assets/fonts/Proxima\ Nova\ Bold.otf);
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url(assets/fonts/proximanova-boldit.otf);
    font-weight: bold;
    font-style: italic;
}

:root {
    --navy-bg: #272934;
    --azure: #1F8AFC;
    --lgray: #ABABAB;
    --bolt: #FFC100;
    --lnavy: #3B3E4F;
}

* {
    margin: 0;
}
p {
    color: var(--lgray);
    font-family: 'Proxima Nova';
    font-size: 1.5vw;
}
html {
    background-color: #272934;
    scroll-behavior: smooth;
    max-width: 100%;
}
a {
    text-decoration: none;
}

/* RADIAL BG */
/*.radial-bg {
    background-image: url(assets/img/radial\ lines.svg);
    background-size: 55vw;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 93% 50%;
}*/

.bg-spiral {
    width: 55vw;
    height: auto;
    position: absolute;
    z-index: -1;
    right: 2.5vw;
    top: 5vw;
    animation: rotation 125s infinite linear;
}

@keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(359deg);}
}
/* ARCHIMEDES NAVBAR */
.navbar {
    display: flex;
    justify-content: space-between;
    width: auto;
    padding: 5%;
}
.logo {
    display: flex;
    align-items: center;
}
.arch-pfp {
    width: 5vw;
    height: auto;
    margin: 0 1vw 0 0;
}
.arch-logo {
    color: white;
    font-family: "Gilmer Heavy";
}
.arch-logo1 {
    font-family: 'Gilmer Heavy';
    font-size: 3vw;
    line-height: 75%;
    color: white;
}
.arch-logo2 {
    font-family: 'Gilmer Heavy';
    font-size: 1.5vw;
    color: var(--azure);
}

/* OPTIONS */
.options {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.options li{
    display: inline-flex;
    flex-direction: row;
}
.options ul {
    display: inline-flex;
    align-items: center;
    gap: 2vw;
}
.options a {
    font-family: 'Proxima Nova';
    color: var(--bolt);
    text-decoration: none;
    font-size: 1.5vw;
}
.focus-button {
    background-color: var(--azure);
    font-family: 'Proxima Nova';
    color: white;
    padding: 1vw;
    border-radius: .75vw;
    transition: 1s;
}
.focus-button p {
    color: white;
}
.navsupport {
    background-color: transparent;
    font-family: 'Proxima Nova';
    color: var(--bolt);
    padding: 1vw;
    border-radius: .75vw;
    transition: 1s;
}
.navsupport p {
    color: var(--bolt);
}
.focus-button:hover {
    background-color: var(--bolt);
    transform: translate(0vw,-0.5vw);
}
.navsupport:hover {
    background-color: var(--bolt);
    transform: translate(0vw,-0.5vw);
}
.navsupport:hover p{
    color: white;
}

/* MAIN TEXT */
.mainbody {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    z-index: 1;
}
.main-image {
    width: 50vw;
    height: auto;
    border-radius: 1.5vw;
}
.main-text {
    padding: 2.5% 5% 2.5% 5%;
    width: 35%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5vw;
}
.main-text-header {
    font-size: 4vw;
    font-family: 'Gilmer Heavy';
    line-height: 100%;
    color: var(--azure);
}
.main-text-body {
    font-family: 'Proxima Nova';
    color: var(--lgray);
    font-size: 1.5vw;
}
.main-buttons {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 2.5vw;
    font-family: 'Proxima Nova';
    font-size: 1.5vw;
}
.main-buttons a {
    text-decoration: none;
    padding: 1vw;
    border-radius: .75vw;
}
.main-addtodiscord {
    background-color: var(--azure);
    transition: 1s;
}
.main-addtodiscord p {
    font-family: 'Proxima Nova';
    color: white;
}
.main-addtodiscord:hover {
    background-color: var(--bolt);
    transform: translate(0vw,-0.5vw);
}
.main-learnmore {
    color: var(--bolt);
    background-color: var(--lnavy);
    transition: 1s;
}
.main-learnmore p {
    color: var(--bolt);
}
.main-learnmore:hover {
    background-color: var(--bolt);
    transform: translate(0vw,-0.5vw);
}
.main-learnmore:hover p {
    color: white;
}
.main-line {
    width: 50%;
    border: .1vw solid #3B3E4F;
}

/* HIGHLIGHTS */
.highlights {
    padding: 0% 5% 0% 5%;
    margin-bottom: 10%;
}
.bullet {
    width: 1.5vw;
}
.main-bullets {
    padding: 0;
}
.main-bullets li {
    display: flex;
    flex-direction: row;
    gap: 1vw;
    padding: .5vw 0 .5vw 0;
    text-decoration: none;
    font-family: 'Proxima Nova';
    color: var(--lgray);
    font-size: 1.5vw;
}

/* BANNER */
.banner {
    background-color: var(--azure);
    text-align: center;
    padding-top: 3%;
    padding-bottom: 3%;
}
.banner-header {
    font-family: 'Gilmer Heavy';
    font-size: 3vw;
    color: var(--bolt);
    padding-bottom: 1%;
}
.banner-desc {
    color: white;
    font-family: 'Proxima Nova';
    font-size: 1.5vw;
}

/* SUPPORT SERVER */
.support-server {
    display: inline-flex;
    flex-direction: row;
    margin: 0vw 5vw 10vw 5vw;
    padding-top: 10vw;
    gap: 5vw;
    align-items: center;
}
.discordlogo {
    width: 6vw;
    height: auto;
    position: absolute;
    margin-top: -2vw;
    z-index: 1;
}
.box {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.server-box {
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #3B3E4F;
    border-radius: 1.5vw;
    padding: 4vw 3vw 3vw 3vw;
    gap: 1vw;
}
.pfp {
    width: 10vw;
    height: auto;
    padding: 1vw;
    margin: 0;
    display: block;
}
.pfp-circle {
    border: .1vw solid var(--bolt);
    border-radius: 50%;
    color: transparent;
    transition: 1s;
}
.pfp-circle:hover {
    background-color: var(--bolt);
}
.server-archimedes {
    font-family: 'Gilmer Heavy';
    color: white;
    font-size: 2.5vw;
}
.serverserver-button {
    background-color: var(--azure);
    padding: 1vw;
    border-radius: .75vw;
    transition: 1s;
}
.serverserver-button:hover {
    background-color: var(--bolt);
    transform: translate(0vw,-0.5vw);
}
.serverjoin-server {
    color: white;
}

.server-text {
    display: flex;
    flex-direction: column;
    gap: 2vw;
}
.having-issues {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}
.issues-title {
    font-family: 'Gilmer Heavy';
    font-size: 3vw;
    color: var(--azure);
}

.server-dm {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}
.dm-title {
    font-family: 'Gilmer Heavy';
    color: var(--azure);
    font-size: 3vw;
}

/* FOOTER */
.footer {
    margin: 5vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}