@font-face { 
    font-family:ComicSans; src: url('../fonts/comic.html'); 
}

html {
    scroll-behavior: smooth !important; 
}
body {
    max-width:1920px; 
    margin:0 auto;
    height:auto; 
    font-family:ComicSans;
}   
a {
    color: inherit; /* blue colors for links too */
    text-decoration: inherit; /* no underline */
    padding:0 20px;
}
header {
    width:90%; 
    margin:20px auto;
    font-size:1.2rem;
}
.AI-SVG {
    width:80px;
}

.header-div-left {
    display:flex;
    width:25%;
}

.header-div-center {
    width:50%;
    justify-content: center;
    display:flex;
}
.header-div-right {
    width:25%; 
    display:flex;
    height:1px;
}

.clear {
    clear:both;
}

.navbar_container {
    display:flex;
}

.autistic-logo {
    width:50%; 
}

#about {
    display:flex;
    width:100%; 
} 

.about-left {
    display:flex; 
    width:50%;
    justify-content: center;
}

.about-right {
    width:50%;
    padding:200px 0 0 0;
}

.autistic-text {
    width:70%;
}

.about-right p {
    font-size:1.5rem;
}

.about-right a {
	padding: 0px 20px;
    border:2px solid black;
	cursor: pointer;
    font-size:1.2rem;
    font-weight:bold;
}

button:hover {
    opacity:0.5;
}

.text-center {
    text-align:center;
    width:60%;
    margin:0 auto;
    padding:200px 0 0 0;
    font-size:1.3rem;
}

.body-container {
    width: 90%;
    margin:0 auto; 
}

.roadmap-text {
    width:300px;
    padding:100px 0 100px 0;
}

#roadmap {
    width:100%;
    margin:0 auto;
    text-align:center;
}
#roadmap p {
    font-size: 1.2rem; 
}

#roadmap h2 {
    font-size:2rem;
}

.roadmap-container {
    width:100%;
}

.left {
    float:left;
} 

.roadmap-container-left { 
    width:33%;
}

.roadmap-container-center {
    width:33%;
}

.roadmap-container-left { 
    width:33%;
}

.roadmaps-svg {
    padding:100px 0 0 0;
    width:200px;
}

#tokenomics {
    text-align:center;
    width:100%;
    margin:0 auto;
    
}
#tokenomics h2 {
    font-size:2rem;    
}
.tokenomics-text-svg {
    width:300px;
    padding:200px 0 100px 0;
}

.tokenomics-container-left {
    width:50%; 
}

.tokenomics-container-right {
    width:50%; 
}

.tokenomics-svg {
    width:200px;
}

.text-ree { 
    width:80%;
    padding:100px 0;
} 


@media only screen and (max-width: 600px) {
    .text-center {
        padding:100px 0 0 0;
    }
    .about-left {
        display:block;
        width:100%;
        margin:0 auto;
        height:auto;
        padding:50px 0 0 0;
    }
    .about-right { 
        display:block;
        width:100%;
        margin:0 auto;
        height:auto;
        padding:25px 0;
    }
    #about {
        display:block;
        text-align:center;
    }
    .zx {
        font-size:0.9rem;
    }
    body {
        text-align:center;
    }
    .left {
        float:none;
        margin:0 auto;
    }
    .tokenomics-svg {
        width:150px;
    }
    .AI-SVG {
        width:50px;
    }
    header a {
        padding:0 5px;
        font-size: 1.2rem;
    }
    .text-center {
        width:90%;
    }
    .roadmap-container-left {
        width:100%;
    }
    
    .roadmap-container-center {
        width:100%;
    }
    
    .roadmap-container-left { 
        width:100%;
    }
    .tokenomics-text-svg {
        padding:100px 0;
    }
    .roadmap-text {
        padding:100px 0 0 0;
    }
  } 
  @media only screen and (max-width: 500px) {
    .autistic-logo {
        width:80%;
        margin:0 auto;
    }
    .autistic-text {
        width:90%;
        padding:25px 0;
    }
    .mobile-padding {
        margin:10px 0 0 0;
    }
}

.mobile-padding {
    margin:10px 0 0 0;
}

a:hover {
    opacity:0.5;
}

.completed {
    text-decoration: line-through;
}

body {
    animation: fadeInAnimation ease 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
 
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

@keyframes blink {
    100%,
    0% {
      fill: #ffffff;
    }
    60% {
      fill: #FED024;
    }
  }
  

.st2 {
    animation: blink 0.8s infinite;
}