/*!
Silly attempt to get my head around CSS
*/

body {
    padding-top: 10px;
    font-size: 1.8vw
}
/*
@media (min-width: 992px) {
  body {
    padding-top: 56px;
  }
} */

h1 {
    font-size: 7.5vw;
}

h2 {
    font-size: 2.8vw;
}

h3 {
    font-size: 6.7vw;
}


.fat {
    font-family: Helvetica, Arial, Sans-Serif;
    font-size:2.2vw;}

.div2 {
    position: relative;
    width: 45%;
    min-width: 500px
    height: 100%;
    padding: 20px;
}
img {
    display: inline-block;
    width: 100%;
    height: auto;
}
img.thumb{
    display: block;
    width: 71%;
    max-width: 200px;
    height: auto;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 80vh; /* Adjust as needed */
    background: url('../rab_pic/Rab_hands.png') no-repeat center center / cover;
    padding: 2rem 0; /* Added to give some space at the top and bottom */
}

.centre-top, .centre-bottom {
    display: flex; /* Make these elements flex containers */
    flex-direction: column; /* Stack the children vertically */
    justify-content: space-between; /* Distribute the space between the children */
    width: 100%; /* Make sure they take up the full width of the .container */
    padding: 1rem 0; /* Add some padding at the top and bottom */
    align-items: center;
}

.centre-top h1 {
    font-size: 9vw;
    background-color: rgba(250, 235, 215, 0.4);
    width: 95%;
    padding: 1% 2%;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    margin-bottom: 0; /* Remove the bottom margin */
    text-align: center;
}

.centre-bottom {
    /* display: block; Add this line */
    background-color: rgba(250, 235, 215, 0.4); /* antiquewhite with alpha of 0.4 */
    width: 80%; /* Make the background cover the entire width */
    padding: 1% 2%; /* Add some padding to give the text some space */
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1); /* Add a faint border */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    margin-bottom: 1%;
}

.centre-bottom h2 {
    font-size: 3.5vw;
    margin-top: 0; /* Remove the top margin */
}


/* Create two equal columns that floats next to each other */
.col2 {
    flex: 48%;
    width: 48%;
    padding: 0 .8vw;
    height: auto; /* Should be removed. Only for demonstration */
}
/* Create two equal columns that floats next to each other */
.col2 h3 {
    margin-top: 0.5em; /* Adjust as needed */
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 5px;
  margin: 100px auto;
  width: 85%
}

.col3 {
    flex: 31.8%;
    max-width: 33%;
    padding: 0 5px;
/*    width: 32.3vw;
/*    padding: .1vw;*/
    height: auto; /* Should be removed. Only for demonstration */
}



/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .col2 {
	flex: 100%;
	min-width:100%;}
    body {
	font-size: 12px;}

}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
    .col3 {
	flex: 100%;
	min-width:100%;}}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (min-width: 1280px) {
    h3 {
        font-size: 88px;}
    body {
	font-size: 27px;}

}

.card {
  height: 77%;
}

.footer {
    text-align: center;
    color: #0f0000; /* Replace with the color you want */
    background-color: #808080; /* Set the background color to gray */
    border-radius: 10px; /* Add rounded corners */
    padding: 3px; /* Add some padding */
    margin-bottom: 5vw;
}