body{
    margin: 0;
    text-align: center;
    font-style: normal;
    font-family: 'Inter', sans-serif;
    background-color: #D8C9FE;
    color: #F9F6EF;
}
h3 {color: #F9F6EF;}
p{text-transform: none;}
.primaryColor{ color:#FFFBB9}
.logo-idea{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1%;
    background-color: #2E063D;
}
.logo-idea #logo {
    width: 5%; 
    max-width: max-content;
}
.logo-idea h1 {
    font-size: 250%;
}
.logo-idea #logo:hover {
    filter: brightness(0) saturate(100%) invert(18%) sepia(89%) saturate(2565%) hue-rotate(334deg) brightness(96%) contrast(102%);
}
.joinLink {
    position: relative;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.1em;
    color: #F9F6EF;
    background-color: #FFFBB9;
    padding: 1%;
    width: 5%;
    border-radius: 10px;
}
.joinLink img {
    position: absolute;
    top: 0%; 
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
}
.joinLink:hover .text { opacity: 0;}
.joinLink:hover img { opacity: 1; }
.joinLink:hover{background-color: #FFFBB9;}
.text {font-size: 28px;}
.joinLink:hover .text { opacity: 0;}
.joinLink:hover img { opacity: 1; }
.joinLink:hover{background-color: #5A262F;}
@media (max-width: 1920px) {
    .text {font-size: 20px;    }
    .joinLink img {width: 44%;}
}
#navbar{
    padding: 15px;
    position: sticky;
    top: 0px;
    z-index: 1;
}
nav {
    text-align: left;
    position: sticky;
    padding: .5%;
    background-color: #2E063D;
    border-bottom: 1px;
}
nav a{
    color: #FFFBB9;
    margin-left: 2%;
    margin-right: 2%;
    font-size: 29px;
    letter-spacing: .15em;
    text-decoration: none;
}
nav .active{color: #F9F6EF;}
nav a:hover{color: #5A262F;}
.box{
    background-position: center; 
    background-size: contain;
    background-repeat: no-repeat;   
    padding-top: 0%;
    margin-top: 0%;
}
.download {
    padding: 5%;
    background-color: #2E063D;
}
section{
    display: flex;
    align-items: center;
}
.clickOptions {
    margin-top: 5%;
    justify-content: center;
}
article {
    display: flex;
    flex-direction: column;
    text-align: center;
}
article a{
    border-radius: 10px;
}
.clickOptions img {
    width: 50%;
    margin-bottom: 4%;
}
.clickOptions img:hover {
    /* Start the spin animation and make the animation last for 2 seconds */
    animation: spinning 1s;
    /* When the animation is finished, don't start again */
    animation-iteration-count: 1;
}
@keyframes spinning {
    from { transform: rotate(0deg) }
    to { transform: rotate(3deg) }
}
.bottom-logo{
    align-items: center;
    max-width: 15%;
    margin-top: 2%;
    margin-bottom: 3%;
}