/* Ensure all elements use border-box for sizing */
* {
    box-sizing: border-box;
}
H1 {
    border: 20px solid rgb(220, 127, 127);
    border-style: groove;
    box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.2);
    margin: 0px;
    padding: 0;
    height: 20vh;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
}

#backround1 {
         background-image: url(../Images/Family.jpg);
         background-size: cover;
         background-position: center;
    }

#backround2 {
         background-image: url(../Images/Air.jpg); 
         background-size: cover;
         background-position: center;
    }

#backround3 {
         background-image: url(../Images/Sky.jpg); 
         background-size: cover;
         background-position: center;
    }

#header {
        background: linear-gradient(90deg, #6d0606, #6a0088);
    
}

img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;

}
h1 .text {
    font-size: 8vw;
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
    padding: 0;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
}
/* Font size calc was written by Ai to fix a vertical bug that was caused that I was unable to solve */
/* I used h1 text to separate the border and margins from the text so that i could single out the text  */

section {
    margin: 20px;
    padding: 20px;
    background-color: rgb(255, 83, 83);
    border: 15px solid rgb(220, 127, 127);
    border-style: groove;
    text-align: center;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.2);
}

footer {
    margin: 0px;
    padding: 10px;
    background-color: rgb(245, 105, 89);
    border: 25px solid rgb(220, 127, 127);
    border-style: groove;
    text-align: center;

}


.Argyle {
background-image:
radial-gradient(closest-side, transparent 0%, transparent 75%, #d45b5b 76%, #d84d4d 85%, #f29b9b 86%, #5b1717 94%, #884343 95%, #be4c4c 103%, #e6a7a7 104%, #e6a7a7 112%, #8b3c3c 113%, #8b3c3c 121%, #e47070 122%, #f49393 130%, #ee5555 131%, #e05151 140%),
radial-gradient(closest-side, transparent 0%, transparent 75%, #d45b5b 76%, #d84d4d 85%, #f29b9b 86%, #5b1717 94%, #884343 95%, #be4c4c 103%, #e6a7a7 104%, #e6a7a7 112%, #8b3c3c 113%, #8b3c3c 121%, #e47070 122%, #f49393 130%, #ee5555 131%, #e05151 140%);
background-size: 110px 110px;
background-color: #ac4747;
background-position: 0 0, 55px 55px;
background-repeat: repeat, repeat;
}

/* This pattern archetype was made as a base online from Estelle Weyl on CSS3 Online Gallery */
body {
    margin : 0px;
}

#header1 {
    background: linear-gradient(90deg, #00ffff, #1efd00);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: bold;
    font-size: 8vw;
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#headerbutbetter {
     background: linear-gradient(120deg, #ff4213, #d12bff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: bold;
    font-size: 8vw;
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#header2 {
    background: linear-gradient(90deg, #ff7300, #ffd54a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: bold;
    font-size: 8vw;
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#header3 {
    background: linear-gradient(100deg, #c800ff, #00e5ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: bold;
    font-size: 8vw;
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}