.first-flex{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font-size:35px;
  height:200px;
  background-color:green;
  color:blue;
  
background-image:url("https://mathivation.neocities.org/teach-smile.jpg");
background-repeat:repeat;
background-size: 5px 5px;
background-position:right bottom;
}

.first-flex>b, .first-flex>div{
 background-color:green;
 color:white;
}

@media screen and (max-width:480px) {
 .first-flex {
  flex-direction:column;
  justify-content:center;
  margin-bottom:10px;
  background-color:purple;
  text-align:center;
 }
}

.second-flex{
  display:flex;
  background-color:black;
  color:white;
  height:100%;
  justify-content:space-between;
}


.second-flex>div{
  background-color:green;
  text-align:center;
  font-size:35px;
  color:white;
  width:33%;
}

.second-flex>div:hover{
  background-color:black;
}

.second-flex .hide{
  display:none;
}

.second-flex>div:hover .hide{
  display:flex;
  flex-direction:column;
  width:100%;
}

.second-flex>div:hover .hide a{
  text-decoration:none;
  color:yellow;
}

.hide .hidden{
 display:none; 
}

.hide>div:hover .hidden{
 display:flex;
 justify-content:space-between;
 background-color:purple;
}


@media screen and (max-width:480px) {
  
 .second-flex {
   flex-direction:column;
   margin-bottom:10px;
   background-color:purple;
   
   }
 .second-flex>div{
  width:100%;
  height:100%;
  text-align:center;
 }
 .hide>div:hover .hidden{
  flex-direction:column; 
 }
}



.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 100px solid blue;
  border-right: 100px solid green;
  border-bottom: 100px solid cyan;
  border-left: 100px solid red;
  width: 100px;
  height: 100px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media screen and (max-width:480px) {
 .loader{
  flex-direction:column; 
  flex-wrap:wrap;
  border: 5px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid blue;
  border-right: 10px solid green;
  border-bottom: 10px solid cyan;
  border-left: 10px solid red;
  width: 100px;
  height: 100px;
 }
}

.flex-container{ display:flex; background-color:purple; justify-content:space-between;
      border:10px solid black; border-radius:20px;
    background-image: linear-gradient(green, DodgerBlue, green, purple, red, green); overflow:hidden; }
    
img{width:50%;}
img:hover{background-color:cyan; width:350%; }



.button1{width:100%;  background-color:green; color:white;
border:5px solid black; border-radius:50px; margin-top:5px; font-size:25px;}

.hider{
  display:none;
}


.button1:hover .hider{
  display:block;
  border:5px solid black;
  margin-top:2%;
  border-radius:50px;
  position:relative;
  color:black;
  font-size:35px;
  background-color:yellow;
  
}

@keyframes animated{
 
 0%{background-color:violet; color:white; font-family:Lora; font-size:100px;}
  4%{background-color:black; color:white; font-family:Lalezar; font-size:105px;}
  8%{background-color:red; color:white; font-family:'Jockey One'; font-size:110px;}
  12%{background-color:slateblue; color:white; font-family:'Contrail One'; font-size:115px;}
  16%{background-color:yellow; color:black; font-family:Ubuntu; font-size:120px;}
  20%{background-color:black; color:white; font-family:'Berkshire Swash'; font-size:125px;}
  24%{background-color:orange; color:black; font-family:Alegreya; font-size:130px;}
  28%{background-color:cyan; color:white; font-family:Aclonica; font-size:135px;}
  32%{background-color:green; color:white; font-family:Rubik; font-size:140px;}
  36%{background-color:black; color:white; font-family:Raleway; font-size:145px;}
  40%{background-color:lightgreen; color:black; font-family:Montserrat; font-size:150px;}
  44%{background-color:black; color:white; font-family:Bangers; font-size:155px;}
  48%{background-color:royalblue; color:white; font-family:Roboto; font-size:160px;}
  52%{background-color:black; color:white; font-family:Righteous; font-size:165px;}
  56%{background-color:slateblue; color:black; font-family:Ranga; font-size:170px;}
  60%{background-color:pink; color:white; font-family:Rancho; font-size:175px;}
  64%{background-color:brown; color:white; font-family:Rakkas; font-size:180px;}
  68%{background-color:black; color:white; font-family:Merriweather; font-size:185px;}
  72%{background-color:tomato; color:white; font-family:'Bungee Inline'; font-size:190px;}
  76%{background-color:black; color:white; font-family:Bungee; font-size:200px;}
  80%{background-color:purple; color:white; font-family:Lota; font-size:200px;}
  84%{background-color:purple; color:white; font-family:Sofia; font-size:200px;}
  88%{background-color:purple; color:white; font-family:Lota; font-size:200px;}
  92%{background-color:purple; color:white; font-family:"Comic Sans MS", cursive, sans-serif; font-size:200px;}
  96%{background-color:purple; color:white; font-family:"Faster One"; font-size:200px;}
  100%{background-color:purple; color:white; font-family:Lobster; font-size:200px;}
  
}

.animateddiv{
 background-color:green;
 font-size:64px;
 min-height:750px;
 padding-bottom:100px;
 box-sizing:border-box;
 width:100%;
 text-align:center;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 font-variant:small-caps;
 animation-duration:240s;
 animation-name:animated;
 animation-iteration-count:infinite;
}


span{color:yellow;}

body{padding:0; margin:0}