* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Protest Strike", sans-serif;
}

body {
    min-height: 100%;
    min-width: 1600px;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.3rem 10%;
    display: flex;
    align-items: center;
    z-index: 100;
    justify-content: space-between;
}

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.1);
    backdrop-filter: blur(50px);
    z-index: -1;
}

.logo {
    font-size: 2rem;
    color: white;
    text-decoration: none;
    font-weight: 500;
}
.navbar a {
    font-size: 1rem;
    font-family: "Noto Sans Thai", sans-serif;
    color: white;
    text-decoration: none;
    font-weight: 700;
    margin-left: 2.5rem;
}
#check {
    display: none;
}
.icons {
    position: absolute;
    font-size: 2.8rem;
    right: 5%;
    color:  white;
    cursor: pointer;
    display: none;
}


.container{
    display: flex;
    min-width: 1500px;
    height: 750px;
    background-image: url('/2c7a7e0b353be26e2a8ce89af4ea2041.gif');
    background-size: cover;
    background-position: center;
    
}


.luk{
   width: 50%;
   height: fit-content;
   color: #ffffff;
   position: relative;
   margin-left: 50%;
   transform: translateX(-50%);
   text-align: center;
   text-decoration: none;
   border:5px solid #ffffff;
   padding: 25px 1px;
   background: transparent ;
   top: 35%;
   

}
.luk h1{
   
    font-size: 62px;
    font-family: "Noto Serif Thai", serif;
}
.luk p {
    margin: 10px 0 40px;
    font-family: "Noto Serif Thai", serif;
}

.mission{
    display: flex;
    flex-direction: column;
    width: auto;
    height: 2000px;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(#10002B,#240046,#3C096C,#5A189A,#7B2CBF,#9D4EDD
                                    ,#C77DFF,#E0AAFF,#FFF6CC,#FFF2B2,#FFEE99
                                    ,#FFE97F,#FFE566,#fcabe5,#F9B4ED,#EABAF6,#DABFFF,#C4C7FF,#ADCFFF,#96D7FF,#7FDEFF),url();
    flex-grow: 1;
    
}

.mission1{
    background-color: rgb(255, 255, 255);
    border-radius: 70%;
    margin: 50px 50px;
    flex: 15%;
    border:7px solid  #ffff47;
    font-family: "Noto Serif Thai", serif;
}


.mission1-5{
    justify-content: center;
    background-color: #f5ff70;
    width: 850px;
    height: 80px;
    margin:10px 300px;
    border-radius: 100px;
    border:10px solid #ffffff;

}

.mission1-5 h1{
    margin-top: 10px;
    margin-bottom: 30px;
    font-size: 35px;
    color: #000000;
    text-align: center;
    font-family: "Noto Serif Thai", serif;
    
}



.mission1 h1{
    text-align: center;
    margin-top: 80px;
    margin-bottom: 30px;
    font-size: 40px;
    font-family: "Noto Serif Thai", serif;
}

.mission1 p {
    margin-top: 0px;
    margin-bottom: 80px;
    text-align: center;
    font-size: 18px;
    font-family: "Noto Serif Thai", serif;
    
}


.ONE{
    display: flex;
    background-color: rgba(137, 43, 226, 0);
    flex: 10%;
    margin: 10px 10px;
    flex-grow: 1;
    font-family: "Noto Serif Thai", serif;
    
}

.ONE .mission2{
    margin:10px 10px;
    background-color: #ffffff;
    border-radius: 20px;
    border:5px solid  #aeaea9;
    font-family: "Noto Serif Thai", serif;
    
}

.mission2 h1{
    text-align: center;
    margin-top: 50px;
    font-family: "Noto Serif Thai", serif;
}



.mission2 p{
    margin: 10px 20px;
    font-family: "Noto Serif Thai", serif;
    
}






.ONE .mission3{
    margin:10px 10px;
    background-color: #ffffff;
    border-radius: 20px;
    border:5px solid  #aeaea9;
    font-family: "Noto Serif Thai", serif;
}

.mission3 h1 {
    text-align: center;
    margin-top: 50px;
    font-family: "Noto Serif Thai", serif;
}
.mission3 p{
    margin: 10px 20px;
    font-family: "Noto Serif Thai", serif;
}


.ONE .mission4{
    margin:10px 10px;
    background-color: #ffffff;
    border-radius: 20px;
    border:5px solid  #aeaea9;
    font-family: "Noto Serif Thai", serif;
}

.mission4 h1 {
    text-align: center;
    margin-top: 50px;
    font-family: "Noto Serif Thai", serif;
}
.mission4 p{
    margin: 10px 20px;
    font-family: "Noto Serif Thai", serif;
}




.TWO{
    display: flex;
    background-color: rgba(95, 140, 50, 0);
    flex: 5%;
    margin: 10px 10px;
    flex-grow: 1;
}

.TWO .mission5{
    margin: 10px 10px;
    background-color: #ffffff;
    border-radius: 20px;
    border:5px solid  #aeaea9;
    font-family: "Noto Serif Thai", serif;
}
.mission5 h1 {
    text-align: center;
    margin-top: 20px;
    font-family: "Noto Serif Thai", serif;
}
.mission5 p{
    margin: 10px 20px;
    margin-bottom: 20px;
    font-family: "Noto Serif Thai", serif;
}




.TWO .mission6{
    margin: 10px 10px;
    background-color: #ffffff;
    border-radius: 20px;
    border:5px solid  #aeaea9;
}
.mission6 h1 {
    text-align: center;
    margin-top: 20px;
    font-family: "Noto Serif Thai", serif;
}
.mission6 p{
    margin-right: 12px;
    margin-left: 20px;
    margin-top: 15px;
    font-family: "Noto Serif Thai", serif;
}
.course{
    margin: auto;
    padding-top: 10px;
    
    
}
.course h1{
    font-size: 36px;
    font-weight: 600;
    color:whitesmoke;
    text-align: center;
    
}


.course video {
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    margin-top: 10px;
}

.course a{
    margin-left: 100px;
}



.course h1 {
    background-color:burlywood;
    color: brown;
    width: 1300px;
}

.mis0 {
    margin-top: 100px;
    height: 2000px;
    min-width: 1472px;
    background-image: linear-gradient(#96D7FF,#7FDEFF,#C4C7FF,#ABC4FF,#B6CCFE,#BBDEFB,#D8F3DC,#dffb9c,#CFF27E)
}

.mis0 h1 {
    text-align: center;
    padding: 10px;
    margin-bottom: 50px;
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 230px;
    background-color:#f5ff70;
    color: #4c0086;
    width: 1000px;
    border:10px solid #ffffff;
    border-radius: 100px;
    font-family: "Noto Serif Thai", serif;
}

.mis0 p {
    margin: 40px 100px;
    margin-top: 20;
    margin-bottom: 50;
    background-color: #ffffff;
    font-size: 20px;
    padding: 10px;
    height: 120px;
    border:5px solid  #aeaea9;
    border-radius: 10px;
    font-family: "Noto Serif Thai", serif;
    
}

.mis1{
    width: 100%;
    height: 2000px;
    
    flex-direction: column;
    background-image: linear-gradient(#CFF27E,#F6BC66,#F6AC69,#F69C6D,#F68C70,#F57C73,#F56C77,#F56C77,#F55C7A)

}

.mis1 h1{
    width: 1400px;
    margin:20px 0px;
    margin-left: 20px;
    text-align: center;
    background-color:#f5ff70;
    color: #008657;
    padding: 10px;
    border:10px solid  #aeaea9;
    border-radius: 40px;
    font-family: "Noto Serif Thai", serif;

}





.mis1-1{
    
    width: 90%;
    height: 300px;
    margin-left: 120px;
    background-color: #ffffff;
    margin-bottom: 10px;
    display: flex;
    border: 5px solid #B6CCFE;
    border-radius: 10px;
    
}
.mis1-1 p {
    font-family: "Noto Serif Thai", serif;
    font-size: 10px;
}

.mis1-2{
    
    width: 90%;
    height: 350px;
    margin-left: 30px;
    background-color: #ffffff;
    margin-bottom: 10px;
    border: 5px solid #B6CCFE;
    border-radius: 10px;
    
}

.mis1-2 p {
    font-family: "Noto Serif Thai", serif;
}

.mis1-3{
    
    width: 90%;
    height: 370px;
    margin-left: 120px;
    background-color: #ffffff;
    margin-bottom: 10px;
    border: 5px solid #B6CCFE;
    border-radius: 10px;
    padding: 10px;
    font-family: "Noto Serif Thai", serif;
}
.mis1-3 p {
    font-family: "Noto Serif Thai", serif;

}

.mis1-4{
    
    width: 90%;
    height: 330px;
    margin-left: 30px;
    background-color: #ffffff;
    margin-bottom: 50px;
    padding: 10px;
    border: 5px solid #B6CCFE;
    border-radius: 10px;
    
}
.mis1-4 p {
    font-family: "Noto Serif Thai", serif;

}


.mis1 .mis1-1 img{
    width: auto;
    height: 250px;
    margin: 15px 20px;
    border: 10px solid #b5b1b1;
    border-radius: 10px;
    margin-bottom: 30px;

}

.mis1 .mis1-1 h1{
    margin-top: 0px;
}


.mis1 .mis1-1 p{
    margin: 20px 10px;
    font-size: 18px;
}


.mis1 .mis1-2 {
    display: flex;
}

.mis1 .mis1-2 image{
    background-color: #10002B;
    border: 10px solid #b5b1b1;
    border-radius: 10px;
}


.mis1 .mis1-2 p {
    margin: 20px 10px;
    font-size: 18px;
    width: 1000px;
    
    background-color: #00865700;
}



.mis1 .mis1-3 {
    display: flex;
    flex-direction: column;
    
}


.mis1 .mis1-3 p{
    margin: 7px 20px;
    font-size: 18px;
    
}

.mis1 .mis1-4 p{
    margin: 10px 20px;
    font-size: 19px;
    
}

/* BREAKPOINTS */
@media (max-width: 1090px) {
    .header {
        padding: 1.3rem 5%;
    }
}

@media (max-width: 967px) {
    .icons {
        display: inline-flex;
    }
    #check:checked~.icons #menu-icon {
        display: none;
    }
    .icons #close-icon {
        display: none;
    }
    #check:checked~.icons #close-icon {
        display: block;
    }
    .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 0;
        background: rgba(0,0,0,.1);
        backdrop-filter: blur(50px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
        overflow: hidden;
        transition: .3s ease;
    }
    #check:checked~.navbar {
        height: 17.7rem;
        
    }
    .navbar a {
        display: block;
        font-size: 1.1rem;
        margin: 1.5rem 0;
        text-align: center;
        transform: translateY(-50px);
        opacity: 0;
        transition: .3s ease;
    }
}
#check:checked~.navbar a {
   transform: translateY(0);
   opacity: 1;
   transition-delay: calc(.15s * var(--i));
}