/* CSS Document */

* {
  box-sizing: border-box;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
  float: left;
  padding: 5px;
  border: 0px solid red;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

html {
   height: 1000px;
}

body {
   margin: 0px;
   font-family: 'Overlock', cursive;
   background: linear-gradient(purple, lightblue, purple);
}

p {
   font-family: 'Overlock', cursive;
   font-size: 24px;
}   

h1 {
   font-family: 'Overlock', cursive;
   font-size: 30px;
} 

h2 {
   font-family: 'Overlock', cursive;
   font-size: 25px;
}

input[type=text], input[type=password], input[type=email], select, input[type=number], input[type=date] {
   font-family: 'Overlock', cursive;
   width: 100%;
   font-size: 24px;
}

textarea {
   width: 100%;
   font-family: 'Overlock', cursive;
   font-size: 24px;
}

.btn {
   border: solid lightgray 2px;
   box-shadow: 0px 0px 2px lightgray;
   font-family: 'Overlock', cursive;
   font-size: 24px;
   width: auto;
   padding: 10px;
   border-radius: 10px;
   cursor: pointer;
   margin: 3px;
}

.btn:hover {
   border: solid black 2px;
}

.flex-cont-3 > div {
     width: 30%;
     margin: 5px 8px;
     padding: 0px;
     border: solid gray 5px;
     background-color: antiquewhite;
}

.flex-cont-3 > div:hover {
     border: solid white 5px;
}

.flex-cont-3 {
     display: flex;
     flex-wrap: wrap;
     margin-bottom: 0px;
     justify-content: center;
     font-size: 16px;
}

#myBtnTop {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
  width: 60px;
}
/*----------------------------------------------------------------*/

@media screen and (max-width: 1200px) {
	
  [class*="col-"] {
    width: 100%;
     }
   
   .flex-cont-3 > div {
      width: 100%;
   }
   
   p {
   font-family: 'Overlock', cursive;
   font-size: 21px;
   } 
}