.item1 { grid-area: header;}
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.item6 { grid-area: cluster2;}
.item7 { grid-area: cluster6;}
.item8 { grid-area: cluster3;}
.item9 { grid-area: cluster7;}
.item10 { grid-area: cluster4; }
.item11 { grid-area: cluster8; }
.header{
text-align: center;
font-family: "Comic Sans MS", "Comic Sans";
}
label{
    text-align: left;
    font-size: 25px;
    font-family: "Comic Sans MS", "Comic Sans";
}
input[type=checkbox] {
         position: relative;
	       cursor: pointer;
           padding-right: 20;
           top: -5px;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 16px;
         height: 16px;
         top: 0;
         left: 0;
         border: 2px solid #555555;
         border-radius: 3px;
         background-color: white;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid black;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}
input[type=button}]{
    left: 20px;
}

.button {
        margin-left: 25%;
        background-color: #2520af;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        }
.buttonsubmit {
        background-color: #2520af;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline;
        font-size: 16px;
        cursor: pointer;
        margin-left: 2px;
        }
.CH{
    text-align: center;
}

.target::before{
    content: "Cluster 1";
}
.hc1 {
	animation: pulse 3s;
    animation-fill-mode: forwards;
}
@keyframes pulse {
	0% {
	opacity: 100%;
	}
	10% {
		opacity: 80%;
	}
    20%{
        opacity: 60%;
    }
	30% {
		opacity: 40%;
	}
    40%{
        opacity: 20%;
    }
	50% {
		opacity: 0%;
	}
	60% {
		opacity: 0%;
	}
    70%{
        opacity: 40%;
    }
	80% {
		opacity: 60%;
	}
    90%{
        opacity: 80%;
    }
	100% {
		opacity: 100%;
	}
}
.hc1:after {
	content: "Agricultural and Enviromental Science";
	animation: spin 5s ease;
}
@keyframes spin {
  0% { content:"Cluster 1"; }
  100% { content:"Agricultural and Enviromental Science"; }

}




.target1::before{
    content: "Cluster 5";
}
.hc5 {
	animation: pulse5 3s;
    animation-fill-mode: forwards;
}
@keyframes pulse5 {
	0% {
	opacity: 100%;
	}
	10% {
		opacity: 80%;
	}
    20%{
        opacity: 60%;
    }
	30% {
		opacity: 40%;
	}
    40%{
        opacity: 20%;
    }
	50% {
		opacity: 0%;
	}
	60% {
		opacity: 0%;
	}
    70%{
        opacity: 40%;
    }
	80% {
		opacity: 60%;
	}
    90%{
        opacity: 80%;
    }
	100% {
		opacity: 100%;
	}
}
.hc5:after {
	content: "Human Services";
	animation: spin5 5s ease;
}
@keyframes spin5 {
  0% { content:"Cluster 5"; }
  100% { content:"Human Services"; }

}


.Parasite::before{
    content: "Cluster 2";
}
.headerC2 {
	animation: pulse 3s;
    animation-fill-mode: forwards;
}
@keyframes pulse2 {
	0% {
	opacity: 100%;
	}
	10% {
		opacity: 80%;
	}
    20%{
        opacity: 60%;
    }
	30% {
		opacity: 40%;
	}
    40%{
        opacity: 20%;
    }
	50% {
		opacity: 0%;
	}
	60% {
		opacity: 0%;
	}
    70%{
        opacity: 40%;
    }
	80% {
		opacity: 60%;
	}
    90%{
        opacity: 80%;
    }
	100% {
		opacity: 100%;
	}
}
.headerC2::after {
	content: "Business and Marketing";
	animation: spin2 5s ease;
}
@keyframes spin2 {
  0% { content:"Cluster 2"; }
  100% { content:"Business and Marketing"; }

}


.ExploitedViolence::before{
    content: "Cluster 6";
}
.hc6 {
	animation: pulse6 3s;
    animation-fill-mode: forwards;
}
@keyframes pulse6 {
	0% {
	opacity: 100%;
	}
	10% {
		opacity: 80%;
	}
    20%{
        opacity: 60%;
    }
	30% {
		opacity: 40%;
	}
    40%{
        opacity: 20%;
    }
	50% {
		opacity: 0%;
	}
	60% {
		opacity: 0%;
	}
    70%{
        opacity: 40%;
    }
	80% {
		opacity: 60%;
	}
    90%{
        opacity: 80%;
    }
	100% {
		opacity: 100%;
	}
}
.hc6:after {
	content: "Millitary and Protective Services";
	animation: spin6 5s ease;
}
@keyframes spin6 {
  0% { content:"Cluster 6"; }
  100% { content:"Millitary and Protective Services"; }

}



.TheatreKid::before{
    content: "Cluster 3";
}
.hc3 {
	animation: pulse3 3s;
    animation-fill-mode: forwards;
}
@keyframes pulse3 {
	0% {
	opacity: 100%;
	}
	10% {
		opacity: 80%;
	}
    20%{
        opacity: 60%;
    }
	30% {
		opacity: 40%;
	}
    40%{
        opacity: 20%;
    }
	50% {
		opacity: 0%;
	}
	60% {
		opacity: 0%;
	}
    70%{
        opacity: 40%;
    }
	80% {
		opacity: 60%;
	}
    90%{
        opacity: 80%;
    }
	100% {
		opacity: 100%;
	}
}
.hc3:after {
	content: "Communcation, Arts, and Media Technology";
	animation: spin3 5s ease;
}
@keyframes spin3 {
  0% { content:"Cluster 3"; }
  100% { content:"Communcation, Arts, and Media Technology"; }

}



.nurse::before{
    content: "Cluster 4";
}
.hc4 {
	animation: pulse4 3s;
    animation-fill-mode: forwards;
}
@keyframes pulse4 {
	0% {
	opacity: 100%;
	}
	10% {
		opacity: 80%;
	}
    20%{
        opacity: 60%;
    }
	30% {
		opacity: 40%;
	}
    40%{
        opacity: 20%;
    }
	50% {
		opacity: 0%;
	}
	60% {
		opacity: 0%;
	}
    70%{
        opacity: 40%;
    }
	80% {
		opacity: 60%;
	}
    90%{
        opacity: 80%;
    }
	100% {
		opacity: 100%;
	}
}
.hc4:after {
	content: "Health Science Professions";
	animation: spin4 5s ease;
}
@keyframes spin4 {
  0% { content:"Cluster 4"; }
  100% { content:"Health Science Professions"; }

}


.tech::before{
    content: "Cluster 7";
}
.hc7 {
	animation: pulse4 3s;
    animation-fill-mode: forwards;
}
@keyframes pulse7 {
	0% {
	opacity: 100%;
	}
	10% {
		opacity: 80%;
	}
    20%{
        opacity: 60%;
    }
	30% {
		opacity: 40%;
	}
    40%{
        opacity: 20%;
    }
	50% {
		opacity: 0%;
	}
	60% {
		opacity: 0%;
	}
    70%{
        opacity: 40%;
    }
	80% {
		opacity: 60%;
	}
    90%{
        opacity: 80%;
    }
	100% {
		opacity: 100%;
	}
}
.hc7:after {
	content: "Applied Technology";
	animation: spin7 5s ease;
}
@keyframes spin7 {
  0% { content:"Cluster 7"; }
  100% { content:"Applied Technology"; }

}






.HighTech::before{
    content: "Cluster 8";
}
.hc8 {
	animation: pulse8 3s;
    animation-fill-mode: forwards;
}
@keyframes pulse8 {
	0% {
	opacity: 100%;
	}
	10% {
		opacity: 80%;
	}
    20%{
        opacity: 60%;
    }
	30% {
		opacity: 40%;
	}
    40%{
        opacity: 20%;
    }
	50% {
		opacity: 0%;
	}
	60% {
		opacity: 0%;
	}
    70%{
        opacity: 40%;
    }
	80% {
		opacity: 60%;
	}
    90%{
        opacity: 80%;
    }
	100% {
		opacity: 100%;
	}
}
.hc8:after {
	content: "High Technology and Engineering";
	animation: spin8 5s ease;
}
@keyframes spin8 {
  0% { content:"Cluster 8"; }
  100% { content:"High Technology and Engineering"; }

}




.C1{
    text-align: left;
    font-size: 25px;
    font-family: "Comic Sans MS", "Comic Sans";
}
.result{
    font-size: 25px;
}
.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'main main main right right right'
    'cluster2 cluster2 cluster2 cluster6 cluster6 cluster6'
    'cluster3 cluster3 cluster3 cluster7 cluster7 cluster7'
    'cluster4 cluster4 cluster4 cluster8 cluster8 cluster8'
    'menu menu menu footer footer footer';
  gap: 10px;
  background-color: black;
  padding: 10px;
}

.grid-container > div {
  background-color: #ff91af;
  text-align: left;
  padding: 20px 0;
 
}
input[type=text] {
  width: 80%;
  padding: 12px 5px;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none; 
  font-family: "Comic Sans MS", "Comic Sans";
}

input[type=text]:focus {
  border: 3px solid #555;
}
.NameEnter{
font-family: "Comic Sans MS", "Comic Sans";
margin-left: 8px;
}