footer{
    z-index: 5;
}

.fancy {
    font-family: 'Grape Nuts', cursive;
    font-weight: 400;
}


/* container modifications*/

.col-100 {
    width: 100%;
    height: 100%;
}

.vh-100 {height: 100vh;}
.vh-75 {height: 75vh;}
.vh-50 {height: 60vh;}
.vh-25 {height: 25vh;}
.vh-15 {height: 15vh;}
.vh-5 {height: 5vh;}

.section {
    width: 100%;
}

.container-10 {width: 10%;}
.container-20 {width: 20%;}
.container-30 {width: 30%;}
.container-40 {width: 40%;}
.container-50 {width: 50%;}
.container-60 {width: 60%;}
.container-70 {width: 70%;}
.container-80 {width: 80%;}
.container-90 {width: 90%;}
.container-100 {width: 100%;}

.min-vh-100 {min-height: 100vh;}

/* text modifications */

.text-alg-center{text-align: center;}
.text-alg-left{text-align: left !important;}
.text-alg-right{text-align: right;}

h1{font-size: 6rem;}
h2{font-size: 5rem;}
h3{font-size: 4rem;}
h4{font-size: 3rem;}
h5{font-size: 2rem;}
h6{font-size:1.2rem;}


.pos-rel{position: relative;}
.pos-absol{position:absolute;}

.box-shadow{box-shadow: 0 0 10px 2px;}



/* Flex modifications */

.y-flex{display:flex;}

.d-flex{
    display:flex;
    flex-direction: column;
}

.d-grid{
    display: grid;
    place-items: center;
}

.alg-cent{align-items: center;}              /* For flex values */
.alg-cent-str{align-items: stretch;}

.just-cont{justify-content: center;}            /* For flex values */
.just-cont-bet{justify-content: space-between;} /* For flex values */
.just-cont-arr{justify-content: space-around;}  /* For flex values */
.flex-wrap{flex-wrap: wrap;}

.p-1{padding:0.8rem;}
.p-2{padding:2.5rem;}
.p-3{padding:4rem;}
.p-4{padding:6rem;}
.p-5{padding:10rem;}

.pl-1{padding-left:0.8rem;}
.pl-2{padding-left:2.5rem;}
.pl-3{padding-left:4rem;}
.pl-4{padding-left:6rem;}
.pl-5{padding-left:10rem;}

.pr-1{padding-right:0.8rem;}
.pr-2{padding-right:2.5rem;}
.pr-3{padding-right:4rem;}
.pr-4{padding-right:6rem;}
.pr-5{padding-right:10rem;}

.pb-1{padding-bottom:0.8rem;}
.pb-2{padding-bottom:2.5rem;}
.pb-3{padding-bottom:4rem;}
.pb-4{padding-bottom:6rem;}
.pb-5{padding-bottom:10rem;}

.pt-1{padding-top:0.8rem;}
.pt-2{padding-top:2.5rem;}
.pt-3{padding-top:4rem;}
.pt-4{padding-top:6rem;}
.pt-5{padding-top:10rem;}

.m-1{margin:0.8rem;}
.m-2{margin:2.5rem;}
.m-3{margin:4rem;}
.m-4{margin:6rem;}
.m-5{margin:10rem;}

.ml-1{margin-left:0.8rem;}
.ml-2{margin-left:2.5rem;}
.ml-3{margin-left:4rem;}
.ml-4{margin-left:6rem;}
.ml-5{margin-left:10rem;}

.mr-1{margin-right:0.8rem;}
.mr-2{margin-right:2.5rem;}
.mr-3{margin-right:4rem;}
.mr-4{margin-right:6rem;}
.mr-5{margin-right:10rem;}

.mb-1{margin-bottom:0.8rem;}
.mb-2{margin-bottom:2.5rem;}
.mb-3{margin-bottom:4rem;}
.mb-4{margin-bottom:6rem;}
.mb-5{margin-bottom:10rem;}

.mt-1{margin-top:0.8rem;}
.mt-2{margin-top:2.5rem;}
.mt-3{margin-top:4rem;}
.mt-4{margin-top:6rem;}
.mt-5{margin-top:10rem;}

.m-auto{margin-left:auto; margin-right: auto;}
.ml-auto{margin-left:auto;}
.mr-auto{margin-right:auto;}


.font-10{font-size: 10px;}
.font-20{font-size: 20px;}
.font-30{font-size: 30px;}

/* colors */
.bg-sec-4 { background-color: rgb(55, 55, 55);}
.bg-sec-3 { background-color: rgb(50, 50, 50);}
.bg-sec-2 { background-color: rgb(146, 146, 146);}
.bg-sec-1 { background-color: rgb(255, 255, 255);}
.bg-pri-1 { background-color: rgb(200, 246, 248);}
.bg-pri-2 { background-color: rgb(100, 202, 209);}
.bg-pri-3 { background-color: rgb(54, 126, 132);}

.bg-grad-1 {background: linear-gradient(90deg, rgb(200, 246, 248)  0%, rgb(100, 202, 209) 50%, rgb(54, 126, 132) 80%);}
.bg-grad-2 {background: linear-gradient(135deg, rgb(54, 126, 132) 0%, rgb(100, 202, 209) 70%, rgb(200, 246, 248)  100%);}

.bg-col-w { background-color: rgba(255,255,255, 1)}
.bg-col-b { background-color: rgb(0, 0, 0)}

.sec-4 { color: rgb(60, 60, 60);}
.sec-3 { color: rgb(83, 82, 82) }
.sec-2 { color: rgb(166, 166, 166) }
.sec-1 { color: rgb(255, 255, 255) }
.pri-1 { color: #c8f6f8 }
.pri-2 { color: #64cad1 }
.pri-3 { color: #367e84 }

.bg-add-1-1 {background-color: rgb(255, 50, 136);}
.bg-add-1-2 {background-color: rgb(205, 50, 109);}
.bg-add-1-3 {background-color: rgb(150, 50, 79);}

.bg-add-2-1 {background-color: rgb(255, 108, 55);}
.bg-add-2-2 {background-color: #ff4600;}
.bg-add-2-3 {background-color: rgb(190, 51, 0);}

.bg-button {background-color: rgba(100, 202, 209, 0.542);}

.col-w { color: rgb(255, 255, 255)}
.col-b { color: rgb(0, 0, 0)}

.bg-tester{background-color: rebeccapurple;}

.border-tester{border:2px solid blue}


.opacity-0 {
    opacity: 0;
}

.opacity-1 {
    opacity: 1;
}

.border-50 {
    height: 85%;
    width: 100%;
    clip-path: circle();
}