@media only screen and (max-width:600px){
    .taglong {
        position:relative;
        color:#646B61;
        font-size:30px;
        font-weight:50px;
        left:5px;
        transition:ease-in-out .5s;
        user-select: none;
    
    }
    
    
    
    .site-title:hover .taglong{
        color:white;
    
    }
    
    .missionArea{
        box-sizing:border-box;
        width:100vw;
        height:330px;
        display:inline-block;
        background-image:url(assets/court.jpg);
        background-repeat:no-repeat;
        background-size:cover;
        background-position-y:40%;
        background-size:100%;
        filter:drop-shadow(0 0 .55rem black);
        
    }
    
    .statement{
        box-sizing:border-box;
        width:50vw;
        height:auto;
        position:relative;
        margin-left:none;
        left:5px;
        background-repeat:no-repeat;
        border: 30px transparent;
        background-image:linear-gradient(rgb(100,100,50,.01)0%,rgb(100,100,50,.8)10%,rgb(100,100,50,.9)50%,rgb(100,100,50,.8)70%, rgb(100,100,50,.01)100%);
        top:45%;
        font-size:1.3em;
        padding-left:10px;
        padding-right:10px;
        padding-top:10px;
        color:black;
    
    }
    
    .statement p{
        font-size:3em;
        text-align:justify;
       
    }
    
    .statement h1{
        position:relative;
        left:30px;
        transition: ease-in-out .5s;
       
    }
    
    .statement:hover h1{
        left:20px;
        color:#ECC596;
    }
    
    
    
    .statement h2{
        font-size:.9em;
        position:relative;
        left:50px;
        bottom:5px;
        transition: ease-in-out .5s;
       
    }
    
    .statement:hover h2{
        bottom:5px;
        color:#26373e;
    }
    
    .statement h3{
        font-size:2em;
        position:relative;
        bottom:15px;
        left:25px;
        transition: ease-in-out .5s;
       
    }
    
    .statement:hover h3{
        font-size:2.2em;
        bottom:10px;
        left:30px;
        color:white;
    }
    
    .selfArea{
        box-sizing:border-box;
        width:100vw;
        height:auto;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        background-color: #646b61;
    }
    
    .self{
        box-sizing:border-box;
        height:auto;
        width:90vw;
        display:flex;
        flex-direction:column;
        margin-bottom:10px;
        margin-top:10px;
    }
    
    .self-title{
        height:5%;
        width:100%;
        text-align:center;
        color:#ECC596;
        position:relative;
        margin-top:auto;
        margin-bottom:auto;
        font-size:2em;
        padding-top:20px;
    }
    
    
    .selfExplain{
        height:auto;
        width:100%;
        margin-bottom:10px;
        margin-top:10px;
        font-size:1.0em;
        color:white;
        position:relative;
    }
    
    .selfExplain p{
        margin-left:5%;
        margin-right: 5%;
    
        text-align:justify;
        font-size:1.0em;
    }
    
    .whyArea{
    
        box-sizing:border-box;
        height:auto;
        width:100vw;
        background-color:#ECC596;
        display:flex;
        align-items:center;
        justify-content:center;
        filter: drop-shadow(0 0 0.75rem black);
      
    }
    
    
    .whyCardArea{
      
        box-sizing:border-box;
        height:auto;
      
        width:100vw;
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:space-around;
        flex-wrap:wrap;
        margin-bottom:60px;
        background-color:#26373e;
        
    }
    
    .whyCard{
        box-sizing:border-box;
    
        height:auto;
        width:32vw;
        min-width:250px;
        margin-top:10px;
        margin-bottom:10px;
        margin:5px;
    
        display:flex;
        flex-direction:column;
    
    
    
        
        
    }
    
    .whyImgArea{
        box-sizing:border-box;
        display:flex;
        width:32vw;
        height:20vh;
        min-width:250px;
        justify-content:start;
        align-items:start;
        flex-direction:row;
    
    
    
    
    }
    
    .whyImg{
        width:50%;
        height:100%;
    
        display:flex;
        align-items:center;
        justify-content:center;
    
    }
    
    .whyImg img{
       display:block;
        width:125px;
        height:125px;
        position:relative;
    
        
    };
    
    .whyExpArea{
        box-sizing:border-box;
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:center;
        width:32vw;
        min-width:250px;
        height:20vh;
    
    
    }
    
    .whyExplain{
        box-sizing:border-box;
        display:flex;
    
        align-items:center;
        justify-content:center;
        width:32vw;
        min-width:250px;
        height:auto;
    
    
       
    }
    
    .whyExplain p{
        width:32vw;
        min-width:250px;
        margin:25px;
        height:fit-content;
       text-align:center;
       word-wrap:break-word;
    
       
    }
} 

@media only screen and (min-width:601px) and (max-width:1024px){
    .taglong {
        position:relative;
        color:#646B61;
        font-size:30px;
        font-weight:50px;
        left:5px;
        transition:ease-in-out .5s;
        user-select: none;
    
    }
    
    
    
    .site-title:hover .taglong{
        color:white;
    
    }
    
    .missionArea{
        box-sizing:border-box;
        width:100vw;
        height:500px;
        display:inline-block;
        background-image:url(assets/court.jpg);
        background-repeat:no-repeat;
        background-size:cover;
        background-position-y:40%;
        background-size:100%;
        filter:drop-shadow(0 0 .55rem black);
        
    }
    
    .statement{
        box-sizing:border-box;
        width:30vw;
        height:auto;
        position:relative;
        margin-left:none;
        left:10px;
        background-repeat:no-repeat;
        border: 30px transparent;
        background-image:linear-gradient(rgb(100,100,50,.01)0%,rgb(100,100,50,.8)10%,rgb(100,100,50,.9)50%,rgb(100,100,50,.8)70%, rgb(100,100,50,.01)100%);
        top:45%;
        font-size:1.7em;
        padding-left:10px;
        padding-right:10px;
        padding-top:10px;
        color:black;
    
    }
    
    .statement p{
        font-size:3em;
        text-align:justify;
       
    }
    
    .statement h1{
        position:relative;
        left:30px;
        transition: ease-in-out .5s;
       
    }
    
    .statement:hover h1{
        left:20px;
        color:#ECC596;
    }
    
    
    
    .statement h2{
        font-size:.9em;
        position:relative;
        left:50px;
        bottom:5px;
        transition: ease-in-out .5s;
       
    }
    
    .statement:hover h2{
        bottom:10px;
        color:#26373e;
    }
    
    .statement h3{
        font-size:2em;
        position:relative;
        bottom:15px;
        left:25px;
        transition: ease-in-out .5s;
       
    }
    
    .statement:hover h3{
        font-size:2.2em;
        bottom:10px;
        left:30px;
        color:white;
    }
    
    .selfArea{
        box-sizing:border-box;
        width:100vw;
        height:auto;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        background-color: #646b61;
    }
    
    .self{
        box-sizing:border-box;
        height:auto;
        width:70vw;
        display:flex;
        flex-direction:column;
        margin-bottom:10px;
        margin-top:10px;
    }
    
    .self-title{
        height:5%;
        width:100%;
        text-align:center;
        color:#ECC596;
        position:relative;
        margin-top:auto;
        margin-bottom:auto;
        font-size:2em;
        padding-top:20px;
    }
    
    
    .selfExplain{
        height:auto;
        width:100%;
        margin-bottom:30px;
        margin-top:30px;
        font-size:1.2em;
        color:white;
        position:relative;
    }
    
    .selfExplain p{
        margin-left:15%;
        margin-right: 15%;
    
        text-align:justify;
        font-size:1.2em;
    }
    
    .whyArea{
    
        box-sizing:border-box;
        height:auto;
        width:100vw;
        background-color:#ECC596;
        display:flex;
        align-items:center;
        justify-content:center;
        filter: drop-shadow(0 0 0.75rem black);
      
    }
    
    
    .whyCardArea{
      
        box-sizing:border-box;
        height:auto;
      
        width:100vw;
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:space-around;
        flex-wrap:wrap;
        margin-bottom:60px;
        background-color:#26373e;
        
    }
    
    .whyCard{
        box-sizing:border-box;
    
        height:auto;
        width:32vw;
        min-width:250px;
        margin-top:10px;
        margin-bottom:10px;
        margin:5px;
    
        display:flex;
        flex-direction:column;
    
    
    
        
        
    }
    
    .whyImgArea{
        box-sizing:border-box;
        display:flex;
        width:32vw;
        height:20vh;
        min-width:250px;
        justify-content:start;
        align-items:start;
        flex-direction:row;
    
    
    
    
    }
    
    .whyImg{
        width:50%;
        height:100%;
    
        display:flex;
        align-items:center;
        justify-content:center;
    
    }
    
    .whyImg img{
       display:block;
        width:125px;
        height:125px;
        position:relative;
    
        
    };
    
    .whyExpArea{
        box-sizing:border-box;
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:center;
        width:32vw;
        min-width:250px;
        height:20vh;
    
    
    }
    
    .whyExplain{
        box-sizing:border-box;
        display:flex;
    
        align-items:center;
        justify-content:center;
        width:32vw;
        min-width:250px;
        height:auto;
    
    
       
    }
    
    .whyExplain p{
        width:32vw;
        min-width:250px;
        margin:25px;
        height:fit-content;
       text-align:center;
       word-wrap:break-word;
    
       
    }
}

@media only screen and (min-width:1025px){
    .taglong {
        position:relative;
        color:#646B61;
        font-size:30px;
        font-weight:50px;
        left:5px;
        transition:ease-in-out .5s;
        user-select: none;
    
    }
    
    
    
    .site-title:hover .taglong{
        color:white;
    
    }
    
    .missionArea{
        box-sizing:border-box;
        width:100vw;
        height:500px;
        display:inline-block;
        background-image:url(assets/court.jpg);
        background-repeat:no-repeat;
        background-size:cover;
        background-position-y:40%;
        background-size:100%;
        filter:drop-shadow(0 0 .55rem black);
        
    }
    
    .statement{
        box-sizing:border-box;
        width:30vw;
        height:auto;
        position:relative;
        margin-left:none;
        left:10px;
        background-repeat:no-repeat;
        border: 30px transparent;
        background-image:linear-gradient(rgb(100,100,50,.01)0%,rgb(100,100,50,.8)10%,rgb(100,100,50,.9)50%,rgb(100,100,50,.8)70%, rgb(100,100,50,.01)100%);
        top:45%;
        font-size:1.7em;
        padding-left:10px;
        padding-right:10px;
        padding-top:10px;
        color:black;
    
    }
    
    .statement p{
        font-size:3em;
        text-align:justify;
       
    }
    
    .statement h1{
        position:relative;
        left:30px;
        transition: ease-in-out .5s;
       
    }
    
    .statement:hover h1{
        left:20px;
        color:#ECC596;
    }
    
    
    
    .statement h2{
        font-size:.9em;
        position:relative;
        left:50px;
        bottom:5px;
        transition: ease-in-out .5s;
       
    }
    
    .statement:hover h2{
        bottom:10px;
        color:#26373e;
    }
    
    .statement h3{
        font-size:2em;
        position:relative;
        bottom:15px;
        left:25px;
        transition: ease-in-out .5s;
       
    }
    
    .statement:hover h3{
        font-size:2.2em;
        bottom:10px;
        left:30px;
        color:white;
    }
    
    .selfArea{
        box-sizing:border-box;
        width:100vw;
        height:auto;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        background-color: #646b61;
    }
    
    .self{
        box-sizing:border-box;
        height:auto;
        width:70vw;
        display:flex;
        flex-direction:column;
        margin-bottom:10px;
        margin-top:10px;
    }
    
    .self-title{
        height:5%;
        width:100%;
        text-align:center;
        color:#ECC596;
        position:relative;
        margin-top:auto;
        margin-bottom:auto;
        font-size:2em;
        padding-top:20px;
    }
    
    
    .selfExplain{
        height:auto;
        width:100%;
        margin-bottom:30px;
        margin-top:30px;
        font-size:1.2em;
        color:white;
        position:relative;
    }
    
    .selfExplain p{
        margin-left:15%;
        margin-right: 15%;
    
        text-align:justify;
        font-size:1.2em;
    }
    
    .whyArea{
    
        box-sizing:border-box;
        height:auto;
        width:100vw;
        background-color:#ECC596;
        display:flex;
        align-items:center;
        justify-content:center;
        filter: drop-shadow(0 0 0.75rem black);
      
    }
    
    
    .whyCardArea{
      
        box-sizing:border-box;
        height:auto;
      
        width:100vw;
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:space-around;
        flex-wrap:wrap;
        margin-bottom:60px;
        background-color:#26373e;
        
    }
    
    .whyCard{
        box-sizing:border-box;
    
        height:auto;
        width:32vw;
        min-width:250px;
        margin-top:10px;
        margin-bottom:10px;
        margin:5px;
    
        display:flex;
        flex-direction:column;
    
    
    
        
        
    }
    
    .whyImgArea{
        box-sizing:border-box;
        display:flex;
        width:32vw;
        height:20vh;
        min-width:250px;
        justify-content:start;
        align-items:start;
        flex-direction:row;
    
    
    
    
    }
    
    .whyImg{
        width:50%;
        height:100%;
    
        display:flex;
        align-items:center;
        justify-content:center;
    
    }
    
    .whyImg img{
       display:block;
        width:125px;
        height:125px;
        position:relative;
    
        
    };
    
    .whyExpArea{
        box-sizing:border-box;
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:center;
        width:32vw;
        min-width:250px;
        height:20vh;
    
    
    }
    
    .whyExplain{
        box-sizing:border-box;
        display:flex;
    
        align-items:center;
        justify-content:center;
        width:32vw;
        min-width:250px;
        height:auto;
    
    
       
    }
    
    .whyExplain p{
        width:32vw;
        min-width:250px;
        margin:25px;
        height:fit-content;
       text-align:center;
       word-wrap:break-word;
    
       
    }
}