h1 {
    color: #aeffed;
    font-size: 50px;
    background-color: rgb(170, 127, 99);
    margin: 100px;
    text-align: center;
    box-shadow: 5px 5px 5px rgb(112, 80, 66);
    border-color: #c4fff1;
    border-width: 5px;
    border-style: solid;

    font-family: "Barrio", system-ui;
    font-weight: 400;
    font-style: normal;

}

h2 {
    color: rgb(182, 136, 105);

    font-family: "Amarante", serif;
    font-weight: 400;
    font-style: normal;

}

p { 
    color: rgb(143, 111, 94);

    font-family: "Caveat Brush", cursive;
    font-weight: 400;
    font-size: 19px;
    font-style: normal;

}

li { 
    color: rgb(143, 111, 94) ;

    font-family: "Caveat Brush", cursive;
    font-style: normal;
    font-weight: 400;
    font-size: 19px;

}


p.subheading {
    background-color: rgb(231, 255, 252);
    text-align: center;
    font-size: 30px;
    color: #6bcab6;
    box-shadow: 5px 5px 5px rgb(92, 163, 151);

    font-family: "Carattere", cursive;
    font-weight: 400;
    font-style: normal;
}

body {
    background-color: #f6fffd;
    background-image: url(https://wallpapers.com/images/featured/mint-green-background-8ucctwoxw33rvp7n.jpg);
}

a {
    display: block;
    color: #3f7a6f;
}

iframe {
    display: block;
}

nav {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    
    a {
    display: inline-block;
    background-color: rgb(219, 255, 249);
    border-color: rgb(111, 185, 173);
    border-width: 2px;
    border-style: solid;
    padding: 5px;
    color: rgb(143, 111, 94);
    text-decoration: none;
    transition-duration: 300ms;
    }

a:hover {
    background-color: #b2eee0;
    translate: 0 3px;
}

}



body.giguides {

    h1 {
        color: rgb(230, 244, 255);
        background-color: #7589ad;
        box-shadow: 5px 5px 5px rgb(70, 92, 126);
        border-color: rgb(230, 244, 255);
    }

    nav {
        a {
            color: #7e93b9;
            background-color: #e3f4ff;
            border-color: #899fc7;
        }

        a:hover {
            background-color: #ccdef7;
        }
    }  

    background-image: linear-gradient(0deg, rgb(188, 212, 255), rgb(228, 240, 255), #ffffff);

    h2.info {
        color: #7589ad;
    }

    img.float {
        float: left;
        margin-right: 20px;
        margin-bottom: 100px;
    }

    a.img-link {
        background-color: rgb(231, 244, 255);
        clear: left;
    }

    h1.pc {
    clear: left;
    color: #7589ad;
    background-color: rgb(230, 244, 255);
    border-color: #7589ad;
    font-family: "Carattere", cursive;
    font-weight: 400;
    font-style: normal;
    }

    section {
        display: flex;
        gap: 20px;
        margin-inline: 100px;

        a {
            text-decoration: none;
            transition-duration: 300ms

        }
        a:hover {
            background-color: rgb(171, 196, 238);
            translate: 0 3px;
            h2 {
                color: #f6fcff;
            }
        }

        img {
            margin: 20px;
        }
    }
    
    h2 {
        color: #697c9e;
        text-align: center;
        
    }

    h2.title {
        color: #788cb3;
        text-align: center;
        font-size: 30px;
        background-color: #f1f7ff;
    }

    h2.titletitle {
        color: #f1f6ff;
        text-align: center;
        font-size: 35px;
        background-color: #899fc7;
        border-width: 5px;
        border-color: #f1f6ff;
        border-style: solid;
        font-family: "Barrio", system-ui;
        font-weight: 400;
        font-style: normal;
    }


    p {
        color: #66799b;
        font-size: 20px;
    }

    li {
        color: #667899;
    }
}