html {
    height: 100%;
    font-size:90%;
}
body {
    font-size:1.8rem;
}
* {
    -moz-box-sizing: border-box;
}

.myDivtop {
    background-color: white;
    text-align: center;
    height: 6rem;
    }
.myDiv {
    border: 5px solid transparent;
    background-color: #9978ef;
    color: white;
    text-align: center;
    padding: 1rem 0 1rem 0;
    border-radius: 30px;
    }
.myDiv1 {
    border: 5px solid transparent;
    background-color: #00aaff;
    color: white;
    text-align: left;
    padding: 1rem 0 1rem 0;
    border-radius: 3rem;
    font-size: 3.125rem;
    }
.myDiv2 {
    background-color: #9978ef;
    color: white;
    /*text-align: center;*/
    vertical-align: middle;
    height: 11.25rem;
    border-radius: 30px;
    }
/* Green */
.myDiv3 {
    border: 5px solid transparent;
    background-color: #7a9600;
    color: white;
    text-align: center;
    font-size: 2.5rem;
    border-radius: 30px;
    }
/* Green */
.myDiv3-1 {
    display: inline;
    position: fixed;
    color: white;
    text-align: center;
    font-size: 4.8rem;
    top:1.875rem;
    left:91rem;
    padding: 1rem 1rem 1rem 1rem;
    border-radius: 10px;
    }
.myDiv4 {
    display: inline;
    position: fixed;
    border: 5px solid #ff4072;
    background: #ff4072;
    text-align: center;
    top:1.875rem;
    right:2.5rem;
    padding: 1rem 1rem 1rem 1rem;
    border-radius: 10px;
    }
.myDiv4-5 {
    display: inline;
    position: fixed;
    border: 5px solid #ffffff;
    background: #ffffff;
    text-align: center;
    top:1.875rem;
    right:33rem;
    padding: 1rem 1rem 1rem 1rem;
    border-radius: 10px;
    }
.myDiv5 {
    display: inline;
    position: fixed;
    border: 5px solid #ff7c00;
    background: #ff7c00;
    text-align: center;
    top:1.875rem;
    right:10.8rem;
    padding: 1rem 1rem 1rem 1rem;
    border-radius: 10px;
    }
.myHome {
    display: inline;
    position: fixed;
    border: 5px solid #00aaff;
    background: #00aaff;
    text-align: center;
    top:1.875rem;
    left:1.875rem;
    padding: 1rem 1rem 1rem 1rem;
    border-radius: 10px;
    }
.myDiv6 {
    display: block;
    position: fixed;
    z-index: 99;
    top: 0;
    background: white;
    height: 11.25rem;
    width: 100%;
    }
.myDiv7 {
    display: block;
    border: 5px solid transparent;
    background-color: white;
    text-align: center;
    padding: 20px 0 20px 0;
    }
.myDiv8 {
    border: 5px solid transparent;
    background-color: #f8f9fa;
    text-align: center;
    padding: 10px 0 10px 0;
    border-radius: 30px;
    }
.myDiv9 {
    border: 5px solid transparent;
    background-color: #9978ef;
    text-align: left;
    font-size: 3.125rem;
    padding: 10px 0 10px 0;
    }
/* Orange */
.myDiv10 {
    border: 5px solid transparent;
    background-color: #ff7c00;
    color: white;
    text-align: center;
    font-size: 2.5rem;
    padding: 1rem 0 1rem 0;
    border-radius: 30px;
    }
/* Yellow */
.myDiv11 {
    border: 5px solid transparent;
    background-color: #ffa900;
    color: white;
    text-align: center;
    font-size: 2.5rem;
    padding: .5rem 0 2rem 0;
    border-radius: 30px;
    }
/* Purple */
.myDiv12 {
    border: 5px solid transparent;
    background-color: #9978ef;
    color: white;
    text-align: center;
    font-size: 2.5rem;
    padding: 1rem 0 1rem 0;
    border-radius: 30px;
    }
/* Pink */
.myDiv13 {
    border: 5px solid transparent;
    background-color: #ff4072;
    color: white;
    text-align: center;
    font-size: 2.5rem;
    padding: 1rem 0 1rem 0;
    border-radius: 30px;
    }
/* Blue */
.myDiv14 {
    border: 5px solid transparent;
    background-color: #00aaff;
    color: white;
    text-align: center;
    font-size: 2.5rem;
    padding: 1rem 0 1rem 0;
    border-radius: 30px;
    }
/* White */
.myDiv15 {
    border: 5px solid transparent;
    background-color: #ffffff;
    font-size: 2.5rem;
    padding: 1rem 0 1rem 0;
    border-radius: 30px;
    margin-left: 7rem;
    }
.myDiv16 {
    border: 5px solid transparent;
    background-color: #ffffff;
    text-align: right;
    flex-grow: 1;
    font-size: 2.5rem;
    padding: 1rem 0 1rem 0;
    border-radius: 30px;
    }
.myDiv17{
    display: flex;
    width: 100%;
    background-color: #ffffff;
    overflow: hidden;
    border-radius: 30px;
    }
/*parent*/
.myDiv20{
  border: 1px solid black;
  margin: 1rem;
  padding: 2rem 2rem;
  text-align: center;
 }
 /*child 1*/
.myDiv21{
    /*width: 8rem;
    height: 10rem;*/
    display: inline-block;
    padding: 0.01rem 3rem;
    vertical-align: middle;
}
/*child 2*/
.myDiv22{
    width: 100px;
    height: 100px;
    display: inline-block; 
    vertical-align: middle;
}
.imgDiv {
    display: inline-block;
    width: 100%;
    background-color: #f8f9fa;
    text-align: center;
    margin-left:auto;
    margin-right:auto;
    border: 1px solid transparent;
    overflow: hidden;
    border-radius: 30px;
    }
textarea {
    width: 100%;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid black;
    border-radius: 4px;
    background-color: #ffffff;
    resize: none;
    }
input[type=submit] {
    border: 5px solid black;
    font-size: 1rem;
    border-radius: 30px;
    }
input[type=text] { 
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    transition: width 0.4s ease-in-out;
    }
/* The grid: Four equal columns that float next to each other */
.column {
    float: left;
    width: 25%;
    /*padding: 10px;*/
    }
/* Style the images inside the grid */
.column img {
    opacity: 0.8; 
    cursor: pointer; 
    }

.column img:hover {
    opacity: 1;
    }  
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
    }
/* The expanding image container */
.container {
    position: relative;
    display: none;
    }

/* Expanding image text */
#imgtext {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: white;
    font-size: 20px;
    }
.button {
    background-color: #000000;
    color: #FFFFFF;
    padding: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin:10px
    }
.small-btn {
    width: 50px;
    height: 25px;
    }
.medium-btn {
    width: 70px;
    height: 30px;
    }
.big-btn {
    width: 90px;
    height: 40px;
    }
/* Closable button inside the expanded image */
.closebtn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    font-size: 35px;
    cursor: pointer;
    }
.rounded-corners {
    border-radius: 30px;
    }