body {background-color: #000000;
    max-width: 1440px;
    min-width: 1440px;}

.button{
    display: grid;
    grid-template-columns: repeat(7, 14%);
    grid-template-rows: 2;
    margin-top: 342px;
    position: relative;
}
.circle
{
border: 3px #0000ff solid;
width : 126px;
height: 126px;
border-radius:75px;
margin: 0 auto;
vertical-align: middle;
}


#athlete{
position: relative;
animation-name: ani1;
animation-duration: 2s;
animation-timing-function:ease-out;
animation-delay: 3s;
}


#athlete_text{
text-decoration: none;
position: relative;
color: #f2f2f2;
text-align: center;
font-family: 'Roboto', sans-serif;
font-weight: 500;
}
#medal_text{
text-decoration: none;
position: relative;
color: #f2f2f2;
text-align: center;
font-family: 'Roboto', sans-serif;
font-weight: 500;
}

#korea_text{
text-decoration: none;
position: relative;
color: #f2f2f2;
text-align: center;
font-family: 'Roboto', sans-serif;
font-weight: 500;
}

#women_text{
text-decoration: none;
position: relative;
color: #f2f2f2;
text-align: center;
font-family: 'Roboto', sans-serif;
font-weight: 500;
}
#event_text{
text-decoration: none;
position: relative;
color: #f2f2f2;
text-align: center;
font-family: 'Roboto', sans-serif;
font-weight: 500;
}
#medal{
    position: relative;
    animation-name: ani2;
    animation-duration: 2s;
    animation-timing-function:ease-out;
    animation-delay: 3s;
    
}



#women{
    position: relative;
animation-name: ani3;
    animation-duration: 2s;
    animation-timing-function:ease-out;
    animation-delay: 3s;
}

#event{
    position: relative;
animation-name: ani4;
    animation-duration: 2s;
    animation-timing-function:ease-out;
    animation-delay: 3s;
}



@keyframes ani1{
    0% {
        left:130%;
        top:0px;
        opacity: 0;
    }
    30%{
        opacity: 1;
    }
    50% {
        left:130%;
        top:0px;
    }
    100% {
        left : 00px;
        top:0px;
    }
}

@keyframes ani2{
    0% {
        left:65%;
        top:50%;
        opacity: 0;
    }
    30%{
        opacity: 1;
    }
    50% {
        left:65%;
        top:50%;
    }
    100% {
        left :00px;
        top:0px;
    }
}
@keyframes ani3{
    0% {
        right:65%;
        top:50%;
        opacity: 0;
    }
    30%{
        opacity: 1;
    }
    50% {
        right:65%;
        top:50%;
    }
    100% {
        right : 00px;
        top:0px;
    }
}
@keyframes ani4{
    0% {
        right:130%;
        top:0px;
        opacity: 0;
    }
    30%{
        opacity: 1;
    }
    50% {
        right:130%;
        top:0px;
    }
    100% {
        right : 00px;
        top:0px;
    }
}

.circle_text
{
position: relative;
top: 40px;
color: #f2f2f2;
text-align: center;
font-family: 'Roboto', sans-serif;
font-weight: 500;
animation-name: title_opacity;
animation-duration: 3s;
animation-delay: 3s;
animation-timing-function:ease-out;

}

@keyframes title_opacity{
    0% {opacity: 0;}
    
    50% {opacity :0;}
    100% {opacity: 1;}
}
.about{
    grid-column-start: 2;
    grid-column-end:7;
}
#about
{position : relative;
top: 200px;
color: #f2f2f2;
text-align: center;
font-family: 'Noto Sans', sans-serif;
font-style: italic;
vertical-align: middle;
animation-name: title_opacity;
animation-duration: 3s;
animation-delay: 3s;}

#korea{
    animation-name: ani5;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-delay: 3s;
}

@keyframes ani5{
    0% {
        
        opacity: 0;
    }
    30%{
        opacity: 1;
    }
    
}